第2章：词法作用域
- 第一章提到，所谓作用域就是JavaScript变量的存取规则。
- 而众多编程语言的作用域规则中，一般有两套工作模式：
词法作用域和动态作用域。
-
JavaScript作用域采用的是
词法作用域，以下主要讲解这种工作模式。
2.1 词法阶段
- 本书第一章说，在编译时期会进行词法分析，即将文本内容分解成有意义的词法字符串。比如
var a = 2;最终会分解成[var、a、=、2、;]
- 所谓
词法作用域，就是在词法分析阶段就确定了变量处于哪个作用域，从而确定了变量可访问的范围。
function foo(a){
var b = a * 2;
function bar(c){
console.log(a, b, c);
}
}
foo(2); //2, 4, 12
- 分析如上代码：
- 总共有3个作用域
-
全局作用域 ，定义了
foo函数；
-
foo函数作用域，定义了形参a、函数bar和变量b；
-
bar函数作用域，只定义了形参c；
- 由此可见，变量的作用域，就相当于所在函数的花括号包含的范围（除了全局作用域），并且作用域之间是逐级嵌套的。
-
变量的查找是由内往外的。 JS引擎执行代码
console.log(a, b, c);时：
- 首先是从
bar函数作用域中查找a，b，c三个变量，只找到变量c；
- 接着到上一级的
foo函数作用域，查到了变量a和b；
- 在多个作用域层嵌套的情况下，当子级作用域包含有父级作用域同名的变量时，则忽略父级变量，直接使用子级的变量，这称为“
遮蔽效应”。
2.2 欺骗词法
- 既然变量的作用域就是函数的范围，且在词法分析阶段已经确定了，能否为某个变量动态植入到指定作用域里呢，达到类似
欺骗式的词法作用域的效果？当然是可以的！
-
JavaScript有两种机制实现所谓的
欺骗词法：eval和with。 虽然滥用欺骗词法有可能会带来性能问题，不推荐使用。但不妨碍我们通过它，从而进一步的深入了解JavaScript作用域。
eval()函数
-
eval()函数接收一个代码字符串作为参数，通知JS引擎来执行它。 字符串代码中的作用域，动态的以eval()函数执行所在的作用域为准。
function foo(str, a){
eval(str);
console.log(a, b);
}
var b = 2;
foo("var b = 3;", 1); //输出 1, 3
- 由于
eval()在foo函数作用域中执行，所以str代码字符串中的变量b动态植入到foo函数作用域，从而执行console.log()输出时，屏蔽了全局作用域中同名的变量b
- 由此可见，
eval()函数可以在运行期修改词法分析阶段确定的作用域。值得一提的是，除了eval()函数之外，JavaScript很多原生的函数也具有欺骗词法的作用，比如setTmeout()、setInterval()等。
with()函数
-
with()函数 可以交换词法作用域，通常可以当作重复引用同一个对象中的多个属性的快捷方式。
var obj = {
a : 1,
b : 2,
c : 3
};
//正常的调用需要重复的引用Obj对象
obj.a = 10;
obj.b = 20;
obj.c = 30;
//单通过with可以构造一个，obj对象引用的快捷方式
with(obj){
//with代码内this默认指向obj对象
a = 10;
b = 20;
c = 30;
}
- 前面我们一直说，欺骗词法会引发性能问题，我们针对
with()函数举个例子，看看如何造成全局变量污染的：
//定义一个foo方法
function foo(obj){
//方法体中，通过with快捷方式对传入的对象进行赋值操作
with(obj){
a = 2;
}
};
//定义对象obj1，包含a属性
var obj1 = {
a : 3
};
//定义对象obj2，不包含a属性
var obj2 = {
b : 3
};
//调用foo函数，并传入obj1对象作为参数
foo(obj1);
console.log(obj1.a); //输出 2，foo()方法将a属性成功改为2
//调用foo函数，并传入obj2对象作为参数
foo(obj2);
console.log(obj2.a); //输出 undefined，由于obj2对象没有a属性，所以赋值失败
console.log(a); //输出2，属性a的赋值，暴露到了全局作用域上了
- 如以上代码所示，
with()函数有可能将赋值的属性转移给全局作用域，这也正是with与eval的区别：
-
eval()可以动态修改词法作用域；
-
with()是根据传递的对象，凭空创建一个全新的词法作用域；所以当obj2作为参数进行with赋值操作的时候，由于a属性不存在，所以执行正常的LHS查询。
性能
-
eval和with会导致全局作用域的变量污染，这只是造成性能问题的一个方面。
- 除此之外，JavaScript引擎在编译阶段，会对代码进行性能优化，此类工作依赖于代码是静态的词法作用域。因为这是确定了作用域位置的变量，而如果是
eval和with的方式，引擎则直接忽略，完全不做任何优化。
- 并且如果项目中大量使用
eval和with进行动态作用域指定，最后参与编码的开发者也会懵逼。我们应该秉承JS引擎的规则，将变量限制在最小范围内。
2.3 小结
- JavaScript有两种机制欺骗词法：
eval和with：eval可以动态调用JS引擎执行传入的代码字符串，由此来修改词法作用域；with可以将一个对象的引用，创建一个新的作用域来处理。
- 由于这两种机制，JS引擎无法在编译阶段对作用域查找进行优化，所以警惕滥用此类函数，从而造成性能问题。
