你不知道的 JavaScript 1.作用域和闭包

作用域是什么

作用域：一套存储和访问变量的规则。

作用域是一套规则，用于确定在何处以及如何查找变量（标识符）。如果查找的目的是对变量进行赋值，那么就会使用 LHS 查询；如果目的是获取变量的值，就会使用 RHS 查询。赋值操作符会导致 LHS 查询。=操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。

这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。

编译原理

传统语言的编译过程：

graph TD
A[分词/词法分析] -->B(解析/语法分析)
B --> C[代码生成]

1. 分词/词法分析：将由字符组成的字符串分解成（对编程语言来说）有意义的代码块，这些代码块被称为词法单元(token)。
2. 解析/语法分析：将词法单元流(数组)转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。这个树被称为“抽象语法树”(Abstract Syntax Tree，AST)。
3. 代码生成：将 AST 转换为可执行代码。

JavaScript 引擎的特点：

1. JavaScript 不是提前编译的，编译结果也不能在分布式系统中进行移植。
2. 在语法分析和代码生成阶段有特定的步骤来对运行性能进行优化，包括对冗余元素进行优化等。
3. JavaScript 引擎不会有大量的（像其他语言编译器那么多的）时间用来进行优化，因为与其他语言不同，JavaScript 的编译过程不是发生在构建之前的。
4. 对于 JavaScript 来说，大部分情况下编译发生在代码执行前的几微秒（甚至更短!）的时间内。

简单地说，任何 JavaScript 代码片段在执行前都要进行编译（通常就在执行前）。

理解作用域

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

var a = 2;

编译器首先会将这段程序分解成词法单元，然后将词法单元解析成一个树结构。接下来，编译器执行代码生成流程：

1. var a 声明变量：「编译器」会询问「作用域」是否已经有一个该名称的变量存在于同一个作用域的集合中。如果是，编译器会忽略该声明，继续进行编译；否则它会要求作用域在当前作用域的集合中声明一个新的变量，并命名为 a。
2. a = 2 赋值：「编译器」会为「引擎」生成运行时所需的代码。「引擎」运行时会首先询问「作用域」，在当前的作用域集合中是否存在一个叫作 a 的变量。如果是，引擎就会使用这个变量；如果否，引擎会继续查找该变量。

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

LHS 和 RHS 查询

当变量出现在赋值操作的左侧时进行 LHS 查询，出现在右侧时进行 RHS 查询。

RHS 查询：查询某个变量的值；
LHS 查询：找到变量的容器本身，从而可以对其赋值。

// 对 a 的引用是一个 RHS 引用，
// 因为这里 a 并没有赋予任何值。相应地，需要查找并取得 a 的值，这样才能将值传递给 console.log(..)。
console.log(a);

// 对 a 的引用则是 LHS 引用，
// 因为实际上我们并不关心当前的值是什么，只是想要为 = 2 这个赋值操作找到一个目标。
a = 2;

作用域嵌套

作用域：根据名称查找变量的一套规则。

当一个块或函数嵌套在另一个块或函数中时，就发生了作用域的嵌套。因此，在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域(也就是全局作用域)为止。

把作用域链比喻成一个建筑

把作用域链比喻成一个建筑

这个建筑代表程序中的嵌套作用域链。第一层楼代表当前的执行作用域，也就是你所处的位置。建筑的顶层代表全局作用域。

LHS 和 RHS 引用都会在当前楼层进行查找，如果没有找到，就会坐电梯前往上一层楼，如果还是没有找到就继续向上，以此类推。一旦抵达顶层(全局作用域)，可能找到了你所需的变量，也可能没找到，但无论如何查找过程都将停止。

异常

在变量还没有声明（在任何作用域中都无法找到该变量）的情况下，LHS 和 RHS 查询的行为是不一样的：

• 如果 RHS 查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出 ReferenceError 异常。
• 当引擎执行 LHS 查询时，如果在顶层（全局作用域）中也无法找到目标变量，全局作用域中就会创建一个具有该名称的变量，并将其返还给引擎，前提是程序运行在非“严格模式”下。

严格模式：

