函数作用域与词法作用域剖析：JavaScript 背后的“阴谋”

2023-09-30 23:35:20

在 JavaScript 的广袤世界里，函数作用域和词法作用域就像两个密不可分的兄弟，共同演绎着精彩纷呈的故事。然而，对这些概念的模糊认识可能会导致代码中的隐患和陷阱，让你的编程之路布满荆棘。今天，我们将深入剖析函数作用域与词法作用域的细微差别，揭开 JavaScript 背后的“阴谋”。

函数作用域

函数作用域，顾名思义，是指在函数内部定义的变量或常量的作用范围。当一个函数被调用时，一个新的执行上下文将被创建，它包含函数内部声明的所有变量和常量。这些变量和常量只在函数内部有效，函数执行完毕后，这些变量和常量将被销毁。

举个例子：

function myFunction() {
  let x = 10;
  console.log(x); // 10
}

myFunction();
console.log(x); // ReferenceError: x is not defined

在这个例子中，变量 x 被定义在 myFunction 函数内部，因此它只能在 myFunction 函数内部访问。当 myFunction 函数执行完毕后，x 将被销毁，所以在函数外部无法访问 x。

词法作用域

词法作用域，又称静态作用域，是指由代码结构决定的变量或常量的作用范围。它在编译阶段就已经确定，并且不会随着函数的调用而改变。简单来说，词法作用域由变量声明的位置决定，它可以跨越多个函数调用。

让我们来看一个例子：

let x = 10;

function myFunction() {
  console.log(x); // 10
}

myFunction();

在这个例子中，变量 x 在全局作用域中声明，因此它可以在整个脚本中访问，包括 myFunction 函数内部。即使 myFunction 函数被调用，x 的值仍然可以被访问，因为它的作用域不受函数调用的影响。

两者的联系和区别

函数作用域和词法作用域既有联系又有区别。

联系之处在于，函数作用域总是嵌套在词法作用域之中。换句话说，函数作用域总是受其父级词法作用域的影响。

区别之处在于，词法作用域不受函数调用的影响，而函数作用域随着函数的调用而创建和销毁。

闭包

闭包是 JavaScript 中一种有趣且强大的特性。当一个函数被另一个函数嵌套时，内部函数可以访问外部函数的作用域。这种访问不受函数调用影响，即使外部函数已经执行完毕。

举个例子：

function outerFunction() {
  let x = 10;

  return function innerFunction() {
    console.log(x); // 10
  };
}

const innerFunction = outerFunction();
innerFunction(); // 10

在这个例子中，innerFunction 嵌套在 outerFunction 内部，即使 outerFunction 执行完毕，innerFunction 仍然可以访问 outerFunction 中的变量 x。这是因为 innerFunction 闭包了 outerFunction 的作用域。