图解javascript作用域链

图解JavaScript作用域链攻略

什么是作用域链？

在JavaScript中，作用域链是一种用于查找变量和函数的机制。它是由多个执行上下文（execution context）组成的链式结构。每个执行上下文都有一个关联的变量对象（variable object），它包含了在该上下文中定义的变量和函数。

作用域链的构建过程

当JavaScript代码执行时，会创建一个全局执行上下文，它是作用域链的起点。在函数内部，每次调用函数都会创建一个新的执行上下文，并将其添加到作用域链的顶部。这样就形成了一个嵌套的作用域链结构。

作用域链的构建过程如下：

1. 创建全局执行上下文，并将其添加到作用域链的起点。
2. 当进入一个函数内部时，创建一个新的执行上下文，并将其添加到作用域链的顶部。
3. 在函数内部查找变量或函数时，先在当前执行上下文的变量对象中查找，如果找不到，则沿着作用域链向上查找，直到找到为止。
4. 如果在全局执行上下文中仍然找不到，则认为变量未定义。

示例说明

示例一

var x = 10;

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

foo(); // 输出 30

在这个示例中，全局执行上下文中定义了变量 x，并将其添加到作用域链的起点。当调用函数 foo 时，会创建一个新的执行上下文，并将其添加到作用域链的顶部。在函数内部，变量 y 被定义，并添加到当前执行上下文的变量对象中。当执行 console.log(x + y) 时，首先在当前执行上下文的变量对象中查找变量 x 和 y，找到后进行相加并输出结果。

示例二

function outer() {
  var x = 10;

  function inner() {
    var y = 20;
    console.log(x + y);
  }

  inner(); // 输出 30
}

outer();

在这个示例中，函数 outer 内部定义了变量 x，并将其添加到当前执行上下文的变量对象中。当调用函数 inner 时，会创建一个新的执行上下文，并将其添加到作用域链的顶部。在函数 inner 内部，变量 y 被定义，并添加到当前执行上下文的变量对象中。当执行 console.log(x + y) 时，首先在当前执行上下文的变量对象中查找变量 x 和 y，找到后进行相加并输出结果。

以上就是关于图解JavaScript作用域链的完整攻略，希望对你有所帮助！