图解JavaScript作用域链底层原理

下面就为大家讲解一下“图解JavaScript作用域链底层原理”的完整攻略。

什么是作用域链？

作用域链指的是在 JavaScript 中，用于查找变量的一种机制。在 JavaScript 中，每个函数都有一个作用域链，它是由多个执行上下文（Execution Context）（如全局上下文、函数上下文等）的变量环境引用组成的链式结构。在查找变量时，JavaScript 引擎会从当前执行上下文的变量环境开始，依次沿着作用域链向上查找，直到找到所需的变量或到达全局上下文为止。

作用域链的底层原理

作用域链是由多个执行上下文的变量环境引用组成的链式结构，其中每个执行上下文分别有以下几个组成部分：

1. 变量对象（Variable Object）：保存该执行上下文中定义的变量和函数声明，以便在后续的代码中进行查找。

2. 作用域链（Scope Chain）：由指向父级执行上下文的引用组成，该引用指向着它创建时的活动对象（Active Object）。

3. this 值的引用（This Value）：保存 this 关键字的引用，指向该执行上下文所处的对象。

当 JavaScript 引擎需要查找一个变量时，它会先在当前执行上下文的变量对象中查找，如果找到，则返回该变量的值；否则，它会沿着作用域链向上查找，直到找到该变量或到达全局上下文为止。

示例说明一：变量作用域的例子

var a = 1;
function outer() {
  var b = 2;
  function inner() {
    var c = 3;
    console.log(a + b + c); // 打印 6
  }
  inner();
}
outer();

在上面的代码中，变量 a 定义在全局作用域中，变量 b 和函数 inner 定义在函数 outer 内部。当执行 inner 函数时，它会先在自己的变量对象中查找变量 c，如果找到，则返回该变量的值；否则，它会沿着作用域链向上查找，先到外层函数 outer 的变量对象中查找变量 b，如果找到，则返回该变量的值；否则，它会再向上查找，最终到全局作用域中查找变量 a，如果找到，则返回该变量的值，打印出来的结果为 6。

示例说明二：修改变量作用域的例子

var a = 1;
function outer() {
  var a = 2;
  function inner() {
    a = 3;
    console.log(a); // 打印 3
  }
  inner();
  console.log(a); // 打印 2
}
outer();
console.log(a); // 打印 1

在上面的代码中，变量 a 同样定义在全局作用域中，变量 a 和函数 inner 同样定义在函数 outer 内部。当执行 inner 函数时，它会先在自己的变量对象中查找变量 a，如果找到，则返回该变量的值；否则，它会沿着作用域链向上查找，先到外层函数 outer 的变量对象中查找变量 a，找到后将其值修改为 3。在 inner 函数内部，打印出来的结果为 3。当 inner 函数执行完毕后，在 outer 函数内部，打印出来的结果为 2（因为修改的是 outer 函数内部的变量 a）。最后，在全局作用域中，打印出来的结果为 1。这就是作用域链的底层原理。