第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个作用域
    1. 全局作用域 ，定义了foo函数；
    2. foo函数作用域，定义了形参a、函数bar和变量b；
    3. bar函数作用域，只定义了形参c；
  • 由此可见，变量的作用域，就相当于所在函数的花括号包含的范围（除了全局作用域），并且作用域之间是逐级嵌套的。
  • 变量的查找是由内往外的。 JS引擎执行代码console.log(a, b, c);时：
    1. 首先是从bar函数作用域中查找a，b，c三个变量，只找到变量c；
    2. 接着到上一级的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引擎无法在编译阶段对作用域查找进行优化，所以警惕滥用此类函数，从而造成性能问题。