博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[JavaScript] JavaScript作用域深度解析
阅读量:5846 次
发布时间:2019-06-18

本文共 1813 字,大约阅读时间需要 6 分钟。

JavaScript作用域

JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.

—— JS权威指南

在JS里,一切皆对象,函数也是。

一、有什么用

什么时候会用到它?它的存在有什么意义?这是我在学习一个新知识的时候首先发起的疑问。那么,在JavaScript里,作用域有什么用?

作用域规定了变量和函数的可访问范围,这个可访问范围可以细分为两个场景:变量和函数的可见性和生命周期。

  • 可见性:当访问某个变量的时候,访问的是局部变量还是全局变量?重复命名了多个变量,到底访问的是哪个值?这个变量现在能不能用,为什么有时候会返回undefined?
  • 生命周期:变量是一直存在在内存中么?什么时候会被销毁?比如定义在函数内部的变量被称为局部变量,这个变量只存在函数内部,函数调用后将会被销毁,等等...当然如果有闭包什么的就要另当别论,在这里只讨论最一般的情况。

二、全局作用域 & 局部作用域

//函数一var authorName = "jennifer";function doSomething() {    anotherName = "james";    var blogName = "smoothlily";    function innerSay() {        alert(blogName);    }    innerSay();}console.log(authorName); //jenniferdoSomething(); //smoothlily console.log(anotherName); //jamesconsole.log(blogName); //脚本错误innerSay(); //脚本错误

针对可见性这个问题,可以聊一聊JS中规定的两个作用域:全局作用域,局部作用域。

  • 全局作用域(Global Scope)
    在代码中任何地方都能访问到的对象拥有全局作用域,一般来说以下几种情形拥有全局作用域:

最外层函数和在最外层函数外面定义的变量拥有全局作用域:

如函数一的变量authorName。

所有未定义直接赋值的变量自动声明为拥有全局作用域:

如函数一的anotherName。
这种情况在写代码时最好不要出现,想要拥有全局作用域的变量还是乖乖的在脚本最开始显性声明全局变量。

所有window对象的属性拥有全局作用域,例如window.name、window.location、window.top等等

  • 局部作用域(Local Scope)

和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的就是函数内部:如函数一的blogName。

三、作用域链(Scope Chain)

在说作用域链的时候,要分为两个“时间点”:函数创建时以及函数执行时

这里借用做的两个图:

函数创建时:

function add(num1,num2) {var sum = num1 + num2;return sum;}

2011090414435366.jpg

函数在创建时,会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性,使其包含创建函数的那个时刻下,作用域中对象的集合,也就是函数的作用域链,这个作用域链直接决定哪些数据被函数访问。

函数执行时:

var total = add(5, 10)

2011090414444843.jpg

函数执行时,创建一个活动对象,活动对象在一开始的时候,只包含arguments对象。

当遇到变量声明时:

var a = 10;

会将这个变量复制到活动对象中。

当遇到变量访问时,会沿着作用域链做标识符解析(后续会提到),直至找到这个变量。

活动对象包含了函数的所有局部变量、命名参数、参数集合以及this,这些值按照它们出现在函数中的顺序被复制到活动对象中。然后此对象会被推入作用域链的前端,当运行期上下文被销毁,活动对象也随之销毁。

标识符解析

作用域链的用途,是为了保证对执行环境有权访问的对象的有序访问。标识符解析沿着作用域链一级一级地搜索标识符。搜索过程始终从作用域链的最前端开始(活动对象),逐级向后访问(直到全局对象),直至找到标识符为止,如果找不到,则会报错。

其他书单

JavaScript框架设计-司徒正妹

参考文献

转载于:https://www.cnblogs.com/smoothLily/p/4468353.html

你可能感兴趣的文章
评论:人才流失强力折射出现实畸形人才观
查看>>
虚拟运营商10月或大面积放号 哭穷背后仍有赢家
查看>>
UML中关联,组合与聚合等关系的辨析
查看>>
ios的google解析XML框架GDataXML的配置及使用
查看>>
netty-当一个客户端连接到来的时候发生了什么
查看>>
在51CTO三年年+了,你也来晒晒
查看>>
js控制图片等比例缩放
查看>>
Openstack API常用命令
查看>>
关于k-means聚类算法的matlab实现
查看>>
跟随我在oracle学习php(8)
查看>>
UVA-10212 The Last Non-zero Digit. 分解质因子+容斥定理
查看>>
求两个集合的交集,并集,差集
查看>>
Kotlin的语法糖(一)基础篇
查看>>
亚信安全参加第六届全国等保技术大会 态势感知助力“等保2.0”落地
查看>>
大数据公司Palantir融得7亿美元 曾追踪拉登
查看>>
建立备份策略的重要性
查看>>
发力IoT领域 Marvell注重生态系统发展
查看>>
你应该知道的 RPC 原理
查看>>
Ubuntu安装词典
查看>>
KVM虚拟机在线添加网卡
查看>>