JavaScript作用域链实例详解

JavaScript作用域链实例详解攻略

什么是作用域链

在JavaScript中，每一个执行上下文都有一个与之相关的作用域链。作用域链其实就是一条有序列表，它包含了当前执行上下文中所有可访问的变量对象和函数的引用。当JavaScript引擎查找变量时，就会沿着作用域链逐级查找，直到找到为止。如果在整个作用域链上没有找到该变量，则会报ReferenceError错误。

作用域链的构建

作用域链的构建是在函数创建时进行的，与其调用无关。当一个函数被创建时，JavaScript引擎会保存函数的[[Scope]]属性，这个属性是一个数组，数组中的每一个元素是函数创建时的作用域链。当函数被调用时，JavaScript引擎会创建一个新的执行上下文，然后将[[Scope]]数组中的作用域链复制到该执行上下文的作用域链中。

示例一：作用域链的查找

下面是一个例子，演示了作用域链的查找过程。

var x = 'global';
function foo() {
  var x = 'local';
  function bar() {
    console.log(x);
  }
  bar();
}
foo(); // "local"

在执行foo函数的时候，JavaScript引擎创建了一个新的执行上下文，复制了foo函数创建时的[[Scope]]属性，形成了一个新的作用域链。该作用域链包含了全局变量对象以及foo函数的变量对象。

当bar函数执行时，JavaScript引擎会在bar函数的作用域链上查找变量x的值。首先，它会在bar函数的变量对象中查找，因为这里没有定义x变量，所以无法找到。接着，它会查找bar函数的外部执行上下文，即foo函数的变量对象，这里定义了一个x变量，值为'local'。所以，JavaScript引擎输出了'local'。

示例二：动态声明变量

下面是一个例子，演示了如何使用eval函数动态声明变量。

var x = 'global';
function foo() {
  var x = 'local';
  function bar() {
    eval('var x = "dynamic";');
    console.log(x);
  }
  bar();
}
foo(); // "dynamic"

在bar函数中，使用eval函数动态声明了一个x变量，并且赋值为'dynamic'。当JavaScript引擎在bar函数的作用域链上查找变量时，它会先查找bar函数的变量对象，因为这里定义了一个x变量，但是由于使用了eval函数声明的变量不会被添加到作用域链上，所以这里找到的变量x是动态声明的变量。所以，JavaScript引擎输出了'dynamic'。

总结

作用域链是JavaScript中非常重要的概念，它决定了变量的作用域范围。当查找变量时，JavaScript引擎会沿着作用域链逐级查找，直到找到为止。我们需要深刻理解作用域链的构建过程，以及作用域链的查找规则，这样才能编写出高质量的JavaScript代码。