JS作用域链

JS作用域链

JS作用域链是指在JS中变量访问的规则。在JS中，每个函数都有自己的作用域，当函数嵌套时，就会形成作用域链。作用域链的顶端是全局作用域，最底端是当前函数的作用域。

在JS中，函数被看作是对象，每一个函数对象都有一个内部属性[[scope]]，当函数被创建时，[[scope]]就会被初始化为包含当前上下文中所有可访问的变量对象的数组。当函数访问变量时，JS引擎会按照作用域链从当前作用域依次向上查找，直到找到该变量或者到达全局作用域。如果在全局作用域中还没有找到该变量，则会返回undefined。

以下是一个例子：

var globalVar = "I'm a global variable";

function outer() {
  var outerVar = "I'm a variable declared in outer function";

  function inner() {
    var innerVar = "I'm a variable declared in inner function";
    console.log(innerVar); // Output: "I'm a variable declared in inner function"
    console.log(outerVar); // Output: "I'm a variable declared in outer function"
    console.log(globalVar); // Output: "I'm a global variable"
  }

  inner();
}

outer();

在这个例子中，inner函数内部有一个变量innerVar，当访问innerVar时，JS引擎会从inner函数的作用域开始查找，发现inner函数作用域中有innerVar变量，于是直接返回该变量的值。同样的，当访问outerVar时，JS引擎会从inner函数作用域开始查找，发现outer函数作用域中有outerVar变量，于是直接返回该变量的值。最后，当访问globalVar时，JS引擎会从inner函数作用域开始查找，但是没有发现该变量，于是会继续向上查找，发现全局作用域中有该变量，于是直接返回该变量的值。

作用域链的形成与函数的声明位置有关，而不是函数的调用位置。也就是说，函数在哪里声明的，它的作用域链就由哪些作用域组成。如果在函数内部声明了一个变量，那么该变量会被添加到作用域链的最顶端，如果在函数内部访问一个变量，那么会先在函数的作用域中查找，如果没有找到，就会沿着作用域链向上查找。

总之，JS作用域链是JS中一个重要的概念，理解它有助于我们更好地理解JS变量的访问规则。同时，掌握作用域链也能帮助我们避免一些常见的变量访问错误，提高代码的质量和可维护性。