漫步在 JavaScript 的作用域与作用域链的殿堂

前端

2023-12-26 22:30:03

漫步于 JavaScript 的作用域之境

在 JavaScript 的国度里，作用域犹如一块块相互交织的土地，每一块土地上孕育着不同的变量和函数，它们的可访问性取决于它们所处的土地——作用域。

作用域概述

作用域，简单来说，就是变量和函数声明的区域。作用域一经确定，变量和函数只能在这个限定区域内被引用和访问，超出了作用域范围，它们将无影无踪。

全局作用域

在 JavaScript 的世界中，全局作用域是最大的舞台，它没有边界，囊括了一切不属于任何其他作用域的变量和函数。它们是 JavaScript 舞台上的常驻演员，可以在任何角落被访问。

局部作用域

与全局作用域相比，局部作用域的领土较小，仅限于函数内部。在这个狭小的空间中，局部变量和函数可以自由翱翔，不受全局变量的干扰。然而，它们无法跨越函数的藩篱，一旦离开函数的作用域，它们便销声匿迹。

作用域链

作用域链，如同一个层层递进的王国，将作用域们串联起来。当一个变量或者函数试图访问另一个变量或者函数时，它将沿着作用域链向上攀爬，依次寻找目标。

揭开作用域链的神秘面纱

作用域链，是 JavaScript 程序执行时构建的一条隐形路径，它连接着所有作用域，为变量和函数的访问提供了一条便捷的通道。作用域链的形成规则如下：

全局作用域总是位于作用域链的顶端，它是所有作用域的根基。
函数的作用域链包含它自身的作用域以及所有父函数的作用域。
在一个函数内部，变量和函数只能访问作用域链上高于或等于自己作用域的变量和函数。

实践出真知：作用域的应用实例

理解了作用域的奥秘，我们一起来看看它在实际应用中的妙用。

实例一：多层函数中的变量访问

假设我们有一个函数嵌套的代码结构，如下所示：

function outer() {
  var a = 1;

  function inner() {
    var b = 2;

    console.log(a); // 1
    console.log(b); // 2
  }

  inner();
}

outer();

在这个例子中，变量 a 声明在 outer 函数中，b 声明在 inner 函数中。由于 inner 函数的作用域链包含 outer 函数的作用域，因此 inner 函数可以访问 a 变量，而 outer 函数无法访问 b 变量。

实例二：闭包的妙用

闭包，是 JavaScript 中的又一瑰宝，它将函数的作用域与外部作用域结合起来，创造出一种新的作用域环境。闭包的典型应用场景之一是事件处理程序，它可以访问事件发生时函数的作用域中的变量，即使函数早已执行完毕。

function createButton(label) {
  var count = 0;

  var button = document.createElement("button");
  button.innerHTML = label;

  button.addEventListener("click", function() {
    count++;
    console.log(count); // 1, 2, 3, ...
  });

  return button;
}

var button1 = createButton("Button 1");
var button2 = createButton("Button 2");

document.body.appendChild(button1);
document.body.appendChild(button2);