巧破JavaScript三大关：闭包、调用栈、作用域链

2022-12-17 15:26:41

掌握 JavaScript 的三大核心概念：闭包、调用栈和作用域链

闭包

想象一下一个函数可以携带它所在的作用域变量，就像一个旅行袋，即使它离开那个作用域。这就是闭包。闭包非常强大，因为它允许你保存状态、创建私有变量，甚至实现一些不可思议的功能。但是，就像旅行袋，如果装得太多，可能会导致内存泄漏。因此，在使用闭包时要小心，因为它可能成为内存饥饿怪兽的藏身之所。

代码示例：

function outer() {
  let secret = "Shh, this is a secret";
  function inner() {
    console.log(secret); // "Shh, this is a secret"
  }
  return inner; // 返回闭包函数
}

const innerFunction = outer();
innerFunction(); // 访问外部作用域的变量

调用栈

调用栈就像一个火车车厢，它跟踪函数调用的顺序。每次调用一个函数，它都会跳上车厢，完成任务后跳下车厢。调用栈可以让你看到函数是如何堆叠起来的，就像火车车厢一样。它有助于调试程序，就像一位铁路交通管制员。

代码示例：

function a() {
  console.log("我是函数 a");
  b();
}

function b() {
  console.log("我是函数 b");
  c();
}

function c() {
  console.log("我是函数 c");
}

a(); // 调用栈顺序：a -> b -> c

作用域链

作用域链就像一个寻宝游戏，它帮助你找到变量的宝藏。当一个变量被引用时，寻宝游戏开始，作用域链将搜索所有可能的地点，从当前作用域开始，一直到全局作用域。它就像一个寻宝者，寻找变量的藏身之处。

代码示例：

let globalVariable = "全球宝藏";

function outer() {
  let outerVariable = "外部宝藏";

  function inner() {
    let innerVariable = "内部宝藏";
    console.log(globalVariable); // "全球宝藏"
    console.log(outerVariable); // "外部宝藏"
    console.log(innerVariable); // "内部宝藏"
  }
  inner();
}

outer();