词法作用域

作用域工作模型：

词法作用域（大多数编程语言采用）
动态作用域

词法阶段

大部分标准语言编译器的第一个工作阶段就是词法化。

词法化的过程：会对源代码中的代码进行检查，如果是有状态的解析过程，还会赋予单词语义。

词法作用域：就是定义在词法阶段的作用域。在写代码时，将变量和块作用域写在哪里决定的。

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

上面demo有3个逐级嵌套的作用域。便于理解，可以看成是逐级嵌套的气泡。

① 包含整个全局作用域，其中只有一个标识符：foo
② 包含 foo 创建的作用域，其中有三个标识符：a b bar
③ 包含 bar 创建的作用域，其中只有一个标识符：c

作用域气泡由其对应的作用域块代码写在哪里决定，是逐级包含的关系。

查找

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

在上一个代码片段中，引擎执行 console.log(..) 声明，并查找 a、 b 和 c 三个变量的引
用。可参考下图。

作用域查找，会在找到第一个匹配的标识符时终止。

遮蔽效应：在多层嵌套的作用域中定义多个同名的标识符。（内部标识符会“遮蔽”外部标识符）

抛开遮蔽效应，作用域查找，始终从运行时所处的最内部作用域开始查找，逐级向上进行，直到找到第一个匹配的标识符。

被同名变量遮蔽的全局变量可以通过 window.a 来访问。

词法作用域只会查找一级标识符。如果引用 foo.bar.baz，只会查找 foo, 找到这个变量，对象属性访问规则会接管对 bar baz 属性的访问。

欺骗词法

词法作用域完全由写代码时函数定义的位置来定义，如何在运行时修改（欺骗）？

有两种机制：

eval

还是先来看个栗子吧！

function foo(str, a) {
    eval(str); // 欺骗引擎 var b = 3; 原本就在这里
    console.log(a, b);
}

var b = 2;
foo('var b = 3', 1); // 1 3

可以看到，通过 eval(str)，将原本不在 foo 中的的 var b = 3; 欺骗成书写时就代码就在那了，以此修改了词法作用域。

在严格模式中，eval()在运行时有自己的词法作用域，其中的声明无法修改所在的作用域。

// eval 严格模式
function foo(str) {
    'use strict';
    eval(str);
    console.log(a);
}
foo('var a = 3'); // Uncaught ReferenceError: a is not defined

with

先来一个 demo

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

var obj1 = { // obj1 有 a 属性
	a: 1
}

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

var obj2 = { // obj2 没有 a 属性
	b: 1
}

foo(obj2);
console.log(obj2.a); // undefined
console.log(a); // 2，a 被挂在到全局作用域