JavaScript变量（四）执行上下文作用域

前言：

相比于其他语言，JavaScript 中的变量可谓独树一帜。正如 ECMA-262 所规定的，JavaScript 变量是松散类型的，而且变量不过就是特定时间点一个特定值的名称而已。由于没有规则定义变量必须包含什么数据类型，变量的值和数据类型在脚本生命期内可以改变。这样的变量很有意思，很强大，当然也有
不少问题。本章会剖析错综复杂的变量。

一、 执行上下文与作用域

执行上下文（以下简称“上下文”）的概念在 JavaScript 中是颇为重要的。变量或函数的上下文决定
了它们可以访问哪些数据，以及它们的行为。每个上下文都有一个关联的变量对象（variable object），而这个上下文中定义的所有变量和函数都存在于这个对象上。虽然无法通过代码访问变量对象，但后台处理数据会用到它。
全局上下文是最外层的上下文。根据 ECMAScript 实现的宿主环境，表示全局上下文的对象可能不一样。在浏览器中，全局上下文就是我们常说的 window 对象，因此所有通过 var 定义的全局变量和函数都会成为 window 对象的属性和方法。使用 let 和 const 的顶级声明不会定义在全局上下文中，但在作用域链解析上效果是一样的。上下文在其所有代码都执行完毕后会被销毁，包括定义在它上面的所有变量和函数（全局上下文在应用程序退出前才会被销毁，比如关闭网页或退出浏览器）。每个函数调用都有自己的上下文。当代码执行流进入函数时，函数的上下文被推到一个上下文栈上。
在函数执行完之后，上下文栈会弹出该函数上下文，将控制权返还给之前的执行上下文。ECMAScript程序的执行流就是通过这个上下文栈进行控制的。上下文中的代码在执行的时候，会创建变量对象的一个作用域链（scope chain）。这个作用域链决定了各级上下文中的代码在访问变量和函数时的顺序。代码正在执行的上下文的变量对象始终位于作用域链的最前端。如果上下文是函数，则其活动对象（activation object）用作变量对象。活动对象最初只有
一个定义变量：arguments。（全局上下文中没有这个变量。）作用域链中的下一个变量对象来自包含上
下文，再下一个对象来自再下一个包含上下文。以此类推直至全局上下文；全局上下文的变量对象始终
是作用域链的最后一个变量对象。
代码执行时的标识符解析是通过沿作用域链逐级搜索标识符名称完成的。搜索过程始终从作用域链
的最前端开始，然后逐级往后，直到找到标识符。（如果没有找到标识符，那么通常会报错。）
看一看下面这个例子：

var color = "blue"; 
function changeColor() { 
 if (color === "blue") { 
 color = "red"; 
 } else { 
 color = "blue"; 
 } 
}
changeColor(); 

对这个例子而言，
函数 changeColor()的作用域链包含两个对象：一个是它自己的变量对象（就
是定义 arguments 对象的那个），另一个是全局上下文的变量对象。这个函数内部之所以能够访问变量color，就是因为可以在作用域链中找到它。
此外，局部作用域中定义的变量可用于在局部上下文中替换全局变量。看一看下面这个例子

var color = "blue"; 
function changeColor() { 
 let anotherColor = "red"; 
 function swapColors() { 
 let tempColor = anotherColor; 
 anotherColor = color; 
 color = tempColor; 
 // 这里可以访问 color、anotherColor 和 tempColor 
 } 
 // 这里可以访问 color 和 anotherColor，但访问不到 tempColor 
 swapColors(); 
} 
// 这里只能访问 color 
changeColor(); 

以上代码涉及 3 个上下文：全局上下文、changeColor()的局部上下文和 swapColors()的局部
上下文。全局上下文中有一个变量 color 和一个函数 changeColor()。changeColor()的局部上下文中
有一个变量 anotherColor 和一个函数 swapColors()，但在这里可以访问全局上下文中的变量 color。
swapColors()的局部上下文中有一个变量 tempColor，只能在这个上下文中访问到。全局上下文和
changeColor()的局部上下文都无法访问到 tempColor。而在 swapColors()中则可以访问另外两个
上下文中的变量，因为它们都是父上下文。图 4-3 展示了前面这个例子的作用域链

总结：

本期我们分享的是JavaScript变量（四）执行上下文作用域，
我们下期：**作用域链增强**
原创不易，期待您的点赞关注与转发评论😜😜