词法作用域

【前提知识】：

JavaScript 的作用域

【作用域定义】：作用域被定义为一套用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找的规则。

【最重要的特征】：定义过程发生在代码的书写阶段（假设没有使用 eval() 或 with）。

作用域共有两种主要的工作模型。

词法作用域：最为普遍的，被大多数编程语言所采用。
动态作用域：仍有一些编程语言在使用，比如 Bash 脚本、Perl 中的一些模式等。

词法阶段

【基础】：大部分标准语言编译器的第一个工作阶段叫作词法化。词法化的过程会对源代码中的字符进行检查，如果是有状态的解析过程，还会赋予单词语义。

简单地说，词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变（大部分情况下是这样的）。

【示例】：

function foo(a) {
    var b = a * 2;
    
    function bar(c) {
        console.log(a, b, c);
    }
    
    bar(b * 3);
}

foo(2); // 2, 4, 12

【解释】：作用域由其对应的作用域块带啊名写在哪里决定，它们是逐级包含的。

全局作用域：其中只有一个标识符，foo。
foo 所创建的作用域：其中有三个标识符，a、bar、b。
bar 所创建的作用域：其中只有一个标识符，c。

【注意】：作用域是严格包含的。换句话说，没有任何函数（定义）可以同时出现在两个外部（父级）函数中。

查找

作用域的结构和互相之间的位置关系给引擎提供了足够的位置信息，引擎用这些信息来查找标识符的位置。

【遮蔽效应】：作用域查找会在找到第一个匹配的标识符时停止。因此如果在多层的嵌套作用域中定义同名的标识符，内部的标识符会“遮蔽”外部的标识符

【注意】：

无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。
全局变量会自动成为全局对象的属性，因此可以不直接通过全局变量的词法名称，而是间接地通过对全局对象属性的引用来对其进行访问。通过这种技术可以访问那些被同名变量所遮蔽的全局变量。但并非全局变量被遮蔽了就无论如何都无法被访问到。
词法作用域查找只会查找一级标识符，比如 a、b 和 c。如果代码中引用了 foo.bar.baz，词法作用域查找只会试图查找 foo 标识符，找到这个变量后，对象属性访问规则会分别接管对 bar 和 baz 属性的访问。

欺骗词法

【问】：如果词法作用域完全由写代码期间函数所声明的位置来定义，怎样才能在运行时来“修改”（也可以说欺骗）词法作用域呢？

【答】：JavaScript 中有两种机制来实现这个目的。社区普遍认为在代码中使用这两种机制并不是什么好主意。但是关于它们的争论通常会忽略掉最重要的点：欺骗词法作用域会导致性能下降。

eval

eval() 函数可以接受一个字符串作为参数，并将其中的内容视为好像在书写时就存在于程序中这个位置的代码。换句话说，可以在你写的代码中用程序生成代码并运行，就好像代码本身就是写在那个位置的一样。

【示例】：

function foo(str, a) {
    eval(str); // 欺骗！
    console.log(a, b);
}

var b = 2;

foo("var b = 3;", 1); // 1, 3

【解释】：eval() 调用中的 var b = 3; 这段代码会被当作本来就在那里一样来处理。由于那段代码声明了一个新的变量 b，因此它对已经存在的 foo() 的词法作用域进行了修改。

【注意】：在严格模式的程序中，eval() 在运行时有其自己的词法作用域，意味着其中的声明无法修改所在的作用域。

function foo(str) {
    "use strict";
    eval(str);
    console.log(a); // ReferenceError: a is not defined
}

foo("var a = 2");

【其他】：

setTimeout() 和 setInterval() 的第一个参数可以是字符串，字符串的内容可以被解释为一段动态生成的函数代码。
new Function() 最后一个参数可以接受代码字符串，并将其转化为动态生成的函数（前面的参数是这个新生成的函数的形参）。

这些功能都不提倡使用。因为它们所带来的好处无法抵消性能上的损失。

with

with 通常被当作可以不需要重复引用对象本身，就可以重复引用该对象中多个属性的快捷方式。

【示例】：

var obj = {
    a: 1,
    b: 2,
    c: 3
};

// 单调乏味的重复 "obj"
obj.a = 2;
obj.b = 3;
obj.c = 4;

// 简单的快捷方式
with(obj) {
    a = 3;
    b = 4;
    c = 5;
}

【示例】：

function foo(obj) {
    with(obj) {
        a = 2;
    }
}

var o1 = {
    a: 3
};

var o2 = {
    b: 3
};

foo(o1);
console.log(o1.a); // 2

foo(o2);
console.log(o2.a); // undefined
console.log(a); //2

【解释】：with 可以将一个没有或有多个属性的对象处理为一个完全隔离的词法作用域，因此这个对象的属性也会被处理为定义在这个作用域中的词法标识符。也就是说，当我们传递 o2 给 with 时，o2 会被处理为一个作用域，其中并没有 a 标识符，因此进行了正常的 LHS 标识符查找。又因为运行在非严格模式下，所以就在全局作用域中自动创建了一个全局变量。

eval：修改所处的词法作用域。
with：创建全新的词法作用域。

性能

JavaScript 引擎会在编译阶段进行数项的性能优化。其中有些优化依赖于能够根据代码的词法进行静态分析，并预先确定所有变量和函数的定义位置，才能在执行过程中快速找到标识符。

但如果引擎在代码中发现了 eval() 或 with，它只能简单地假设关于标识符位置的判断都是无效的，因为无法在词法分析阶段明确知道 eval() 会接收到什么代码，这些代码会如何对作用域进行修改，也无法知道传递给 with 用来创建新词法作用域的对象的内容到底是什么。

最悲观的情况是出现了 eval() 或 with，所有的优化可能都是无意义的，因此最简单的做法就是完全不做任何优化。如果代码中大量使用 eval() 或 with，那么运行起来一定会变得非常。无论引擎多聪明，试图将这些悲观情况的副作用限制在最小范围内，也无法避免如果没有这些优化，代码会运行得更慢这个事实。

【理解】：你是图书管理员，需要把一大堆书按照它们所属的科目放到相应的书柜中。这个时候，老师告诉你之后还有一堆书要搬过来，但是这些书属于什么科目、书名什么的暂时还不知道。在该情形中，图书管理员和引擎都面对同样的问题。

小结

词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。编译的词法分析阶段基本能够知道全部标识符在哪里以及是如何声明的，从而能够预测在执行过程中如何对它们进行查找。
JavaScript 中有两个机制可以“欺骗”词法作用域：eval() 和 with。前者可以对一段包含一个或多个声明的“代码”字符串进行演算，并借此来修改已经存在的词法作用域（在运行时）。后者本质上是通过将一个对象的引用当作作用域来处理，将对象的属性当作作用域中的标识符来处理，从而创建了一个新的词法作用域（同样是在运行时）。
这两个机制的副作用是引擎无法在编译时对作用域查找进行优化，因为引擎只能谨慎地认为这样的优化是无效的。使用这其中任何一个机制都将导致代码运行变慢。不要使用它们。

JavaScript 词法作用域

词法作用域

词法阶段

查找

欺骗词法

eval

with

性能

小结

猜你喜欢