JavaScript 作用域链解析
JavaScript中有Scope(作用域)，Scope chain(作用域链)，Execute context(执行上下文)，Active Object (活动对象),Dynamic Scope(动态作用域)，Closure(闭包)这些概念，要理解这些概念，我们从静态和动态两个方面去分析一下。
首先我们写一个简单的function来做一个例子：
function add(num1, num2){
var sum = num1 + num2;
return sum;
}
我们定义了一个具有两个形参的add函数。
静态方面：
当创建add函数的时候，Javascript引擎会创建add函数的Scope chain,这个作用域链指向了Global Context(全局上下文)。如果用图形形象化的表述如下图所示：
从上图可以看出，当add函数创建的时候，作用域链就已经创建了，因此可以得出一个结论，函数的作用域链是创建函数的时候就已经创建了，而不是动态运行期。下面就来看看动态运行期的时候会发生什么事情。
动态方面：
当执行add函数的时候，JavaScript会创建一个Execute context（执行上下文），执行上下文中就包含了add函数运行期所需要的所有信息。Execute context也有自己的Scope chain,当函数运行的时候，JavaScript引擎会首先从用add函数的作用域链来初始化执行上下文的作用域链，然后JavaScript引擎又会创建一个Active Object,这个对象里面包含了函数运行期的所有局部变量，参数以及this等变量。
如果形象的描述add函数动态运行期会发生什么，可以用如下图来描述：
从上图可以看出，执行上下文是一个动态的概念，它是当函数运行的时候创建的，同时Active Object对象也是一个动态的概念，它是被执行上下文的作用域链引用的。因此可以得出一个结论：执行上下文和活动对象都是动态概念，并且执行上下文的作用域链是由函数作用域链初始化的。
上面说了函数作用域和执行上下文作用域，下面接着说一下动态作用域的问题，当在JavaScript通过with语句，try-catch的catch子句，以及eval方法的时候，JavaScript引擎就会动态的改变执行上下文的作用域。下面还是通过一个例子来看看：
function initUI(){
with (document){ //avoid!
var bd = body,
links = getElementsByTagName("a"),
i= 0,
len = links.length;
while(i < len){
update(links[i++]);
}
getElementById("go-btn").onclick = function(){
start();
};
bd.className = "active";
}
当执行上面的initUI函数的时候，JavaScript会动态的创建一个with语句对应的作用域放到执行上下文作用域链的最前端，通过下图可以形象的描述上述过程，下图红色标注的区域就显示了with语句产生的作用域。
最后，我们来看看JavaScript最神秘的Closure（闭包），闭包在JavaScript其实就是一个函数，闭包是在函数运行期被创建的，下面还是以一个实例来看看：
function assignEvents(){
var id = "xdi9592";
document.getElementById("save-btn").onclick = function(event){
saveDocument(id);
};
}
当上面的assignEvents函数被执行的时候，会创建一个闭包，而这个闭包会引用assignEvents作用域中的id变量，如果按照传统的编程语言的方式，id是存储在堆栈上的一个变量，当函数执行完了以后id就消失，那么怎么可能再次引用呢？显然这里JavaScript采用了另外的方式。下面就来看看JavaScript是如何来实现闭包的。当执行assignEvents函数的时候，JavaScript引擎会创建assignEvents函数执行上下文的作用域链，这个作用域链包含了assignEvents执行时的活动对象，而同时JavaScript引擎也会创建一个闭包，而闭包的作用域链也会引用assignEvent执行时候的活动对象，这样当assignEvents执行完的时候，虽然它本身执行上下文的作用域链不再引用活动对象了，但是闭包还是引用着assignEvents运行期对应的活动对象，这就解释了JavaScipt内部的闭包机制。可以用下图形象的表述上面assignEvents函数运行期的情形：
从上面可以看出，当assignEvents函数执行完毕以后，document.getElementById("save-btn").onclick引用了闭包，这样当用户点击save-btn的时候，就会触发闭包的执行，那么下面就来看看闭包执行时的情形。前面也说了JavaScript中闭包其实就是函数，因此闭包执行和函数执行时的情形是一致的，通过下图来形象的描述上述onclick事件所关联的闭包。
从上图可以看出JavaScript引擎首先创建了闭包的执行上下文，然后用闭包作用域链来初始化闭包的执行上下文作用域链，最后再将闭包执行时对应的活动对象放入到作用域的最前端，这也进一步验证了闭包就是函数的论断。
相关文章
图例组件展现了不同系列的标记(symbol),颜色和名字,可以通过点击图例控制哪些系列不显示,这篇文章主要给大家介绍了关于Echarts图例组件的相关资料,需要的朋友可以参考下2021-06-06
事件是将JavaScript脚本与网页联系在一起的主要方式，是JavaScript中最重要的主题之一。本文将详细探讨JavaScript的事件机制，并对比分析了浏览器之间的不同，具体内容包括事件流、事件处理程序绑定方式、事件对象等。2017-01-01
这篇文章主要介绍了js实现选中页面文字将其分享到新浪微博，需要的朋友可以参考下2015-11-11
潜说js对象和数组 对象是一个无序属性集合, 每个属性都有自己的名字和值2011-05-05
这篇文章主要介绍了js中async函数结合promise的小案例浅析，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
类型断言是一种方式，可以手动指定变量的类型，非空断言是一种类型断言的特殊形式，这篇文章主要给大家介绍TypeScript 中的类型断言和非空断言的使用方法,需要的朋友可以参考下2023-07-07![深入理解选择框脚本[推荐]](//img.jbzj.com/images/xgimg/bcimg6.png)
选择框是通过<select>和<option>元素创建的，又称为下拉列表框。为了方便与这个控件交互，除了所有表单字段共有的属性和方法外，javascript还提供了一些属性和方法。本文将详细介绍选择框脚本2016-12-12
今天网站有个小功能要判断用户购买商品数量是否大于库存数据，如果大于库存数量，就给予提示。2010-12-12
这篇文章主要为大家详细介绍了微信小程序实现水平时间轴，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
下面小编就为大家带来一篇浅谈JavaScript对象的创建方式。小编觉得挺不错的，现在就分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-06-06
![深入理解选择框脚本[推荐]](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论