你不知道的 JS(上卷)笔记
你不知道的 JavaScript
JavaScript 既是一门充满吸引力、简单易用的语言，又是一门具有许多复杂微妙技术的语言，即使是经验丰富的 JavaScript 开发者，如果没有认真学习的话也无法真正理解它们.
上卷包括俩节：
作用域和闭包
this 和对象原型
作用域和闭包
希望 Kyle 对 JavaScript 工作原理每一个细节的批判性思 考会渗透到你的思考过程和日常工作中。知其然，也要知其所以然。
作用域闭包
启示
秘诀：JavaScript 中闭包无处不在，你只需要能够识别并拥抱它。
闭包是基于词法作用域书写代码时所产生的自然结果，你甚至不需要为了利用它们而有意识的创建闭包。
闭包的创建和使用在你的代码中随处可见。你缺少的是根据你自己的意愿来识别、拥抱和影响闭包的思维环境。
实质问题
当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。
词法作用域的查找规则是闭包的一部分。
function foo() {
var a = 2;
function bar() {
console.log(a); // 2
}
bar();
}
foo();
纯学术的角度上说，上述代码片段中，函数 bar() 具有一个涵盖 foo() 作用域的闭包 (事实上，涵盖了它能访问的所有作用域，比如全局作用域)。也可以认为 bar() 被封闭在了 foo() 的作用域中。为什么呢? 原因简单明了，因为 bar() 嵌套在 foo() 内部。
闭包使得函数可以继续访问定义时的词法作用域。
无论通过何种手段将内部函数传递到所在的词法作用域以外，它都会持有对原始定义作用 域的引用，无论在何处执行这个函数都会使用闭包。
思考：
function foo() {
var a = 2;
function baz() {
console.log(a, b); // 2 , b 能获取到 1 吗？
}
bar(baz);
}
function bar(fn) {
var b = 1;
fn(); // 妈妈快看呀，这就是闭包!
}
常见的闭包场景
function wait(message) {
setTimeout(function timer() {// timer 函数由引擎调用，但是已经超出了 wait 作用域，所以存在闭包
console.log(message);
}, 1000 );
}
wait(“Hello, closure!”);
在定时器、事件监听器、Ajax 请求、跨窗口通信、Web Workers 或者任何其他的异步 (或者同步) 任务中，只要使 用了回调函数，实际上就是在使用闭包!
IIFE 闭包
var a = 2;
(function IIFE() {
console.log(a);
})();
尽管 IIFE 本身并不是观察闭包的恰当例子，但它的确创建了闭包，并且也是最常用来创建 可以被封闭起来的闭包的工具。因此 IIFE 的确同闭包息息相关，即使本身并不会真的使用 闭包。
循环和闭包
for (var i=1; i<=5; i++) {
setTimeout(function timer() {
console.log(i);
}, i*1000 );
}
延迟函数的回调会在循环结束时才执行。事实上，当定时器运行时即使每个迭代中执行的是 setTimeout(.., 0)，所有的回调函数依然是在循 环结束后才会被执行，因此会每次输出一个 6 出来。
缺陷是我们试图假设循环中的每个迭代在运行时都会给自己“捕获”一个 i 的副本。但是 根据作用域的工作原理，实际情况是尽管循环中的五个函数是在各个迭代中分别定义的，但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个 i。这样说的话，当然所有函数共享一个 i 的引用。
它需要有自己的变量，用来在每个迭代中储存 i 的值:
for (var i=1; i<=5; i++) {
(function() {// IIFE 每次执行都会立即创建一个词法上的函数作用域
var j = i; // 闭包作用域的变量 j, 立即得到 i 的值
setTimeout(function timer() {
console.log(j); // 访问闭包作用域的变量 j
}, j*1000 );
})();
}
变体：
for (var i=1; i<=5; i++) {
(function(j) {// IIFE 每次执行都会立即创建一个词法上的函数作用域
// 闭包作用域的变量 j, 参数传递立即得到 i 的值
setTimeout(function timer() {
console.log(j); // 访问闭包作用域的变量 j
}, j*1000 );
})(i);
}
块作用域和闭包
let 声明，可以用来劫 持块作用域，并且在这个块作用域中声明一个变量。
而上面的 IIFE 创建一个闭包，本质上这是将一个块转换成一个可以被关闭的作用域。
结合块级作用域与闭包：
for (let i=1; i<=5; i++) {
setTimeout(function timer() {
console.log(i);
}, i*1000 );
}
模块
function CoolModule() {
var something = “cool”;
var another = [1, 2, 3];
function doSomething() {
console.log(something);
}
function doAnother() {
console.log(another.join( ” ! ”) );
}
return {
doSomething1: doSomething,
doAnother: doAnother
};
}
var foo = CoolModule();
foo.doSomething1(); // cool
foo.doAnother(); // 1 ! 2 ! 3
这个模式在 JavaScript 中被称为模块。最常见的实现模块模式的方法通常被称为模块暴露，这里展示的是其变体。doSomething() 和 doAnother() 函数具有涵盖模块实例内部作用域的闭包(通过调用 CoolModule() 实现)。当通过返回一个含有属性引用的对象的方式来将函数传递到词法作 用域外部时，我们已经创造了可以观察和实践闭包的条件。
模块模式需要具备两个必要条件。
必须有外部的封闭函数，该函数必须至少被调用一次(每次调用都会创建一个新的模块 实例)。
封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并 且可以访问或者修改私有的状态。
一个具有函数属性的对象本身并不是真正的模块。从方便观察的角度看，一个从函数调用 所返回的，只有数据属性而没有闭包函数的对象并不是真正的模块。
模块模式另一个简单但强大的变化用法是，命名将要作为公共 API 返回的对象: 在上述模块中，dosomething1 被作为模块内部 dosomething 的公开访问名。
现代的模块机制
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
};
})();
// module bar 定义
MyModules.define(“bar”, [], function() {
function hello(who) {
return “Let me introduce: ” + who;
}
return {
hello: hello
};
});
// module foo 定义 依赖 bar 模块
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
未来的模块机制
基于函数的模块并不是一个能被稳定识别的模式 (编译器无法识别)，它们 的 API 语义只有在运行时才会被考虑进来。因此可以在运行时修改一个模块 的 API。相比之下，ES6 模块 API 更加稳定(API 不会在运行时改变)。由于编辑器知 道这一点，因此可以在(的确也这样做了) 编译期检查对导入模块的 API 成 员的引用是否真实存在。如果 API 引用并不存在，编译器会在运行时抛出一 个或多个“早期”错误，而不会像往常一样在运行期采用动态的解决方案。
ES6 的模块没有“行内”格式，必须被定义在独立的文件中 (一个文件一个模块)。浏览 器或引擎有一个默认的“模块加载器”(可以被重载，但这远超出了我们的讨论范围) 可 以在导入模块时异步地加载模块文件。
小结
闭包就好像从 JavaScript 中分离出来的一个充满神秘色彩的未开化世界，只有最勇敢的人 才能够到达那里。但实际上它只是一个标准，显然就是关于如何在函数作为值按需传递的 词法环境中书写代码的。当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时 就产生了闭包。如果没能认出闭包，也不了解它的工作原理，在使用它的过程中就很容易犯错，比如在循 环中。但同时闭包也是一个非常强大的工具，可以用多种形式来实现模块等模式。模块有两个主要特征:
(1)为创建内部作用域而调用了一个包装函数;(2)包装函数的返回 值必须至少包括一个对内部函数的引用，这样就会创建涵盖整个包装函数内部作用域的闭 包。
现在我们会发现代码中到处都有闭包存在，并且我们能够识别闭包然后用它来做一些有用 的事!