• 严格模式禁止自动或隐式地创建全局变量。因此，在严格模式中 LHS 查询失败时，并不会创建并返回一个全局变量，引擎会抛出同 RHS 查询 失败时类似的 ReferenceError 异常。
• 如果 RHS 查询找到了一个变量，但是你尝试对这个变量的值进行不合理的操作，那么引擎会抛出另外一种类型的异常，叫作 TypeError。
• ReferenceError 同作用域判别失败相关，而 TypeError 则代表作用域判别成功了，但是对结果的操作是非法或不合理的。

词法作用域

作用域的两种工作模型：

1. 词法作用域；
2. 动态作用域。

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

词法作用域

1. 包含着整个全局作用域，其中只有一个标识符：foo。
2. 包含着 foo 所创建的作用域，其中有三个标识符：a、bar 和 b。
3. 包含着 bar 所创建的作用域，其中只有一个标识符：c。

查找

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

欺骗词法

欺骗词法作用域会导致性能下降。

eval() 不推荐使用

JavaScript 中的 eval(...) 函数可以接受一个字符串为参数，并将其中的内容视为好像在书写时就存在于程序中这个位置的代码。换句话说，可以在你写的代码中用程序生成代码并运行，就好像代码是写在那个位置的一样。

JavaScript 中的 eval(...) 函数可以对一段包含一个或多个声明的“代码”字符串进行演算，并借此来修改已经存在的词法作用域(在运行时)。

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

function foo(str, a) {
    // 这段代码实际上在 foo(..) 内部创建了一个变量 b，并遮蔽了外部(全局)作用域中的同名变量。
    eval( str ); // 欺骗!
    console.log( a, b );
}

var b = 2;

foo( "var b = 3;", 1 ); // 1 3

在程序中动态生成代码的使用场景非常罕见，因为它所带来的好处无法抵消性能上的损失。

with 不推荐使用

with 通常被当作重复引用同一个对象中的多个属性的快捷方式，可以不需要重复引用对象本身。

with 可以将一个没有或有多个属性的对象处理为一个完全隔离的词法作用域，因此这个对象的属性也会被处理为定义在这个作用域中的词法标识符。

with 本质上是通过将一个对象的引用当作作用域来处理，将对象的属性当作作用域中的标识符来处理，从而创建了一个新的词法作用域（同样是在运行时）。

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

var o1 = {
    a: 3
};

var o2 = {
    b: 3
};

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

foo( o2 );
console.log( o2.a ); // undefined
// o2 的作用域、foo(..) 的作用域和全局作用域中都没有找到标识符 a，因此当 a=2 执行 时，自动创建了一个全局变量(因为是非严格模式)。
console.log( a ); // 2 -- Oops, leaked global!

函数作用域和块作用域

函数中的作用域

函数作用域：属于这个函数的全部变量都可以在整个函数的范围内使用及复用（事实上在嵌套的作用域中也可以使用）。

隐藏内部实现

可以把变量和函数包裹在一个函数的作用域中，然后用这个作用域来“隐藏”它们。

最小特权原则/最小授权或最小暴露原则：在软件设计中，应该最小限度地暴露必要内容，而将其他内容都“隐藏”起来，比如某个模块或对象的 API 设计。

规避冲突

“隐藏”作用域中的变量和函数所带来的另一个好处，是可以避免同名标识符之间的冲突，两个标识符可能具有相同的名字但用途却不一样，无意间可能造成命名冲突。冲突会导致变量的值被意外覆盖。

1. 全局命名空间；
2. 模块机制；

函数作用域

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

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

匿名和具名

匿名函数表达式：

// function().. 没有名称标识符
setTimeout( function(){
    console.log("I waited 1 second!");
}, 1000 );

函数表达式可以匿名，而函数声明则不可以省略函数名。
匿名函数的缺点：

1. 调试困难，匿名函数在栈追踪中不会显示出有意义的函数名。
2. 无法引用自身，如果没有函数名，当函数需要引用自身时只能使用已经过期的 arguments.callee 引用。
3. 匿名函数没有函数名，降低了代码的可读性/可理解性。一个描述性的名称可以让代码不言自明。

行内函数表达式：

setTimeout( function timeoutHandler(){ // <-- Look, I have a name!
    console.log( "I waited 1 second!" );
}, 1000 );

始终给函数表达式命名是一个最佳实践。

立即执行函数表达式（IIFE）

var a = 2;

// (function foo(){ .. })()
// 第一个 ( ) 将函数变成表达式，
// 第二个 ( ) 执行了这个函数。
(function foo () {
  var a = 3;
  console.log(a); // 3

})();

