你不知道的JS（上）：作用域与闭包

本文是《你不知道的JavaScript（上卷）》的阅读笔记，第一部分：作用域与闭包。供自己以后查漏补缺，也欢迎同道朋友交流学习。

作用域是什么

JS 编译原理

JS 的编译流程和传统编译非常相似，程序中的一段源代码在执行之前会经历三个步骤：分词/词法分析（Tokeninzing/Lexing）、解析/语法分析（parsing）、代码生成。对于 JS 来说，大部分编译发生在代码执行前的几微秒。

分词/词法分析（Tokeninzing/Lexing）

这个过程会将由字符组成的字符串分解为有意义的代码块，这些代码块被称为词法单元（token）。

解析/语法分析（parsing）

这个过程是将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。这个树被称为"抽象语法树"（AST：Abstract Syntax Tree）。

代码生成

将 AST 转换为可执行代码的过程称被称为代码生成。简单的说就是有某种方法可以将 var a = 2; 的 AST 转化为一组机器指令，用来创建一个叫作 a 的变量（包括分配内存等），并将一个值储存在 a 中。

理解作用域

想要完全理解作用域，需要先理解引擎。

模块

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

声明

例如 var a = 2; 这段看起来是一个声明，在 JS 里其实是两个完全不同的声明，一个由编译器在编译时处理，另一个则由引擎在运行时处理。下面我们看看引擎是如何和编译器、作用域协同工作的。

编译器首先会将这段程序分解成词法单元，然后将词法单元解析为一个树结构。但是当编译器开始执行代码生成的时候，对这段代码的处理方式和预期有所不一样。

我们的预期是："为一个变量分配内存，将其命名为 a，然后将值 2 保存进这个变量。"

但事实上编译器会进行如下处理：

遇到 var a，编译器会先询问作用域是否已经有这个变量存在，没有则会在作用域集合声明一个新的变量 a；如果已经有了，则忽略该声明继续编译。
接下来为引擎生成运行时所需的代码，这些代码被用来处理 a = 2 这个赋值操作。引擎运行时会首先询问作用域，在当前的作用域集合里是否有变量 a，如果有变量 a，则直接使用；如果没有则向上继续查找。最终如果找到了 a，则进行赋值操作，没有则进行异常抛错。

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

引用执行

编译器在编译的过程的第二步中生成了代码，引擎执行它时，会通过查找变量 a 来判断它是否已声明过。查找的过程由作用域进行协助，当变量出现在赋值操作的左侧时进行 LHS 查询，出现在右侧进行 RHS 查询。

RHS 可以理解为 retrieve his source value（取到它的源值）。例如：console.log(a); 其中对 a 的引用是一个 RHS 引用，这里没有赋予任何值。相比下 a = 2; 是 LHS 引用，赋值操作找到一个目标。

作用域嵌套

作用域是根据名称查找变量的一套规则。实际情况中，通常要同时查找好几个作用域。当一个块或函数嵌套在另一个块或者函数中时，就发生了作用域的嵌套。在当前作用域无法找到某个变量时，引擎就会在外层嵌套的作用域中进行继续查找，直到查到该变量或者最外层的全局作用域为止。

javascript 复制代码

function foo(a) {
    // 其中b进行的RHS引用无法在函数foo内部完成，但可以在上一级作用域中完成
    console.log(a + b);
}

var b = 2;

foo(3); // 5

引用异常

在变量还没有声明的情况下，LHS 和 RHS 的行为是不一样的。

如果 RHS 查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出 ReferenceError 的异常类型。

如果 RHS 找到了一个变量，但你尝试对这个变量的值进行不合理的操作，比如试图对非函数类型的值进行调用，或者引用 null 或 undefined 的值中的属性会报 TypeError。

javascript 复制代码

function foo(a) {
    // 对b进行RHS查询时是无法找到该变量的
    console.log(a + b);
    b = a;
}

foo(2); // ReferenceError: b is not defined

相比较下，执行 LHS 查询时，如果在全局作用域也无法找到目标变量，全局作用域中会创建一个具有该名称的变量，并返回给引擎（前提是程序运行在非严格模式下）。

javascript 复制代码

function foo(a) {
    // 对b进行LHS查询时，没找到会创建一个全局变量
    b = a;
    console.log(a + b);
}
foo(2); // 4

作用域小结

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

词法作用域

作用域有两种主要的工作模型。第一种是最为普遍的词法作用域，另一种是动态作用域。JS 采用的是词法作用域。

词法阶段

编译器第一个工作阶段叫作词法化，词法化的过程会对源代码中的字符进行检查，如果有状态的解析过程，还会赋予单词语义。无论函数在哪里被调用或如何调用，词法作用域只由函数被声明时所处的位置决定。作用域查找会在第一个匹配的标识符时停止，在多层的嵌套作用域中可以定义同名的标识符，这叫作"遮蔽效应"。

