闭包、this 指向、函数上下文：一条线串起整个 JavaScript

2023-12-25 10:50:25

闭包与作用域链：携手共进

在 JavaScript 的世界中，闭包和作用域链是相互依存的概念，共同决定了函数的行为。闭包是指函数可以访问其定义作用域之外的变量，而作用域链则定义了函数执行时可以访问的变量集合。理解这两者之间的关系对于精通 JavaScript 至关重要。

函数执行上下文：舞台设定

每个函数在执行时都会创建一个执行上下文，这个上下文包含了该函数内声明的变量、函数以及指向当前对象的 this 指针。this 指针的指向决定了函数中对变量的访问权限。

闭包：访问外部变量

闭包的魔力在于，函数可以访问其执行上下文之外定义的变量。这是因为函数在创建时会将执行上下文作为其私有属性进行捕获。因此，即使函数本身已经执行完毕，外部变量仍然可以被访问。

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2
counter(); // 3

在这个例子中，createCounter 函数返回了一个匿名函数，该匿名函数可以访问其外部作用域中的 count 变量，从而实现计数功能。

箭头函数：一个另类

与其他函数不同，箭头函数没有自己的执行上下文，因此它无法创建闭包。相反，箭头函数的 this 指针始终指向其父函数的 this 指针。这使得箭头函数非常适合作为回调函数，因为它可以保持父函数的作用域。

const obj = {
  count: 0,
  increment: function() {
    this.count++;
    console.log(this.count);
  },
  incrementArrow: () => {
    this.count++;
    console.log(this.count);
  },
};

obj.increment(); // 1
obj.incrementArrow(); // undefined