你不知道的Javascript(上卷)

• 第一部分 作用域和闭包

  • 第一章 作用域是什么

  • 第二章 词法作用域

  • 第三章 函数作用域和块作用域

第一部分 作用域和闭包

第一章 作用域是什么

作用域，变量作用的范围？分为局部作用域，函数作用域，全局作用域。局部作用域内的变量只能被局部范围引用，局部引用全局变量通过向上查找，可以查找到全局作用域的变量并使用

1.1 编译原理

我们通常将JS归作“动态”或者“解释执行”语言，但事实上它是一门编译语言。但与传统编译语言不同的是，它不是提前编译的，传统编译语言源代码在编译之前会经过下面三个步骤，统称为“编译”。

• 分词/词法分析(Tokenizing/Lexing)：这个过程会将由字符组成的字符串分解成有意义的代码块，这些代码块被称为词法单元(token)。比如，考虑程序var a = 2，这段程序会被分解为下面这些词法单元：var、a、=、2、;空格是否会被当作词法单元，取决于空格在这门语言是否具有意义

• 解析/语法分析(Parsing): 这个过程是将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。这个树被称为“抽象语法树”（Abstract Syntax Tree，AST）。比如var a = 2;的抽象语法树可能会有一个叫变量声明(VariableDeclaration)的顶级节点，接下来是一个叫做标识符(Identifier)(它的值是a)的子节点，以及一个叫作赋值表达式(AssignmentExpression)的子节点。赋值表达式节点有个叫作数字文字(NumericLiteral)(它的值是2)的子节点。

• 代码生成：将 AST 转换为可执行代码的过程称被称为代码生成。这个过程与语言、目标平台等息息相关。抛开具体细节，简单来说就是有某种方法可以将 var a = 2; 的 AST 转化为一组机器指令，用来创建一个叫作 a 的变量（包括分配内存等），并将一个值储存在 a 中。

比起那些编译过程只有三个步骤的语言的编译器，JS引擎要复杂的多。比如在词法分析和代码生成阶段有特定的步骤来对运行性能进行优化，包括对冗余元素进行优化等。对于 JavaScript 来说，大部分情况下编译发生在代码执行前的几微秒（甚至更短！）的时间内。在我们所要讨论的作用域背后，JavaScript 引擎用尽了各种办法（比如 JIT，可以延迟编译甚至实施重编译）来保证性能最佳。任何JS代码在执行前都要进行编译。

1.2 理解作用域

我们学习作用域的方式是将这个过程模拟成几个人物之间的对话。那么，由谁进行这场对话呢？

1.2.1 演员表

首先介绍将要参与到对程序 var a = 2; 进行处理的过程中的演员们，这样才能理解接下来将要听到的对话。

• 引擎：从头到尾负责整个 JavaScript 程序的编译及执行过程。
• 编译器：引擎的好朋友之一，负责语法分析及代码生成等脏活累活（详见前一节的内容）
• 作用域：引擎的另一位好朋友，负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。

1.2.2 对话

比如对于var a = 2; 编译器首先会将这段程序分解成词法单元，然后将词法单元解析成一个树结构。可以合理地假设编译器所产生的代码能够用下面的伪代码进行概括：“为一个变量分配内存，将其命名为 a，然后将值 2 保存进这个变量。”然而，这并不完全正确。事实上编译器会进行如下处理。

1. 遇到 var a，编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的集合中。如果是，编译器会忽略该声明，继续进行编译；否则它会要求作用域在当前作用域的集合中声明一个新的变量，并命名为 a。

2. 接下来编译器会为引擎生成运行时所需的代码，这些代码被用来处理 a = 2 这个赋值操作。引擎运行时会首先询问作用域，在当前的作用域集合中是否存在一个叫作 a 的变量。如果是，引擎就会使用这个变量；如果否，引擎会继续查该变量（查看 1.3节）。

如果引擎最终找到了 a 变量，就会将 2 赋值给它。否则引擎就会举手示意并抛出一个异常！

