使用Chrome观察闭包与作用域链

2023-12-01 12:29:19

简介

闭包是一个可以在其创建函数的外部引用局部变量的函数。闭包通常用于在函数创建后继续访问局部变量。例如，在下面的代码中，函数increment是一个闭包，因为它可以访问局部变量counter。

function createCounter() {
  let counter = 0;

  function increment() {
    counter++;
    return counter;
  }

  return increment;
}

const counter1 = createCounter();
const counter2 = createCounter();

console.log(counter1()); // 1
console.log(counter2()); // 1

在上面的代码中，函数counter1和counter2都是闭包，因为它们都可以访问局部变量counter。当我们调用counter1()和counter2()时，局部变量counter的值都会增加。

作用域链

作用域链是一个由函数创建的局部变量组成的链。当一个函数被调用时，它的作用域链就会被创建。作用域链从当前函数开始，一直向上追溯到全局作用域。例如，在下面的代码中，函数increment的作用域链是increment、createCounter和全局作用域。

function createCounter() {
  let counter = 0;

  function increment() {
    counter++;
    return counter;
  }

  return increment;
}

const counter1 = createCounter();
const counter2 = createCounter();

console.log(counter1()); // 1
console.log(counter2()); // 1

当我们调用counter1()和counter2()时，作用域链就会被创建。作用域链从increment函数开始，向上追溯到createCounter函数，再向上追溯到全局作用域。

使用Chrome观察闭包和作用域链

我们可以使用Chrome的调试工具来观察闭包和作用域链。要做到这一点，我们需要在Chrome中打开Sources面板。然后，我们需要选择要调试的脚本。一旦我们选择了脚本，我们就可以使用Scope面板来查看函数的作用域链。

在Scope面板中，我们可以看到函数的作用域链中的局部变量。我们还可以看到函数的作用域链中的其他函数。例如，在下面的代码中，我们可以看到函数increment的作用域链中的局部变量counter和函数createCounter。

function createCounter() {
  let counter = 0;

  function increment() {
    counter++;
    return counter;
  }

  return increment;
}

const counter1 = createCounter();
const counter2 = createCounter();

console.log(counter1()); // 1
console.log(counter2()); // 1

我们还可以使用Chrome的调试工具来查看闭包的引用。要做到这一点，我们需要在Sources面板中选择闭包。然后，我们需要点击Closure按钮。在Closure面板中，我们可以看到闭包的引用。例如，在下面的代码中，我们可以看到闭包increment的引用。

function createCounter() {
  let counter = 0;

  function increment() {
    counter++;
    return counter;
  }

  return increment;
}

const counter1 = createCounter();
const counter2 = createCounter();

console.log(counter1()); // 1
console.log(counter2()); // 1