欺骗词法

词法作用域完全由书写代码期间函数所声明的位置来定义，怎样才能在运行时来"修改"（欺骗）词法作用域呢？JS 中有两种机制来实现这个目的，使用这两种机制并不是好主意，而且欺骗词法作用域会导致性能下降。

eval

eval(...) 函数可以接受一个字符串为参数，并运行这个字符串来实现修改词法作用域环境。

javascript 复制代码

function foo(str, a) {
    eval( str ); // 欺骗！
    console.log( a, b );
}
var b = 2;
foo( "var b = 3;", 1 ); // 1, 3

在严格模式下，eval 在运行时有其自己语法作用域，意味着其中的声明无法修改所在的作用域。

javascript 复制代码

function foo(str) {
    "use strict";
    eval( str );
    console.log( a ); // ReferenceError: a is not defined
}
foo( "var a = 2");

JS 中还有一些其他功能效果和 eval 相似的方法，例如 setTimeout(...) 和 setInterval(...) 的第一个参数可以是字符串，可以被解析为一段动态生成的函数代码。这些功能已经过时且并不被提倡。不要使用他们！

with

JS 中另一个难以掌握的用来欺骗词法作用域的功能是 with 关键字。with 通常被当作重复引用同一个对象中的多个属性的快捷方式，可以不需要重复引用对象本身。

javascript 复制代码

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;
}

但这样的使用方式会有奇怪的副作用，例如：

javascript 复制代码

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
console.log(a); // 2 --a被泄露到全局作用域上了

当我们将 o2 作为作用域时，其中并没有 a 标识符，因此进行了正常的 LHS 标识符查找，在 o2、foo、全局作用域都没有找到时，在非严格模式下自动创建了一个全局变量。

性能

JS 引擎会在编译阶段进行数项性能优化。其中有些优化依赖于代码词法的静态分析，并预先确定所有变量和函数的定义位置，才能在执行过程中快速找到标识符。如果代码中使用了 eval 或 with，它只能简单地假设关于标识符位置的判断都是无效的，因此代码中的优化就没有了意义。如果大量使用 eval 和 with，运行起来会非常慢。

词法作用域小结

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

JavaScript 中有两个机制可以"欺骗"词法作用域：eval(..) 和 with。前者可以对一段包含一个或多个声明的"代码"字符串进行演算，并借此来修改已经存在的词法作用域（在运行时）。后者本质上是通过将一个对象的引用当作作用域来处理，将对象的属性当作作用域中的标识符来处理，从而创建了一个新的词法作用域（同样是在运行时）。

这两个机制的副作用是引擎无法在编译时对作用域查找进行优化，因为引擎只能谨慎地认为这样的优化是无效的。使用这其中任何一个机制都将导致代码运行变慢。不要使用它们。

函数作用域和块作用域

函数中的作用域

函数作用域是指属于这个函数的全部变量都可以在整个函数的范围内使用及复用。这种设计方案是非常有用的，能充分利用 JS 变量根据需要改变值类型的"动态"特性。

隐藏内部实现

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

javascript 复制代码

function doSomething(a) {
    function doSomeThingElse(a) {
        return a - 1;
    }
    var b;
    b = a + doSomeThingElse(a*2);
    console.log(b*3);
}
doSomething(2); // 15
// b 和doSomeThingElse都无法从外部被访问，只能被doSomething所控制。从设计角度上，内容私有化了

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

函数作用域

匿名和具名

javascript 复制代码

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

因为 function 没有名称标识符，这就叫作匿名函数表达式。函数表达式可以匿名，但函数声明则不能省略函数名。

立即执行函数表达式

javascript 复制代码

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

console.log(a); // 2

函数被包含在一对 ( ) 括号内部，因此成为一个表达式，通过在末尾加上另外一个 ( ) 可以立即执行这个函数，专业术语叫做 IIFE（Immediately Invoked Function Expression）。

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

javascript 复制代码

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

console.log(a); // 2

IIFE 还有一种变化的用途是倒置代码的运行顺序，将需要运行的函数放在第二位，在 IIFE 执行之后当作参数传递进去。这种模式在 UMD 项目中被广泛应用。

javascript 复制代码

var a = 2;
(function IIFE(def) {
    def(window)
})(function def(global) {
    var a = 3;
    console.log(a); // 3
    console.log(global.a); // 2
})

块作用域

块作用域是一个用来对之前的最小授权原则进行扩展的工具，将代码从在函数中隐藏信息扩展为在块中隐藏信息。

with

它不仅是一个难以理解的结构，也是块作用域的一个例子，用 with 从对象中创建出的作用域仅在 with 声明中而非外部作用域中有效。

try/catch

非常少有人注意到 try/catch 分句会创建一个块作用域，其中声明的变量仅在 catch 内部有效。