console.log(a); // 2

相较于传统的 IIFE 形式，很多人都更喜欢另一个改进的形式：(function(){ .. }())。两者功能一致。

IIFE 的另一个非常普遍的进阶用法是把它们当作函数调用并传递参数进去。

var a = 2;

// 将 window 对象的引用传递进去，但将参数命名为 global
(function IIFE (global) {

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

})(window);

console.log(a); // 2

块作用域

块作用域指的是变量和函数不仅可以属于所处的作用域，也可以属于某个代码块(通常指 { .. } 内部)。

块作用域的用处：变量的声明应该距离使用的地方越近越好，并最大限度地本地化。

with

用 with 从对象中创建出的作用域仅在 with 声明中而非外部作用域中有效。

try/catch

JavaScript 的 ES3 规范中规定 try/catch 的 catch 分句会创建一个块作用域，其中声明的变量仅在 catch 内部有效。

let

let 关键字可以将变量绑定到所在的任意作用域中。

var foo = true;

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

console.log(bar); // ReferenceError 引用错误

const

ES6 引入了 const，用来创建块作用域变量，但其值是固定的 (常量)。之后任何试图修改值的操作都会引起错误。

提升

• 变量/函数声明提升：所有的声明（变量和函数）都会被“移动”到各自作用域的最顶端。只有声明本身会被提升，而赋值或其他运行逻辑会留在原地。
• 函数会首先被提升，然后才是变量。
• 函数声明会被提升，但是函数表达式却不会被提升。
• 使用 let 进行的声明不会在块作用域中进行提升。

作用域闭包

JavaScript 中闭包无处不在，你只需要能够识别并拥抱它。

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

function foo () {
  var a = 2;

  // 函数 bar() 的词法作用域能够访问 foo() 的内部作用域。
  function bar () {
    console.log(a);
  }
    
  // 将 bar 所引用的函数对象本身当作返回值（把一个内部函数当作值返回）
  return bar;
}

// 闭包：bar() 依然持有对它的作用域的引用。
// foo() 函数执行之后，foo() 的整个内部作用域并没有被销毁
// 因为 bar() 函数仍然引用着 foo() 的内部作用域
var baz = foo();

// bar() 在自己定义的词法作用域以外的地方执行了
baz(); // 2 -- 朋友，这就是闭包的效果。

循环和闭包

使用 var 关键字：

// 尽管循环中的五个函数是在各个迭代中分别定义的，但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个 i。
for (var i = 1; i <= 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, i * 1000);
}

/*
6
6
6
6
6
*/

使用 let 关键字：

// 每个迭代都会使用上一个迭代结束时的值来初始化这个变量。
for (let index = 0; index <= 5; index++) {
  setTimeout(() => {
    console.log(index)
  }, index);
}

/*
0
1
2
3
4
5
*/

模块

模块有两个主要特征:

1. 为创建内部作用域而调用了一个包装函数;
2. 包装函数的返回值必须至少包括一个对内部函数的引用，这样就会创建涵盖整个包装函数内部作用域的闭包。

模块也是普通的函数，因此可以接受参数。

模块模式另一个简单但强大的变化用法是，命名将要作为公共 API 返回的对象:

ES6 中为模块增加了一级语法支持。但通过模块系统进行加载时，ES6 会将文件当作独立的模块来处理。每个模块都可以导入其他模块或特定的 API 成员，同样也可以导出自己的 API 成员。

import 可以将一个模块中的一个或多个 API 导入到当前作用域中，并分别绑定在一个变量上。
module 会将整个模块的 API 导入并绑定到一个变量上。
export 会将当前模块的一个标识符（变量、函数）导出为公共 API。
这些操作可以在模块定义中根据需要使用任意多次。

bar.js

function hello(who) {
    return "Let me introduce: " + who;
}

export hello;

foo.js

// 仅从 "bar" 模块导入 hello()
import hello from "bar";

var hungry = "hippo";

function awesome() {
    console.log(
        hello( hungry ).toUpperCase()
    );
}

export awesome;

baz.js

// 导入完整的 "foo" 和 "bar" 模块
module foo from "foo";
module bar from "bar";

console.log(
    bar.hello( "rhino" )
); // Let me introduce: rhino

foo.awesome(); // LET ME INTRODUCE: HIPPO