万籁归于寂静——理解 JavaScript 中的作用域与作用域链

前端

2023-11-17 00:17:50

# JavaScript 中的作用域的概念

在 JavaScript 中，作用域是指程序源代码中声明变量的区域。变量的作用域可以是全局或局部。全局变量在程序中任何地方都可以访问，而局部变量只能在函数内部访问。

# JavaScript 中的作用域链

作用域链是指从当前执行环境一直到全局执行环境的一系列作用域。当 JavaScript 遇到一个变量时，它会从当前执行环境开始查找，然后一直沿着作用域链向上查找，直到它在某个作用域中发现该变量。

# JavaScript 中的作用域链的意义

作用域链的意义在于，它允许 JavaScript 在不同执行环境中使用变量。全局变量在程序中任何地方都可以访问，而局部变量只能在函数内部访问。但是，当在一个函数内部使用一个全局变量时，函数内部的变量会通过作用域链访问到全局变量。

# JavaScript 中的作用域与闭包的关系

闭包是指一个函数可以访问其父函数的变量。作用域链是闭包的实现机制。在 JavaScript 中，当函数被调用时，它会创建一个新的执行环境。这个新的执行环境被称为当前执行环境的子执行环境。函数内部的变量在当前执行环境中声明，而在子执行环境中被访问。

# 变量作用域示例

// 全局变量
var globalVariable = 1;

// 局部变量
function localVariable() {
  var localVariable = 2;
  console.log("局部变量: " + localVariable);
}
localVariable(); // 输出: 局部变量: 2

// 访问全局变量
console.log("全局变量: " + globalVariable); // 输出: 全局变量: 1

# 作用域链示例

// 函数 A
function A() {
  var a = 1;

  // 函数 B
  function B() {
    var b = 2;

    // 函数 C
    function C() {
      var c = 3;
      console.log("变量 c: " + c); // 输出: 变量 c: 3
    }
    C();
  }
  B();
}
A();

// 访问函数 A 中的变量 a
console.log("变量 a: " + a); // 输出: 变量 a: 1

# 闭包示例

// 函数 A
function A() {
  var a = 1;

  // 函数 B
  function B() {
    var b = 2;

    // 函数 C
    function C() {
      console.log("变量 a: " + a); // 输出: 变量 a: 1
    }

    return C;
  }
  return B;
}

// 函数 D
function D() {
  var a = 3;

  // 函数 E
  function E() {
    console.log("变量 a: " + a); // 输出: 变量 a: 3
  }

  return E;
}

// 函数 A 的返回值
var funcA = A();

// 函数 B 的返回值
var funcB = funcA();

// 函数 C 的返回值
var funcC = funcB();

// 调用函数 C
funcC(); // 输出: 变量 a: 1