javascript 复制代码

try {
    undefined(); // 执行一个异常
} catch (err) {
    console.log(err); // 能够执行
}
console.log(err); // ReferenceError: err not found

let

let 关键字可以将变量绑定到所在的任意作用域中（通常是 {...} 内部）。

javascript 复制代码

var foo = true;
if (foo) {
    let bar = 2;
}

console.log(bar); // ReferenceError

const

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

javascript 复制代码

if (true) {
    var a = 2;
    const b = 3; // 包含在if中的块作用域常量
    a = 3; // 正常
    b = 4; // 错误
}

console.log(a); // 3
console.log(b); // ReferenceError

函数与块作用域小结

函数是 JavaScript 中最常见的作用域单元。本质上，声明在一个函数内部的变量或函数会在所处的作用域中"隐藏"起来，这是有意为之的良好软件的设计原则。

但函数不是唯一的作用域单元. 块作用域指的是变量和函数不仅可以属于所处的作用域，也可以属于某个代码块（通常指 { .. } 内部）。

从 ES3 开始，try/catch 结构在 catch 分句中具有块作用域。在 ES6 中引入了 let 关键字（var 关键字的表亲），用来在任意代码块中声明变量。if (..) { let a = 2; } 会声明一个劫持了 if 的 { .. } 块的变量，并且将变量添加到这个块中。

作用域提升

先声明还是先赋值

一般来说 JS 代码是在从上到下一行一行执行的，但实际上并不完全正确，存在作用域提升的特殊情况，例如：

javascript 复制代码

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

javascript 复制代码

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

编译器的作用

引擎会在执行 JS 代码前进行编译，编译阶段的一部分工作就是找到所有的声明，并用合适的作用域关联起来。所以正确的思路是，包括变量和函数在内的所有声明都是在代码执行前先处理。定义声明在编译阶段进行，赋值声明在原地等待执行阶段。上面的例子可以被解析为：

javascript 复制代码

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

第二个解析为：

javascript 复制代码

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

这个过程就好像变量 and 函数声明从它们的代码中出现的位置被"移动"到了最上面。这个过程就叫作提升。

函数优先

函数声明和变量声明都会被提升，但函数会优先被提升，然后才是变量。

javascript 复制代码

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

var foo 尽管出现在 function foo()... 的声明之前，但它是重复的声明，因为函数声明会被提升到普通变量之前。尽管重复的 var 声明会被忽略掉，但出现在后面的函数声明还是可以覆盖前面的。

javascript 复制代码

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

尽量避免在块内部声明函数，这个行为并不可靠。

作用域提升小结

无论作用域中的声明在什么地方，都将在代码本身被执行前先进行处理，这一过程被称为提升。同时需要注意避免重复声明，特别是当普通的 var 声明和函数声明混合在一起的时候，会引起很多危险的问题！

作用域闭包

闭包无处不在

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

闭包的实质

无论通过何种手段将内部函数传递到所在的词法作用域以外，它都会有对原始定义作用域的引用，这就叫作闭包。闭包的神奇之处在于阻止外层作用域被引擎的垃圾回收器回收。例如：内部函数调用外部引用

javascript 复制代码

function foo() {
    var a = 2;
    function bar() {
        console.log(a); // 2
    }
    bar();
}
foo(); // 这不是闭包，但包含了闭包的原理

把函数作为返回值，保持对外部的引用

javascript 复制代码

function foo() {
    var a = 2;
    function bar() {
        console.log(a);
    }
    return bar;
}
var baz = foo();
baz(); // 2 这就是闭包的效果

对函数类型的值进行传递，在别处调用

javascript 复制代码

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

function bar(fn) {
    fn(); // 这也是闭包
}

间接传递函数

javascript 复制代码

var fn;
function foo() {
    var a = 2;
    function baz() {
        console.log(a) // 2
    }
    fn = baz; // 将baz分配
}

function bar() {
    fn(); // 这也是闭包
}
foo();
bar(); // 2

闭包的使用

闭包的使用其实非常广泛，在我们无意中写的代码里有很多闭包。在定时器、事件监听、ajax 处理、通信、异步或同步任务中，只要使用了回调函数，实际上就是在使用闭包！定时器的使用：

javascript 复制代码

function wait(msg) {
    setTimeout(function timer() {
        console.log(msg)
    }, 1000);
}

wait('hello'); // wait执行1000毫秒后，它的内部作用域并不会消失，timer函数依然保有wait的作用域的闭包

事件监听：

javascript 复制代码

function setupBot(name, selector) {
    $(selector).click(function (){
        console.log('Activating: ' + name);
    })
}

setupBot('name1', '#id1');

循环和闭包

要说明闭包，for 循环是最常见的例子。

javascript 复制代码