总结：变量的赋值操作会执行两个动作，首先编译器会在当前作用域中声明一个变量（如果之前没有声明过），然后在运行时引擎会在作用域中查找该变量，如果能够找到就会对它赋值。

1.2.3 编译器有话说

编译器在编译过程的第二步中生成了代码，引擎执行它时，会通过查找变量 a 来判断它是否已声明过。查找的过程由作用域进行协助，但是引擎执行怎样的查找，会影响最终的查找结果。在我们的例子中，引擎会为变量 a 进行 LHS (Left Hand Search )查询。另外一个查找的类型叫作 RHS (Right Hand Search)。即左侧与右侧查询。

换句话说，当变量出现在赋值操作的左侧时进行 LHS 查询，出现在右侧时进行 RHS 查询。RHS查询与简单查找某个变量的值别无二致，而LHS查询则是试图找到变量的容器本身，从而可以对其赋值。从这个角度说，RHS 并不是真正意义上的“赋值操作的右侧”，更准确地说是“非左侧”。你可以将 RHS 理解成 retrieve his source value（取到它的源值），这意味着“得到某某的值”。

console.log(a)，其中对a的引用是RHS引用，因为这里并没有对a赋值，只是查找并取得a的值。相比之下，a = 2则是LHS引用。

function foo(a) {
  console.log(a)
}
foo(2)

最后一行foo(...)需要对foo进行RHS引用，代码中隐式a=2很容易被忽略(即参数赋值的操作)。这个操作发生在 2 被当作参数传递给foo(..) 函数时，2 会被分配给参数 a。为了给参数 a（隐式地）分配值，需要进行一次LHS 查询。console.log(...)本身也需要一个引用才能执行，因此会对console对象进行RHS查询，并且检查得到的值是否有log方法。console.log(a)也会对a进行RHS引用

1.2.4 引擎和作用域的对话

如上面那段代码，可能会产生下面对话：

• 引擎：我说作用域，我需要为 foo 进行 RHS 引用。你见过它吗？
• 作用域：别说，我还真见过，编译器那小子刚刚声明了它。它是一个函数，给你。
• 引擎：哥们太够意思了！好吧，我来执行一下 foo。
• 引擎：作用域，还有个事儿。我需要为 a 进行 LHS 引用，这个你见过吗？
• 作用域：这个也见过，编译器最近把它声名为 foo 的一个形式参数了，拿去吧。
• 引擎：大恩不言谢，你总是这么棒。现在我要把 2 赋值给 a。
• 引擎：哥们，不好意思又来打扰你。我要为 console 进行 RHS 引用，你见过它吗？
• 作用域：咱俩谁跟谁啊，再说我就是干这个。这个我也有，console 是个内置对象。
• 给你。
• 引擎：么么哒。我得看看这里面是不是有 log(..)。太好了，找到了，是一个函数。
• 引擎：哥们，能帮我再找一下对 a 的 RHS 引用吗？虽然我记得它，但想再确认一次。
• 作用域：放心吧，这个变量没有变动过，拿走，不谢。
• 引擎：真棒。我来把 a 的值，也就是 2，传递进 log(..)。

1.2.5 小测验

function foo(a) {
 var b = a;
 return a + b;
}
var c = foo( 2 );

LHS查询3处(c,a,b)，RHS查询4处(foo,a,a,b)

1.3 作用域嵌套

当前作用域 ---> 外层作用域(词法作用域) ---> ... ---> 全局作用域，LHS查询与RHS查询都会遵循这个查询方向

1.4 异常

RHS查询找不到变量，引擎就会抛出引用(ReferenceError)异常。LHS查询，如果在全局作用域也无法找到目标变量，全局作用域就会创建一个具有该名称的变量，并将其返回给引擎，只在非严格模式下有效，在严格模式下，引擎也会抛出ReferenceError异常。

如果RHS查询到了一个变量，但是当你尝试对这个变量的值进行不合理的操作，比如试图对一个非函数类型的值进行函数调用，或者引用null或者undefined类型的值中的属性，那么引擎会抛出另外一种类型的异常，叫做TypeError。

