一文搞懂 JavaScript 的调用栈、作用域链和闭包，拿捏编程中的三叉戟

2023-04-25 00:04:43

JavaScript 的幕后推手：调用栈、作用域链和闭包

JavaScript，前端开发的基石，其内在运作机制对于掌握这门语言至关重要。调用栈 、作用域链 和闭包这三个概念共同构成了 JavaScript 代码执行和变量管理的核心。

一、调用栈：程序执行的幕后推手

想象一下一个栈，每次调用一个函数时，都会将一个新的“执行上下文”压入栈中。该上下文包含了函数的参数、局部变量和临时变量等信息。

当函数执行完毕，其执行上下文便会从栈中弹出，释放内存。调用栈按照先入后出的顺序管理执行上下文，确保代码井然有序地执行。

function funcA() {
  // 执行上下文 A
  console.log("funcA");
  funcB();
}

function funcB() {
  // 执行上下文 B
  console.log("funcB");
}

funcA();
// 调用栈:
// funcA
// funcB

二、作用域链：变量查找的机制

每个执行上下文都有自己的作用域 ，即定义在该上下文中的变量的集合。当变量在当前作用域中找不到时，JavaScript 会沿着作用域链 向上查找，直到找到该变量或到达全局作用域。

作用域链按照嵌套关系连接，类似于俄罗斯套娃。内层作用域可以访问外层作用域的变量，但外层作用域不能访问内层作用域的变量。

function outerFunc() {
  const outerVar = 10;

  function innerFunc() {
    const innerVar = 20;
    console.log(innerVar, outerVar); // 20, 10
  }

  innerFunc();
  console.log(innerVar); // ReferenceError
}

outerFunc();

三、闭包：函数与作用域的完美结合

闭包是 JavaScript 中的一大亮点。闭包是一个函数，可以访问其定义作用域之外的变量，即使该作用域已经结束。

这意味着闭包可以“记住”其作用域中的变量，即使函数执行完毕。闭包在实现私有变量、创建模块化代码和提高代码重用性方面有着广泛的应用。

function createCounter() {
  let count = 0;

  return function() {
    return count++;
  };
}

const counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1