深入分析 JavaScript 引擎的词法作用域 (Lexical Scoping) 和动态作用域 (Dynamic Scoping) 概念，并举例说明。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好吧，各位观众老爷，今天咱们来聊聊JavaScript里那些让人头大的“作用域”问题，特别是“词法作用域”和“动态作用域”这两位冤家。放心，保证通俗易懂，不会让你听得想睡觉。

开场白：作用域是个啥？

简单来说，作用域就是变量的“地盘”。变量在哪儿声明，它就在哪儿的地盘上活动。在这个地盘里，你可以访问和修改它。出了这个地盘，对不起，不认识你！

想象一下，你家里的钥匙只能打开你家的门，不能打开邻居家的门。这个“家”就是变量的作用域，钥匙就是你访问变量的权限。

主角登场：词法作用域 (Lexical Scoping) vs. 动态作用域 (Dynamic Scoping)

好了，现在主角要登场了。这两种作用域的区别，直接决定了你的代码里变量是怎么被找到的。

词法作用域 (Lexical Scoping)： 也叫静态作用域 (Static Scoping)。这个家伙很“死板”，变量的作用域在代码编写时就已经确定了，跟代码实际运行时的上下文没啥关系。JavaScript 用的就是这种作用域。
动态作用域 (Dynamic Scoping)： 这个家伙很“灵活”，变量的作用域在代码运行时才确定，取决于函数从哪里被调用，而不是在哪里定义的。

说人话就是：

词法作用域： “我是谁的儿子，生下来就知道了。”
动态作用域： “我是谁的儿子，取决于我妈嫁给谁。”

深入剖析词法作用域 (Lexical Scoping)（JavaScript 的选择）

JavaScript 引擎在执行代码之前，会先进行词法分析。它会根据你写的代码，构建一个作用域链 (Scope Chain)。这个作用域链就像一个链表，包含了当前执行环境以及所有父级执行环境的作用域。

当 JavaScript 引擎遇到一个变量时，它会按照以下步骤查找：

首先在当前作用域查找。
如果找不到，就沿着作用域链往上查找，直到找到为止。
如果一直找到全局作用域 (Global Scope) 还是没找到，那就报错（或者在非严格模式下隐式声明一个全局变量）。

举个例子：

function outerFunction() {
  let outerVar = "我是外部变量";

  function innerFunction() {
    console.log(outerVar); // 访问外部变量
  }

  innerFunction();
}

outerFunction(); // 输出 "我是外部变量"

在这个例子中，innerFunction 内部访问了 outerVar。因为 innerFunction 内部没有 outerVar，所以它会沿着作用域链往上查找，找到 outerFunction 的作用域，然后找到了 outerVar。

再来一个更复杂的例子：

let globalVar = "我是全局变量";

function outerFunction() {
  let outerVar = "我是外部变量";

  function innerFunction() {
    let innerVar = "我是内部变量";
    console.log(globalVar, outerVar, innerVar); // 访问全局变量、外部变量和内部变量
  }

  innerFunction();
}

outerFunction(); // 输出 "我是全局变量 我是外部变量 我是内部变量"

在这个例子中，innerFunction 可以访问全局变量 globalVar、外部变量 outerVar 和内部变量 innerVar。查找顺序是：先找 innerFunction 内部，再找 outerFunction 内部，最后找全局作用域。

词法作用域的优势：

可预测性： 代码的行为是可以预测的，因为变量的作用域在编写时就已经确定了。
可维护性： 代码更容易维护，因为你可以清楚地知道每个变量的作用域。
更好的代码组织： 可以通过函数和块级作用域 (Block Scope) 来更好地组织代码。

词法作用域的不足：

有时候可能需要访问外部作用域的变量，但又不想污染全局作用域，这时就可能需要用到闭包 (Closure)。

深入剖析动态作用域 (Dynamic Scoping)（JavaScript 没用它）

