JavaScript 作用域与上下文深度解析：从 this 到执行上下文

JavaScript 作用域与上下文深度解析：从 this 到执行上下文

概述

JavaScript 中的作用域和上下文机制是其语言特性的核心部分，赋予了 JavaScript 极高的灵活性。函数可以绑定不同的上下文，作用域也能被封装和持久化，这些特性支撑了许多实用的设计模式。然而，对于开发者而言，理解作用域和上下文往往是开发过程中的难点和困惑点。本文将详细阐述这两个概念的定义及其区别。

作用域与上下文的区别

作用域与上下文的区别

首要且关键的一点是，作用域（Scope）和上下文（Context）并非同一概念，它们指向不同的事物。许多前端资料常将二者混淆，导致理解偏差。经过梳理，这里对这两个概念进行澄清：在 JavaScript 中，函数调用时都会关联一个作用域和一个上下文。从根本上讲，作用域是基于函数的，决定了函数内部变量的访问权限；而上下文是基于对象的，通常指代“this”关键字的值，即当前执行代码所属对象的引用。

变量作用域

变量作用域

变量可分为定义在局部或全局作用域中的局部变量和全局变量。全局变量在函数体外声明，可在程序任意位置访问；局部变量在函数体内定义，仅能在该函数或其嵌套函数内访问，外部无法触及。目前 JavaScript 原生不支持块级作用域（如在 if、switch、for 等语句块中定义的变量），这意味着在块内定义的变量在块外依然可访问。不过，ES6 引入了“let”关键字，从而支持块级作用域。关于基础作用域的知识较为简单，此处不再赘述。

“this”上下文

“this”上下文

上下文（context）主要取决于函数的调用方式。当函数作为对象的方法被调用时，“this”指向调用该方法的对象。

var obj={
foo:function (){
console.log(this === obj);
    }
};
obj.foo(); //输出true

此外，当使用“new”关键字创建新对象时，“this”指向新创建的对象实例。

function foo(){
console.log(this);
}
foo(); //输出window
var obj=new foo(); //输出 foo {}

需注意，当全局作用域中的函数被直接调用时，“this”指向全局对象，在浏览器环境中即为 window。但在严格模式下，“this”的值会被设置为“undefined”。

执行上下文

JavaScript 是单线程语言，这意味着在浏览器中运行时，同一时间只能执行一个任务，其他任务需进入方法队列等待处理。

1. 当 JavaScript 代码文件被浏览器加载后，默认首先进入的是全局执行上下文。当在全局上下文中调用一个函数时，程序进入该函数内部，JavaScript 引擎会为该函数创建一个新的执行上下文，并将其压入执行上下文堆栈的顶部。浏览器始终执行堆栈顶部的上下文，执行完毕后将其弹出，随后继续执行下方的上下文。如此循环，直到回到全局上下文。

2. 一个执行上下文分为两个阶段：创建阶段和执行阶段。在创建阶段，JavaScript 解释器首先创建一个变量对象（也称活动对象，activation object），该对象由变量、函数声明和参数组成。此阶段还会初始化函数的作用域链并确定“this”引用的对象。随后进入执行阶段，代码被解释并执行。JavaScript 代码中可存在任意多个函数上下文，当函数被调用时，解释器会创建新上下文及私有作用域，函数内部声明的变量无法在当前函数作用域外部直接访问。

3. 基于上述解释，我们对函数的“执行上下文”有了基本认识，但这正是最容易混淆之处。JavaScript 中的“执行上下文”主要指代作用域，而非前文提到的“this 上下文”。JavaScript 中类似易混淆的概念较多，只要厘清每个概念的具体指向，便不再困惑。因此，这里希望大家能真正区分“执行上下文”与“this 上下文”。

简而言之，执行上下文是一个与作用域紧密相关的概念，尽管这种表述在严格意义上可能不够严谨。

作用域链

作用域链

每个执行上下文都绑定有一个作用域链。作用域链包含了执行上下文堆栈中各执行上下文的活动对象（activation object，这一概念稍显复杂）。作用域链决定了变量的访问路径和标识符的解析方式。

代码示例：

function first(){
second();
function second(){
third();
function third(){
fourth();
function fourth(){
//代码
            }
        }
    }
}
first();

执行上述代码，嵌套函数将被依次执行。以上述代码为例，会形成一个作用域链，从顶部到底部的顺序为：fourth, third, second, first, global。函数 fourth 可以访问全局作用域中的变量，也能访问函数 third、second、first 中定义的任意变量。需注意，在函数体内，局部变量的优先级高于同名的全局变量。若函数内声明的局部变量或函数参数与全局变量重名，则全局变量会被局部变量覆盖。简言之，每次尝试访问变量时，程序会在当前函数作用域内查找，若未找到则沿作用域链向上层查找，直至找到该变量；若仍未找到，则返回 undefined。

总结

本文介绍了 JavaScript 中上下文和作用域的相关概念。JavaScript 中还有其他重要概念，如闭包等，待进一步理清后将另行撰文介绍。