构建思维格局，精进编程之道——浅谈JS执行上下文与词法作用域

2024-02-21 13:24:52

纵观全局：执行上下文的宏观视角

执行上下文是JavaScript程序执行时，被创建的上下文环境。每当程序执行新的代码时，就会创建一个新的执行上下文，用于存储执行过程中的信息，包括变量、函数和参数。执行上下文可以分为全局执行上下文和函数执行上下文。

全局执行上下文是在程序开始运行时创建的，它负责执行全局代码，以及没有被任何函数包含的代码。而函数执行上下文是在函数被调用时创建的，它负责执行函数中的代码，以及函数内部定义的变量和函数。

深入探究：词法作用域的微观世界

词法作用域是JavaScript中一个重要的概念，它定义了变量的可见范围。词法作用域是由函数的定义位置决定的，函数内部的变量只在该函数及其嵌套函数内部可见。词法作用域使得变量具有局部性，可以避免变量命名冲突，从而提高代码的可读性和可维护性。

词法作用域遵循以下规则：

变量在函数内声明时，其作用域仅限于该函数及其嵌套函数内部。
变量在函数外声明时，其作用域为全局作用域，可以在整个程序中使用。
内层函数可以访问外层函数的变量，但外层函数无法访问内层函数的变量。

执行上下文与词法作用域的紧密联结

执行上下文与词法作用域紧密相关，它们共同管理着JavaScript程序的执行。在函数执行时，函数执行上下文被创建，并与当前的全局执行上下文建立父子关系，形成执行上下文栈。词法作用域也随之被确定，函数内部的变量可以在当前执行上下文的词法作用域中访问。

案例解析：理解变量绑定与闭包

为了更好地理解执行上下文和词法作用域，我们来看一个具体的例子：

var globalVariable = 10;

function outerFunction() {
  var outerVariable = 20;

  function innerFunction() {
    var innerVariable = 30;
    console.log(globalVariable); // 10
    console.log(outerVariable); // 20
    console.log(innerVariable); // 30
  }

  innerFunction();
}

outerFunction();

在这个例子中，全局变量globalVariable在全局执行上下文中声明，它的作用域是整个程序。外层函数outerFunction()在全局执行上下文中声明，它的作用域仅限于该函数内部。内层函数innerFunction()在outerFunction()内部声明，它的作用域仅限于该函数内部。

当outerFunction()被调用时，会创建一个新的执行上下文，并与全局执行上下文建立父子关系。此时，outerVariable和innerFunction()都处于outerFunction()的词法作用域中，因此innerFunction()可以访问outerVariable。

当innerFunction()被调用时，又会创建一个新的执行上下文，并与outerFunction()的执行上下文建立父子关系。此时，innerVariable处于innerFunction()的词法作用域中，outerVariable和globalVariable处于innerFunction()的词法作用域之外，因此innerFunction()可以访问innerVariable和globalVariable。

这个例子展示了执行上下文和词法作用域的密切关系，它们共同决定了变量的可见性。