揭开 JavaScript 执行上下文的奥秘

在 JavaScript 的世界中，执行上下文是一个至关重要的概念，它定义了代码执行的环境。它决定了变量的可用性、作用域链和 this 的值。本文将深入探讨 JavaScript 执行上下文的组成部分，包括变量对象、作用域链和 this。

变量对象：保存代码中所有变量

变量对象是一个对象，它包含了代码中所有变量的属性。当一个变量被声明时，就会在变量对象中创建一个对应的属性。变量属性的值就是变量的值。

在函数内部，函数内部声明的变量会存储在函数的变量对象中。函数的变量对象链接到其父级作用域的变量对象，形成一个作用域链。

作用域链：确定变量的可访问性

作用域链是一个对象链，它定义了变量的可访问性。每个执行上下文都有一个作用域链。当执行上下文执行时，它会沿着作用域链向上搜索，以查找变量。如果在当前执行上下文中找不到变量，它将在作用域链中继续向上搜索，直到找到变量或达到全局作用域。

this：指向当前对象

this 是一个特殊的，它指向当前对象。在全局执行上下文中，this 指向全局对象（在浏览器中通常是 window 对象）。在函数执行上下文中，this 指向函数调用的对象。

执行上下文的三种类型

在 JavaScript 中，有三种类型的执行上下文：

• 全局执行上下文： 这是脚本开始执行时创建的第一个执行上下文。它没有父级作用域链，并且 this 指向全局对象。
• 函数执行上下文： 当函数被调用时，会创建一个新的函数执行上下文。它的父级作用域链是调用它的执行上下文的变量对象，并且 this 指向函数调用的对象。
• eval() 执行上下文： 当使用 eval() 函数时，会创建一个新的 eval() 执行上下文。它的父级作用域链是调用 eval() 函数的执行上下文的变量对象，并且 this 指向全局对象。

思考题

为了巩固对执行上下文的理解，让我们分析以下思考题：

1. 考虑以下代码：

var x = 10;

function foo() {
  var y = 20;
  console.log(x); // 10
  console.log(y); // 20
}

foo();

在这个例子中，变量 x 和 y 存储在哪些变量对象中？

2. 考虑以下代码：

var x = 10;

function foo() {
  var x = 20;
  console.log(this.x); // undefined
}

foo();

在这个例子中，为什么 this.x 的值为 undefined？

答案

1. x 存储在全局执行上下文的变量对象中，y 存储在函数 foo 的变量对象中。
2. 在函数 foo 中，this 指向全局对象，全局对象没有 x 属性，因此 this.x 的值为 undefined。

结论

执行上下文是 JavaScript 中一个至关重要的概念。通过理解其组成部分，包括变量对象、作用域链和 this，可以更深入地了解 JavaScript 的工作原理。这种理解对于编写健壮、可维护的 JavaScript 代码至关重要。