作用域与作用域链：理解JavaScript中的局部与全局环境

2023-09-11 16:39:08

JavaScript 中的作用域与作用域链

理解局部与全局环境

在 JavaScript 世界中，作用域是一个至关重要的概念。它决定了变量和函数的可见性和可访问范围，让我们能够在庞大复杂的代码库中组织和管理代码。

全局作用域

想象一下一个宽敞的舞台，这就是全局作用域。它从程序开始到结束始终存在。在这个舞台上，定义的变量和函数就像闪亮的明星，对程序的任何部分都能尽情释放光芒。

// 全局作用域
var globalVariable = "明星闪耀";

function globalFunction() {
  // 可以访问 globalVariable
  console.log(globalVariable);
}

globalFunction(); // "明星闪耀"

局部作用域

舞台上闪耀的不只有全局明星。局部作用域就像一个个闪亮的幕布，只在特定的函数表演时才短暂存在。在幕布后的变量和函数，只能在这场戏中施展魅力。

// 局部作用域
function localFunction() {
  var localVariable = "幕后英雄";

  function innerFunction() {
    // 可以访问 localVariable
    console.log(localVariable);
  }

  innerFunction(); // "幕后英雄"
}

localFunction(); // ReferenceError: localVariable is not defined

作用域链

想象一下演员们出场前都要经过一个后台。这就是作用域链。当演员（变量或函数）想要查找所需道具（变量或函数）时，它们会从当前舞台（作用域）开始，一直往上找，直到找到那个存放道具的后台（作用域）。

例如，在上面的示例中，innerFunction 幕后的演员想要找到道具 localVariable。它会先在 innerFunction 的后台查找，找不到后就会去 localFunction 的后台，最后在全局后台找到。

闭包

闭包就好像一个神奇的魔法师，可以把局部作用域里的道具带到其他地方。闭包函数可以访问其父作用域的变量和函数，即使这个父作用域已经结束了它的表演。

// 闭包
function createCounter() {
  var counter = 0;

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

  return incrementCounter;
}

var counter1 = createCounter();
var counter2 = createCounter();

counter1(); // 1
counter1(); // 2
counter2(); // 1