深入理解Javascript中的作用域链和闭包

2023年6月10日下午8:15 • JavaScript

让我来为你详细讲解 "深入理解Javascript中的作用域链和闭包" 的完整攻略。

什么是作用域链

作用域是一种规定了代码中变量和函数可见性的规则。在 Javascript 中，每个函数都会建立一个自己的作用域。当查找变量或函数时，Javascript 引擎首先查找当前作用域，如果找不到，就会沿着作用域链逐级向上查找，直到找到为止。作用域链就是由当前作用域和上级作用域组成的一条链。

下面是一个具体的实例：

function outer() {
  let outerVar = "I'm an outer variable";

  function inner() {
    let innerVar = "I'm an inner variable";
    console.log(outerVar, innerVar);
  }

  inner();
}

outer(); // 输出 "I'm an outer variable I'm an inner variable"

在这个例子中，inner 函数可以访问 outer 函数中声明的 outerVar 变量。这是因为在外层函数 inner 的作用域链上，含有 outer 函数作用域中的 outerVar 变量。如此一来，inner 函数就可以顺利的打印出 "I'm an outer variable I'm an inner variable"。

什么是闭包

闭包是指一个函数能够访问包含它的作用域中的变量，即使这个函数在一个不同的作用域中被调用。通俗来说，就是内部函数可以访问外部函数中定义的变量和参数。

下面是一个闭包的示例：

function outer() {
  let name = "Alice";

  function inner() {
    console.log(`My name is ${name}`);
  }

  return inner;
}

let fn = outer();
fn();  // 输出 "My name is Alice"

在上面的例子中，当我们调用 outer 函数时，它返回了 inner 函数的引用。这个引用经过外部变量 fn 传递后，可以在外部函数结束执行后继续保留 outer 函数作用域中的 name 变量。当我们调用 fn 函数时，它可以访问 outer 函数中的 name 变量并打印出 "My name is Alice"。

作用域链和闭包的综合应用

接下来让我们看看一个更为复杂的示例，其中包含了作用域链和闭包两种特性的共同应用：

function makeCounter() {
  let count = 0;

  function counter() {
    console.log(count);
    count++;
  }

  return counter;
}

let counter1 = makeCounter();
let counter2 = makeCounter();

counter1(); // 输出 0
counter1(); // 输出 1
counter2(); // 输出 0

在这个例子中，我们定义了一个 makeCounter 函数，它返回了一个内部函数 counter。内部函数 counter 通过闭包机制，访问了 makeCounter 函数中的 count 变量，并且每次调用都会将 count 变量的值加 1 并打印出结果。

在外部代码中，我们创建了两个实例对象 counter1 和 counter2，它们都通过调用 makeCounter 函数得到了内部函数 counter 的引用。然后我们分别对它们进行调用，counter1 产生的结果是 0、1，而 counter2 产生的结果是 0。这是因为每个内部函数得到的 count 变量都是单独存在的，并且闭包的特性保证了内部函数每次调用访问到的变量都是正确的。