ReferenceError同作用域判别失败有关，而TypeError则代表作用域判别成功了，但是对结果的操作是非法或者不合理的。

1.5 小结

LHS查询与RHS查询，会从当前作用域向上查找，不成功则会有ReferenceError或TypeError

第二章 词法作用域

词法作用域，即变量的引用查找会从它在被定义的地方开始查找(通常是一个函数内部需要查找一个外部变量，会从定义的地方开始查找)，如下例所示，foo函数输出为1。如果按照语法作用域，输出为2

let value = 1
function foo() {
  console.log(value)
}
function bar() {
  let value = 2
  foo()
}

作用域共有两种主要的工作模型。第一种是最为普遍的，被大多数编程语言所采用的词法作用域(静态作用域)，我们会对这种作用域进行深入讨论。另外一种叫作语法作用域(动态作用域)，仍有一些编程语言在使用（比如 Bash 脚本、Perl 中的一些模式等）。

2.1 词法阶段

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

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

上述代码有三个逐级嵌套的作用域，最里面的是bar函数作用域：包含c标识符。接着是foo函数作用域：包含a,bar,b三个标识符。全局作用域只有：foo一个标识符。

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

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

2.2 欺骗词法

eval, with, 不推荐使用

2.3 小结

词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。编译的词法分析阶段基本能够知道全部标识符在哪里以及是如何声明的，从而能够预测在执行过程中如何对它们进行查找。

第三章 函数作用域和块作用域

3.1 函数中的作用域

function foo(a) {
 var b = 2;
 // 一些代码
 function bar() {
   console.log('bar...')
 }
 // 更多的代码
 var c = 3;
}

除了foo ，其他的标识符都无法在全局作用域直接调用。

函数作用域的含义是指，属于这个函数的全部变量都可以在整个函数的范围内使用及复用。

3.2 隐藏内部实现

以把变量和函数包裹在一个函数的作用域中，然后用这个作用域来“隐藏”它们。为什么“隐藏”变量和函数是一个有用的技术？

有很多原因促成了这种基于作用域的隐藏方法。它们大都是从最小特权原则中引申出来的，也叫最小授权或最小暴露原则。这个原则是指在软件设计中，应该最小限度地暴露必要内容，而将其他内容都“隐藏”起来，比如某个模块或对象的 API 设计。

这个原则可以延伸到如何选择作用域来包含变量和函数。如果所有变量和函数都在全局作用域中，当然可以在所有的内部嵌套作用域中访问到它们。但这样会破坏前面提到的最小特权原则，因为可能会暴漏过多的变量或函数，而这些变量或函数本应该是私有的，正确的代码应该是可以阻止对这些变量或函数进行访问的。

function doSomething(a) {
 b = a + doSomethingElse( a * 2 );
 console.log( b * 3 );
}
function doSomethingElse(a) {
 return a - 1;
}
var b;
doSomething( 2 ); // 15

如上代码，如果doSomethingElse函数只在doSomething中使用，那么doSomethingElse作为doSomething函数的私有函数更为合理。

“隐藏”作用域的变量和函数带来的另一个好处是避免同名标识符的冲突

1. 全局命名空间: 当程序中加载了多个第三方库时，如果它们没有妥善地将内部私有的函数或变量隐藏起来，就会很容易引发冲突。这些库通常会在全局作用域中声明一个名字足够独特的变量，通常是一个对象。这个对象被用作库的命名空间，所有需要暴露给外界的功能都会成为这个对象（命名空间）的属性，而不是将自己的标识符暴漏在顶级的词法作用域中。比如：

var MyReallyCoolLibrary = {
 awesome: "stuff",
 doSomething: function() {
 // ...
 },
 doAnotherThing: function() {
 // ...
 }
};

2. 模块管理： 另外一种避免冲突的办法和现代的模块机制很接近，就是从众多模块管理器中挑选一个来使用。使用这些工具，任何库都无需将标识符加入到全局作用域中，而是通过依赖管理器的机制将库的标识符显式地导入到另外一个特定的作用域中。显而易见，这些工具并没有能够违反词法作用域规则的“神奇”功能。它们只是利用作用域的规则强制所有标识符都不能注入到共享作用域中，而是保持在私有、无冲突的作用域中，这样可以有效规避掉所有的意外冲突。

