js进阶——词法作用域

词法作用域详解

在 JavaScript 中，作用域（scope） 决定了代码中变量的可见性和可访问性。JavaScript 使用的是 词法作用域（Lexical Scope），这意味着作用域是由代码的结构决定的，而不是执行时的上下文。了解词法作用域对于编写高效、可维护的代码至关重要。

1. 词法阶段（Lexical Phase）

词法作用域的关键在于 词法分析（lexical analysis），这是编译器在解析代码时执行的第一个步骤。编译器会扫描源代码，将代码拆解为一系列的词法单元（tokens），并根据代码的书写方式确定作用域的层次结构。在这个阶段，代码的作用域规则就已经确定了，这也是词法作用域与动态作用域（如部分语言中的函数调用时决定作用域）不同的地方。

举例：

function outer() {var a = 10;function inner() {console.log(a); // 输出 10}inner();
}
outer();

在这个例子中，inner 函数可以访问 outer 函数中的变量 a，这是因为它在词法上嵌套在 outer 内部。词法作用域在代码编译时已经确定，inner 函数总是能够“看到”外部作用域中的变量，即使 outer 函数不再执行。

2. 作用域链（Scope Chain）

当 JavaScript 代码执行时，函数内引用的变量将首先在当前函数作用域内查找。如果没找到，会沿着作用域链向外查找，直到找到变量或者到达全局作用域为止。这种查找方式是由词法作用域决定的，而不是运行时的调用栈。

例子：

var globalVar = 'global';function outer() {var outerVar = 'outer';function inner() {var innerVar = 'inner';console.log(globalVar);  // 输出 'global'console.log(outerVar);   // 输出 'outer'console.log(innerVar);   // 输出 'inner'}inner();
}
outer();

作用域链保证了 inner 函数可以访问外层作用域中的变量（outerVar 和 globalVar），因为这些作用域是基于代码的结构来确定的。

3. 欺骗词法（Cheating Lexical Scope）

虽然 JavaScript 使用词法作用域，但某些特殊结构允许你欺骗（cheat）词法作用域，动态修改变量的可见性，这包括 eval() 和 with 关键字。它们会让代码在运行时创建新的作用域，改变了 JavaScript 引擎原本的词法作用域规则。

3.1 `eval()`

eval() 函数可以动态地执行一段 JavaScript 代码，并在当前作用域中创建或修改变量。这会影响到词法作用域的正常行为。

例子：

function foo(str) {eval(str); // 动态执行代码console.log(a); // 输出 42
}foo("var a = 42;");

在这个例子中，eval 在 foo 函数的作用域中执行了一段字符串代码，使得变量 a 出现在 foo 的作用域内。虽然这种方法灵活，但它会导致代码的可读性、可维护性降低，并且对性能产生负面影响，因为 JavaScript 引擎不能在编译阶段优化 eval 的代码。

3.2 `with` 语句

with 语句允许你将对象的属性添加到作用域链的顶端，这使得在该作用域内可以直接引用对象的属性。

例子：

var obj = { a: 42 };with (obj) {console.log(a); // 输出 42
}

在 with 语句中，obj 的属性 a 被直接添加到作用域链中，因此可以像引用局部变量一样访问它。然而，with 语句也打破了词法作用域的规则，使得代码的可预测性降低。

性能影响：

eval() 和 with 的使用会导致 JavaScript 引擎在优化时遇到障碍。通常 JavaScript 引擎可以在编译阶段确定作用域链，从而进行优化。但使用 eval 和 with 会让引擎无法预先知道代码执行时的作用域结构，进而无法进行有效的优化。
使用这些特性会降低代码性能，尤其是在热路径（经常执行的代码）中。