动态作用域就比较 “随性” 了。变量的作用域取决于函数被调用的地方。也就是说，如果一个函数在不同的地方被调用，它访问的变量可能会不一样。

举个例子 (假设 JavaScript 使用动态作用域):

let myVar = "全局变量";

function myFunction() {
  console.log(myVar);
}

function outerFunction() {
  let myVar = "外部变量";
  myFunction(); // 在 outerFunction 中调用 myFunction
}

myFunction(); // 在全局作用域中调用 myFunction
outerFunction();

如果 JavaScript 使用动态作用域，那么第一次调用 myFunction() 会输出 "全局变量"，因为 myFunction() 在全局作用域中被调用，所以它访问的是全局变量 myVar。
第二次调用 myFunction() 会输出 "外部变量"，因为 myFunction() 在 outerFunction() 中被调用，而 outerFunction() 中定义了 myVar，所以 myFunction() 访问的是 outerFunction() 中的 myVar。

动态作用域的优势：

灵活性： 可以根据不同的调用环境来改变变量的值。

动态作用域的不足：

难以预测： 代码的行为难以预测，因为变量的作用域取决于函数被调用的地方。
难以维护： 代码更难维护，因为你需要跟踪函数被调用的所有地方。
容易出错： 容易出现意想不到的错误，因为变量的值可能会被意外地改变。

为什么 JavaScript 选择词法作用域而不是动态作用域？

JavaScript 选择了词法作用域，主要是因为以下原因：

可预测性： 词法作用域的代码行为是可以预测的，这使得代码更容易理解和调试。
可维护性： 词法作用域的代码更容易维护，因为你可以清楚地知道每个变量的作用域。
安全性： 词法作用域可以防止一些安全漏洞，例如变量污染。

虽然动态作用域在某些情况下可能更灵活，但它带来的风险也更大。JavaScript 作为一个面向 Web 的语言，安全性是非常重要的，因此选择了更安全、更可预测的词法作用域。

表格对比：词法作用域 vs. 动态作用域

特性	词法作用域 (Lexical Scoping)	动态作用域 (Dynamic Scoping)
确定时间	代码编写时	代码运行时
依赖关系	函数定义的位置	函数调用的位置
可预测性	高	低
可维护性	高	低
适用语言	JavaScript, C++, Python	Bash, Perl (部分情况)
安全性	较高	较低
容易程度	更容易理解和调试	更容易出错

闭包 (Closure)：词法作用域的好伙伴

闭包是指函数与其周围状态（词法环境）的捆绑。换句话说，闭包允许函数访问并操作其词法作用域之外的变量。

举个例子：

function outerFunction() {
  let outerVar = "我是外部变量";

  function innerFunction() {
    console.log(outerVar); // 访问外部变量
  }

  return innerFunction; // 返回内部函数
}

let myClosure = outerFunction(); // 调用 outerFunction，返回 innerFunction
myClosure(); // 调用 innerFunction，输出 "我是外部变量"

在这个例子中，innerFunction 是一个闭包。即使 outerFunction 已经执行完毕，innerFunction 仍然可以访问 outerFunction 中的 outerVar。

闭包的用途：

封装私有变量： 可以使用闭包来创建私有变量，防止外部代码直接访问。
创建函数工厂： 可以使用闭包来创建一系列相似的函数。
实现柯里化 (Currying)： 可以使用闭包来实现柯里化，将一个多参数函数转换为一系列单参数函数。

总结：

词法作用域是 JavaScript 的选择，它更安全、更可预测、更容易维护。
动态作用域虽然更灵活，但也更容易出错。
闭包是词法作用域的好伙伴，可以用来封装私有变量、创建函数工厂和实现柯里化。

希望今天的讲座能帮助大家更好地理解 JavaScript 的作用域。如果还有什么疑问，欢迎随时提问！记住，理解作用域是掌握 JavaScript 的关键一步！加油！

发表回复 取消回复

发表回复取消回复