【阅文笔记】词法作用域【你不知道的JavaScript（上）】

词法作用域

作用域共有两种工作模型。 第一种是大多数编程语言所采用的词法作用域。 另外一种叫作动态作用域（少有编程语言用）

词法作用域就是定义在词法阶段的作用域。换句话说， 词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的， 因此当词法分析器处理代码时会保持作用域不变

考虑以下代码：

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

此例子有三个逐级嵌套的作用域


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

一、查找

作用域查找会在找到第一个匹配的标识符时停止。在多层的嵌套作用域中可以定义同名的标识符， 这叫作“遮蔽效应”（内部的标识符“遮蔽” 了外部的标识符）。 抛开遮蔽效应，作用域查找始终从运行时所处的最内部作用域开始， 逐级向外或者说向上进行， 直到遇见第一个匹配的标识符为止

【无论函数在哪里被调用， 也无论它如何被调用， 它的词法作用域都只由函数被声明时所处的位置决定】

词法作用域查找只会查找一级标识符

二、欺骗词法

如果词法作用域完全由写代码期间函数所声明的位置来定义， 怎样才能在运行时来“修改” 词法作用域呢？

JavaScript 中有两种机制来实现这个目的，但欺骗词法作用域会导致性能下降（都不推荐使用）

机制一：eval

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(…) 的词法作用域进行了修改。 事实上， 和前面提到的原理一样， 这段代码实际上在 foo(…) 内部创建了一个变量 b， 并遮蔽了外部（全局） 作用域中的同名变量

当 console.log(…) 被执行时， 会在 foo(…) 的内部同时找到 a 和 b， 但是永远也无法找到外部的 b。 因此会输出“1, 3” 而不是正常情况下会输出的“1, 2”

默认情况下， 如果 eval(…) 中所执行的代码包含有一个或多个声明（无论是变量还是函数）， 就会对 eval(…) 所处的词法作用域进行修改

无论何种情况， eval(…) 都可以在运行期修改书写期的词法作用域

机制二：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;
}

总结：