透过现象看本质，解析JavaScript词法作用域和动态作用域

JavaScript学习系列之词法作用域和动态作用域

JavaScript 是当今最流行的编程语言之一，它拥有着强大的功能和广泛的应用场景。而作用域是 JavaScript 中的一个重要概念，它决定了变量和函数的可见性。

词法作用域和动态作用域是 JavaScript 作用域的两种基本类型。

词法作用域也称作静态作用域，这种作用域决定了变量和函数在代码中声明的位置。换句话说，词法作用域在编译时就确定了，并且在整个程序运行过程中都不会发生改变。

词法作用域由以下几个概念组成：

• 全局作用域：全局作用域是整个程序都可以访问的作用域，全局变量在全局作用域中声明。
• 函数作用域：函数作用域是函数内部的作用域，在函数中声明的变量只能在该函数内部访问。
• 块级作用域：块级作用域是花括号括起来的作用域，在块级作用域中声明的变量只能在该块级作用域内部访问。

动态作用域与词法作用域相反，它的作用域是由运行时栈决定的。动态作用域由以下几个概念组成：

• 全局作用域：全局作用域是整个程序都可以访问的作用域，全局变量在全局作用域中声明。
• 局部作用域：局部作用域是函数内部的作用域，在函数中声明的变量只能在该函数内部访问。
• 闭包：闭包是一个函数及其相关的变量的组合，当一个函数被嵌套在另一个函数中时，就会形成闭包。在闭包中，内部函数可以访问外部函数的作用域，即使外部函数已经执行完毕。

JavaScript 遵循词法作用域，这意味着变量和函数的作用域在编译时就确定了，并且在整个程序运行过程中都不会发生改变。

理解词法作用域和动态作用域对于理解 JavaScript 的运行机制非常重要。只有理解了作用域，才能编写出更健壮、更易维护的 JavaScript 程序。

词法作用域的例子

// 全局变量
var globalVariable = 10;

// 函数作用域
function myFunction() {
  // 局部变量
  var localVariable = 20;

  // 块级作用域
  {
    // 块级变量
    var blockVariable = 30;
  }

  // 访问全局变量
  console.log(globalVariable); // 输出：10

  // 访问局部变量
  console.log(localVariable); // 输出：20

  // 访问块级变量
  console.log(blockVariable); // ReferenceError: blockVariable is not defined
}

myFunction();

在这个例子中，全局变量可以在任何地方访问，而局部变量只能在函数内部访问，块级变量只能在块级作用域内部访问。

动态作用域的例子

// 全局变量
var globalVariable = 10;

// 函数作用域
function myFunction() {
  // 局部变量
  var localVariable = 20;

  // 嵌套函数
  function nestedFunction() {
    // 访问全局变量
    console.log(globalVariable); // 输出：10

    // 访问局部变量
    console.log(localVariable); // 输出：20
  }

  nestedFunction();
}

myFunction();

在这个例子中，嵌套函数可以访问外层函数的作用域，即使外层函数已经执行完毕。

总结

词法作用域和动态作用域是 JavaScript 作用域的两种基本类型。词法作用域在编译时就确定了，并且在整个程序运行过程中都不会发生改变，而动态作用域是由运行时栈决定的。JavaScript 遵循词法作用域，这意味着变量和函数的作用域在编译时就确定了，并且在整个程序运行过程中都不会发生改变。理解词法作用域和动态作用域对于理解 JavaScript 的运行机制非常重要。只有理解了作用域，才能编写出更健壮、更易维护的 JavaScript 程序。