让 JavaScript 执行环境、作用域链和变量对象一目了然

导语

JavaScript 的执行环境、作用域链和变量对象是理解闭包机制的关键概念。本文将深入浅出地阐述这些概念，为理解闭包扫清障碍。

执行环境

执行环境是 JavaScript 代码执行时的上下文，它包含了以下信息：

• 变量对象 (Variable Object)： 存储着当前执行环境中声明的所有变量。
• 作用域链 (Scope Chain)： 引用当前执行环境及其所有父执行环境中的变量对象。
• **this ** 引用当前执行环境的所属对象。

作用域链

作用域链是一条变量对象引用的链表，它从当前执行环境一直向上延伸到全局执行环境。当 JavaScript 代码访问一个变量时，它会沿着作用域链查找变量声明。如果在当前执行环境中找不到变量，则会继续沿着作用域链向上查找，直到找到变量声明或到达全局执行环境。

变量对象

变量对象是一种特殊的对象，它存储着当前执行环境中声明的所有变量。当声明一个变量时，会创建一个新的变量对象属性并将其初始化为 undefined。如果变量被赋值，则属性的值将被更新。

理解三者之间的关系

执行环境、作用域链和变量对象之间的关系如下图所示：

[图片：执行环境、作用域链和变量对象之间的关系]

• 每个执行环境都有一个变量对象和一个作用域链。
• 作用域链从当前执行环境向上延伸到全局执行环境。
• 执行环境中的变量可以在其作用域链中的任何变量对象中访问。

实例演示

以下代码演示了执行环境、作用域链和变量对象的概念：

function outer() {
  const outerVar = 'outer';
  function inner() {
    const innerVar = 'inner';
    console.log(outerVar); // 输出: 'outer'
    console.log(innerVar); // 输出: 'inner'
  }
  inner();
}
outer();

在这个例子中：

• outer() 函数创建了外部执行环境。
• outerVar 变量声明在外部执行环境的变量对象中。
• inner() 函数创建了内部执行环境。
• innerVar 变量声明在内部执行环境的变量对象中。
• 当 inner() 函数访问 outerVar 时，它会沿着作用域链向上查找，并在外部执行环境的变量对象中找到该变量。

总结

理解执行环境、作用域链和变量对象是理解 JavaScript 闭包的关键。通过掌握这些概念，开发者可以深入了解 JavaScript 的执行机制，从而编写出更加健壮和可维护的代码。