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
会让引擎无法预先知道代码执行时的作用域结构,进而无法进行有效的优化。- 使用这些特性会降低代码性能,尤其是在热路径(经常执行的代码)中。
4. 小结
- 词法作用域 是由代码的书写结构决定的,不受运行时的影响。变量的可见性在编译时已经确定。
- 作用域链 确保了嵌套函数可以访问其外部作用域的变量,作用域链是基于词法结构构建的。
- 使用
eval()
和with
会打破词法作用域的规则,动态地修改作用域链,尽量避免使用。 - 性能方面,
eval
和with
的使用会阻碍引擎的优化,导致代码运行速度变慢,建议尽量避免这些特性。
词法作用域是理解 JavaScript 的核心之一,掌握了这一概念后,你可以编写出更具可读性和高效的代码。