全面了解JavaScript的作用域链

下面我会详细讲解全面了解 JavaScript 的作用域链的攻略。

什么是 JavaScript 的作用域链？

JavaScript 的作用域链是由当前执行环境的变量对象和它的父级环境的变量对象构成的一条链。当执行环境需要访问一个变量时，它会首先在当前的变量对象中查找，如果没有找到，它会从父级环境的变量对象中查找，直到找到该变量的值或者查找到全局作用域，如果还没有找到就会报错。

作用域链的创建方式

当执行一个函数时，会创建一个新的执行环境，并且将其加入到作用域链的顶端。

下面是一个例子：

var a = 1;
function foo() {
  var b = 2;
  function bar() {
    var c = 3;
    console.log(a + b + c);
  }
  bar();
}
foo();

在上面的例子中，当执行 foo 函数时，会创建一个新的执行环境，并且将其加入到作用域链的顶端，也就是说作用域链的顶端是 foo 函数的变量对象。当执行 bar 函数时，会创建一个新的执行环境，并且将其加入到作用域链的顶端，也就是说作用域链的顶端是 bar 函数的变量对象，而 foo 函数的变量对象则成为了 bar 函数的父级变量对象。

示例说明

下面是两个示例来说明作用域链的使用方式：

示例一

var a = 1;
function foo() {
  var b = 2;
  function bar() {
    var c = 3;
    console.log(a + b + c);
  }
  return bar;
}
var baz = foo();
baz();

在上面的代码中，当调用 foo 函数时，会创建一个新的执行环境，并且将其加入到作用域链的顶端。然后函数 bar 被 foo 函数返回后，函数 bar 的作用域链仍然是 foo 函数的变量对象和全局变量对象的链。因此，在调用 baz 函数时，会首先在当前的变量对象中查找 a，如果没有找到，就会沿着作用域链向上查找，在 foo 函数的变量对象中找到 b，在全局变量对象中找到 a，然后将它们相加并输出。

示例二

var a = 1;
function foo() {
  var a = 2;
  function bar() {
    console.log(a);
  }
  return bar;
}
var baz = foo();
baz();

在上面的代码中，当调用 foo 函数时，会创建一个新的执行环境，并且将其加入到作用域链的顶端。然后函数 bar 被 foo 函数返回后，函数 bar 的作用域链仍然是 foo 函数的变量对象和全局变量对象的链。因此，在调用 baz 函数时，会首先在当前的变量对象中查找 a，由于函数 bar 中没有定义局部变量 a，所以会在父级作用域中查找，即在 foo 函数的变量对象中找到 a，输出 2。