for (var i=1; i<=5; i++) {
    setTimeout(function timer() {
        console.log( i );
    }, i*1000);
}

正常情况下，我们对这段代码行为的预期是分别输出数字 1~5，每秒一次，每次一个。但实际上，这段代码在运行时会以每秒一次的频率输出五次 6。

因为延迟函数的回调会在循环结束时才执行。事实上，当定时器运行时即使每个迭代中执行的是 setTimeout(.., 0)，所有的回调函数依然是在循环结束后才会被执行，因此会每次输出一个 6 出来。

尽管循环中的五个函数是在各个迭代中分别定义的，但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个 i。

缺陷是什么？我们需要更多的闭包作用域，特别是在循环的过程中每个迭代都需要一个闭包作用域。

IIFE 会通过声明并立即执行一个函数来创建作用域。

javascript 复制代码

for (var i=1; i<=5; i++) {
    (function() {
        var j = i;
        setTimeout( function timer() {
            console.log( j );
        }, j*1000 );
    })();
}

对这段代码进行改进，传入参数

javascript 复制代码

for (var i=1; i<=5; i++) {
    (function(j) {
        setTimeout( function timer() {
            console.log( j );
        }, j*1000 );
    })(i);
}

当然现在可以使用 ES6 的 let 声明，来劫持块作用域：

javascript 复制代码

for (let i=1; i<=5; i++) {
     setTimeout( function timer() {
        console.log( i );
    }, i*1000 );
}

模块

还有其他的代码模式利用闭包的强大威力，但从表面上看，它们似乎与回调无关。下面一起来研究其中最强大的一个：模块。

正如下面代码中所看到的，这里并没有明显的闭包，只有两个私有数据变量 something 和 another，以及 doSomething() 和 doAnother() 两个内部函数，它们的词法作用域（而这就是闭包）也就是 foo() 的内部作用域。

javascript 复制代码

function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];
    function doSomething() {
        console.log( something );
    }
    function doAnother() {
        console.log( another.join("!") );
    }
    
    return {
        doSomething: doSomething,
        doAnother: doAnother,
    }
}

var foo = CoolModule();
foo.doSomething(); // cool
foo.doAnother(); // 1!2!3

模块模式需要具备两个必要条件。

必须有外部的封闭函数，该函数必须至少被调用一次（每次调用都会创建一个新的模块实例）。
封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并且可以访问或者修改私有的状态。

上面的示例是个独立的模块创建器，可以被调用任意多次，每次调用都会创建一个新的模块实例。当只需要一个实例时，可以对这个模式进行简单的改进来实现单例模式：

javascript 复制代码

var foo = (function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];
    function doSomething() {
        console.log( something );
    }
    function doAnother() {
        console.log( another.join("!") );
    }
    
    return {
        doSomething: doSomething,
        doAnother: doAnother,
    }
})();

foo.doSomething(); // cool
foo.doAnother(); // 1!2!3

我们将模块函数转成了 IIFE，立即调用这个函数并将返回值直接赋值给单例的模块实例标识符 foo。

现代的模块机制

大多数模块依赖加载器/管理器本质上都是将这种模块定义封装进一个友好的 API。

javascript 复制代码

var MyModules = (function Manager() {
    var modules = {};
    
    function define(name, deps, impl) {
        for (var i = 0; i < deps.length; i++) {
            deps[i] = modules[deps[i]];
        }
        modules[name] = impl.apply(impl, deps);
    } 
    
    function get (name) {
        return modules[name];
    }
    
    return {
        define: define,
        get: get
    }
})();

这段代码的核心是 modules[name] = impl.apply(impl, deps)。为了模块的定义引入了包装函数（可以传入任何依赖），并且将返回值，也就是模块的 API，存储在一个根据名字来管理的模块列表中。

javascript 复制代码

// 下面展示了如何使用它来定义模块
MyModules.define("bar", [], function() {
    function hello(who) {
        return "Let me introduce: " + who;
    }
    
    return {
        hello: hello
    }
});

MyModules.define("foo", ["bar"], function(bar) {
    var hungry = "hippo";
    function awesome() {
        console.log(bar.hello(hungry).toUpperCase());
    }
    
    return {
        awesome: awesome
    }
});

var bar = MyModules.get("bar");
var foo = MyModules.get("foo");

console.log(bar.hello("hippo")); // Let me introduce: hippo
foo.awesome(); // LET ME INTRODUCE: HIPPO

foo 和 bar 模块都是通过一个返回公共的 API 的函数来定义的。foo 还接受 bar 作为依赖参数，并能相应的使用它。

未来的模块机制

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

相比之下，ES6 的模块 API 更加稳定（API 不会在运行时改变）。

javascript 复制代码

// 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

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

闭包与模块小结

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

闭包也是一个非常强大的工具，可以用多种形式来实现模块等模式。