3.3 函数作用域

我们已经知道，在任意代码片段外部添加包装函数，可以将内部的变量和函数定义“隐藏”起来，外部作用域无法访问包装函数内部的任何内容。

var a = 2;
function foo() { // <-- 添加这一行
 var a = 3;
 console.log( a ); // 3
} // <-- 以及这一行
foo(); // <-- 以及这一行
console.log( a ); // 2

虽然这种技术可以解决一些问题，但是它并不理想，因为会导致一些额外的问题。首先，必须声明一个具名函数 foo()，意味着 foo 这个名称本身“污染”了所在作用域（如全局作用域）。其次，必须显式地通过函数名（foo()）调用这个函数才能运行其中的代码。

JS提供了一种方式，可以很好的解决上述问题，匿名函数

(function foo(){ // <-- 添加这一行
 var a = 3;
 console.log( a ); // 3
})(); // <-- 以及这一行
console.log( a ); // 2

包装函数的声明以(function...而不仅是以function...开始。函数会被当成函数表达式而不是函数声明来处理

区别函数声明和表达式最简单的方法是看function关键字出现在声明中的位置(不仅仅是一行代码，而是整个声明的位置)。如果 function 是声明中的第一个词，那么就是一个函数声明，否则就是一个函数表达式。

函数声明和函数表达式之间最重要的区别是它们的名称标识符将会绑定在何处。

比较一下前面两个代码片段。第一个片段中 foo 被绑定在所在作用域中，可以直接通过foo() 来调用它。第二个片段中 foo 被绑定在函数表达式自身的函数中而不是所在作用域中。

换句话说，(function foo(){ .. }) 作为函数表达式意味着 foo 只能在 .. 所代表的位置中被访问，外部作用域则不行。foo 变量名被隐藏在自身中意味着不会非必要地污染外部作用域。

3.3.1 匿名和具名

对于函数表达式最熟悉的场景可能就是回调参数了，比如：

setTimeout(function() {
  console.log("I waited 1 second!")
}, 1000)

这叫作匿名函数表达式，因为 function().. 没有名称标识符。函数表达式可以是匿名的，而函数声明则不可以省略函数名——在 JavaScript 的语法中这是非法的。匿名函数表达式书写起来简单快捷，很多库和工具也倾向鼓励使用这种风格的代码。但是它也有几个缺点需要考虑。

• 匿名函数在栈追踪中不会显示出有意义的函数名，使得调试很困难。
• 如果没有函数名，当函数需要引用自身时只能使用已经过期的 arguments.callee 引用，比如在递归中。另一个函数需要引用自身的例子，是在事件触发后事件监听器需要解绑自身。
• 匿名函数省略了对于代码可读性 / 可理解性很重要的函数名。一个描述性的名称可以让代码不言自明。

行内函数表达式非常强大且有用——匿名和具名之间的区别并不会对这点有任何影响。给函数表达式指定一个函数名可以有效解决以上问题。始终给函数表达式命名是一个最佳实践：

setTimeout( function timeoutHandler() { // <-- 快看，我有名字了！
 console.log( "I waited 1 second!" );
}, 1000 );

3.3.2 立即执行函数表达式

IIFE，代表立即执行函数表达式（Immediately Invoked Function Expression），比如：

(function foo() {
 var a = 3;
 console.log( a ); // 3
})()
(function() {
  var a = 3;
  console.log(a); // 3
})();

// 第二种IIFE
(function foo() {
  var a = 3;
  console.log(a); // 3
}());

(function() {
  var a = 3;
  console.log(a); // 3
}())

// 传参,也可以把函数传进去
(function(b) {
  var a = 3;
  console.log(a); // 3
  console.log(b)  // 4
}(4))

3.4 块作用域

for (var i=0; i<10; i++) {
 console.log( i );
}

我们在for循环的头部直接使用了变量i，但是i会直接被绑定在外部作用域(全局作用域)中，事实上，我们只想在for循环内使用i变量

3.4.1 with

3.4.2 try/catch

try {
 undefined(); // 执行一个非法操作来强制制造一个异常
}
catch (err) {
 console.log( err ); // 能够正常执行！
}
console.log( err ); // ReferenceError: err not found

err变量仅存在于catch分句内部，当试图从别处引用它时会抛出错误

3.4.3 let

var foo = true;
if (foo) {
 let bar = foo * 2;
 bar = something( bar );
 console.log( bar );
}
console.log( bar ); // ReferenceError

let 关键字可以将变量绑定到所在的任意作用域中（通常是 { .. } 内部）。换句话说，let为其声明的变量隐式地了所在的块作用域。let 进行的声明不会在块作用域中进行提升。

另一个块作用域非常有用的原因和闭包及回收内存垃圾的回收机制相关。在全局作用域的变量不易销毁，块作用域内的部分执行之后会销毁。let可以发挥优势的另一个地方就是之前讨论的for循环

for (let i=0; i<10; i++) {
 console.log( i );
}
console.log( i ); // ReferenceError

let不仅将i绑定到了for循环的块中，事实上它将其重新绑定到了循环的每一个迭代中，确保上一次循环迭代结束时的值重新进行赋值

3.4.4 const

除了 let 以外，ES6 还引入了 const，同样可以用来创建块作用域变量，但其值是固定的（常量）。之后任何试图修改值的操作都会引起错误。

3.5 小结

函数是 JavaScript 中最常见的作用域单元。但函数不是唯一的作用域单元。块作用域指的是变量和函数不仅可以属于所处的作用域，也可以属于某个代码块（通常指 { .. } 内部）。 ES3 开始，try/catch 结构在 catch 分句中具有块作用域。 ES6 中引入了 let 关键字（var 关键字的表亲），用来在任意代码块中声明变量。if(..) { let a = 2; } 会声明一个劫持了 if 的 { .. } 块的变量，并且将变量添加到这个块中。

第四章 提升

a = 2;
var a;
console.log( a ); // 2

console.log( a ); // undefined
var a = 2;

上述代码因为变量声明提升的缘故，所以可以可以在声明之前访问到变量的值
引擎会在解释 JavaScript 代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明，并用合适的作用域将它们关联起来。第 2 章中展示了这个机制，也正是词法作用域的核心内容。因此，正确的思考思路是，包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。

当你看到 var a = 2; 时，可能会认为这是一个声明。但 JavaScript 实际上会将其看成两个声明：var a; 和 a = 2;。第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地等待执行阶段。

变量和函数声明从它们在代码中出现的位置被“移动”到了最上面。这个过程就叫作提升。换句话说，先有蛋（声明）后有鸡（赋值）。

函数声明也会被提升，但函数表达式不会

foo(); // 不是 ReferenceError, 而是 TypeError! 因为foo是undefined，foo() 由于对 undefined 值进行函数调用而导致非法操作，因此抛出 TypeError 异常。
bar(); // ReferenceError
var foo = function bar() {
 // ...
};

函数声明和变量声明都会被提升。但是一个值得注意的细节（这个细节可以出现在有多个“重复”声明的代码中）是函数会首先被提升，然后才是变量。

foo(); // 1
var foo;
function foo() {
 console.log( 1 );
}
foo = function() {
 console.log( 2 );
};

// 被引擎理解为
function foo() {
 console.log( 1 );
}
foo(); // 1
foo = function() {
 console.log( 2 );
};

// 重复的 var 声明会被忽略掉，但出现在后面的函数声明还是可以覆盖前面的。
foo(); // 3
function foo() {
 console.log( 1 );
}
var foo = function() {
 console.log( 2 );
};
function foo() {
 console.log( 3 );
}

第五章 作用域和闭包

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

function foo() {
 var a = 2;
 function bar() {
 console.log( a ); // 2
 }
 bar();
}
foo();

这是闭包吗？技术上来讲，也许是。但根据前面的定义，确切地说并不是。