JavaScript详细解析之作用域链

前言

作用域是ECMAScript中一个重要的概念，它决定了变量和函数在代码中的可访问性和生命周期。作用域链是理解作用域的关键概念之一。本文将详细解析作用域链的概念、形成过程以及其对变量查找的影响。

作用域链的概念

作用域链是由一系列执行环境对象构成的结构。执行环境对象是在函数执行过程中创建的，它包含了该函数的活动对象（变量对象）以及对父级执行环境对象的引用。每个执行环境对象都会创建一个与之相关联的作用域链。

// 示例代码
function outer() {
  var x = 10;
  function inner() {
    var y = 20;
    console.log(x + y);
  }
  return inner;
}

var myFunc = outer();
myFunc();

在上面的示例中，调用outer函数会创建一个执行环境对象并将其放入作用域链中。该执行环境对象包含了一个活动对象，其中包含了变量x。调用inner函数会创建另一个执行环境对象，并将其放入作用域链的顶端。该执行环境对象包含了一个活动对象，其中包含了变量y。当执行console.log语句时，JavaScript引擎会首先在inner的活动对象中查找变量y，找到后输出20。如果在inner的活动对象中没有找到变量x，JavaScript引擎将会继续在父级执行环境对象中查找。因此，x的值为10，所以最终输出30。

作用域链的形成过程

作用域链的形成是在函数创建阶段完成的。当函数被创建时，JavaScript引擎就会根据函数定义中的词法作用域信息来确定函数的作用域链。

具体来说，当函数被定义时，引擎会保存当前执行上下文中的作用域链，并将其赋值给函数的[[Scope]]属性。当函数被调用时，执行上下文中的作用域链会被复制到函数的执行环境对象中，形成该函数的作用域链。

// 示例代码
function outer() {
  var x = 10;
  function inner() {
    var y = 20;
    console.log(x + y);
  }
  return inner;
}

var myFunc = outer();

在上面的示例中，当函数outer被定义时，它的作用域链由全局执行上下文的作用域链构成。当调用outer函数时，执行上下文的作用域链会被复制到outer函数的执行环境对象中，形成outer函数的作用域链。在执行inner函数时，会再次复制outer函数的作用域链到inner函数的执行环境对象中，形成inner函数的作用域链。因此，inner函数的作用域链包含了outer函数的活动对象和全局执行上下文的活动对象。

作用域链对变量查找的影响

作用域链对变量查找的影响体现在以下两个方面：变量声明和变量赋值。

首先，当JavaScript引擎在函数执行过程中遇到一个变量的声明语句时，会首先在当前执行环境对象的活动对象中查找该变量。如果找到了变量，就对其赋值；如果没有找到变量，则会继续在父级执行环境对象中查找，直到找到全局执行上下文的活动对象。如果在整个作用域链上都没有找到该变量，则会抛出ReferenceError。

// 示例代码
function outer() {
  var x = 10;
  function inner() {
    var y = 20;
    console.log(x + y);
    var x = 30; // 变量声明语句
  }
  return inner;
}

var myFunc = outer();
myFunc();

在上面的示例中，console.log语句会在inner函数的活动对象中查找变量x，但由于变量声明语句var x = 30提升到函数顶部，在赋值之前，变量x已经存在且为undefined。因此，输出的结果为NaN。

其次，当JavaScript引擎在函数执行过程中遇到一个变量的赋值语句时，会从作用域链的顶端开始查找该变量。如果找到了变量，则对其进行赋值；如果没有找到变量，则会创建一个全局变量，并将其添加到全局执行上下文的活动对象中。

// 示例代码
function outer() {
  var x = 10;
  function inner() {
    var y = 20;
    console.log(x + y);
    x = 30; // 变量赋值语句
  }
  return inner;
}

var myFunc = outer();
myFunc();
console.log(x); // 输出30

在上面的示例中，console.log语句会在inner函数的活动对象中查找变量x，并成功找到并输出了具体的值。在变量赋值语句x = 30处，由于没有使用var关键字，JavaScript引擎会产生一个全局变量x，并将其添加到全局执行上下文的活动对象中。因此，最后的console.log语句也能成功输出全局变量x的值。

总结

作用域链是由一系列执行环境对象构成的结构，用于确定变量和函数的可访问性和生命周期。作用域链的形成是在函数创建阶段完成的，它保存了当前执行上下文中的所有作用域信息。作用域链对变量查找有重要影响，它决定了变量声明和变量赋值的行为。在变量声明时，作用域链会逐级查找，直到找到变量或抛出ReferenceError；在变量赋值时，作用域链也会逐级查找，直到找到变量或创建一个全局变量。