作用域闭包
启示
对于那些有一点 JavaScript 使用经验但未真正理解闭包概念的人来说，理解闭包可以看作是某种意义上的重生，但是需要付出非常多的努力和牺牲才能理解这个概念。
闭包是基于词法作用域书写代码时所产生的自然结果，你甚至不需要为了利用它们而有意识地创建闭包。闭包的创建和使用在你的代码中随处可见。你缺少的是根据你自己的意愿来识别、拥抱和影响闭包的思维环境（功力不够时，看不清周围的环境；只有当功力更上一层楼时，才能看清周围有些什么）。
实质问题
当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。
【示例】：
function foo() {
var a = 2;
function bar() {
console.log(a); // 2
}
bar();
}
foo();
【解释】：严格按照定义来说，上述示例并不算是闭包，更多的是基于词法作用域的查找规则，而这些规则只是闭包的一部分。（但却是非常重要的一部分！）
【示例】：
function foo() {
var a = 2;
function bar() {
console.log(a);
}
return bar;
}
var baz = foo();
baz(); // 2
【解释】：
- 函数 bar() 的词法作用域能够访问 foo() 的内部作用域。在该例子中，bar 所引用的函数对象本身当做返回值，赋值给变量 baz，实际上只是通过不同的标识符引用调用了内部的函数 bar()。也就是说，bar() 在自己定义的词法作用域以外的地方执行，且能够访问自己定义时的词法作用域。
- 在 foo() 执行后，通常 foo() 的整个内部作用域都被销毁，因为引擎有垃圾回收器用来释放不再使用的内存控件。而闭包则可以阻止这件事情的发生。也就是说，foo() 的内部作用域依然存在。为什么会这样？bar() 本身在使用。bar() 拥有涵盖 foo() 内部作用域的闭包，使得该作用域能够一直存活，以供 bar() 在之后任何时间进行引用。bar() 依然持有对该作用域的引用，而这个引用就叫作闭包。
【理解】：闭包是当前函数仍然持有对其定义时词法作用域的引用。
函数在定义时的词法作用域以外的地方被调用，闭包使得函数可以继续访问定义时的词法作用域。
【示例】：无论使用何种方式对函数类型的值进行传递，函数在别处被调用时都可以观察到闭包。
function foo() {
var a = 2;
function baz() {
console.log(a); // 2
}
bar(baz);
}
function bar(fn) {
fn(); // 这就是闭包！
}
// 另一个
var fn;
function foo() {
var a = 2;
function baz() {
console.log(a);
}
fn = baz; // 将 baz 分配给全局变量
}
function bar() {
fn(); // 这就是闭包
}
foo();
bar(); // 2
【总结】：无论通过何种手段将内部函数传递到所在的词法作用域之外，它都会持有对原始定义作用域的引用，无论在何处执行这个函数都会使用闭包。
现在我懂了
【示例】：定时器
function wait(message) {
setTimeout(function timer() {
console.log(message);
}, 1000);
}
wait("Hello, closure!");
【解释】：将一个内部函数 timer 传递给 setTimeout()。timer 具有涵盖 wait() 作用域的闭包，而 timer 调用则是在 setTimeout() 函数内，并非在 wait() 词法作用域中。
【示例】：jQuery
function setupBot(name, selector) {
$(selector).click(function activator() {
console.log("Activating: " + name);
});
}
setupBot("Closure Bot 1", "#bot_1");
setupBot("Closure Bot 2", "#bot_2");
【总结】：在定时器、事件监听器、Ajax 请求、跨窗口通信、Web Workers 或者任何其他的异步（或者同步）任务中，只要使用了回调函数，实际上就是在使用闭包。
【观点】：严格来讲，IIFE 不是闭包。因为函数并不是在它本身的词法作用域以外执行的。它在定义时所在的作用域中执行，对变量的引用也是通过词法作用域查找规则而非闭包。虽然 IIFE 本身不是闭包，但它的确可以创建闭包，而且也是最常用来创建可以被封闭起来的闭包工具。
(function(btns) {
var loop = 0, length = 0;
for(loop = 0, length = 10; loop < length; loop++) {
btns[loop].addEventListener(function() {
console.log(loop);
}, false)
}
})(btns);
循环和闭包
【示例】：
for(var loop = 1; loop <= 5; loop++) {
setTimeout(function timer() {
console.log(loop);
}, loop * 1000);
}
【解释】：
- 一般来说我们期望这段代码能够每秒分别输出 1 ~ 5。然而，实际上，这段代码在运行时会以每秒一次的频率输出五次 6，也就是输出循环结束时 loop 变量的最终值。
- 延迟函数的回调会在循环结束时才执行。事实上，当定时器运行时即使每个迭代中执行的是 setTimeout(..., 0)，所有的回调函数依然是在循环结束后才会被执行，因此每次输出一个 6 出来。
- 我们希望循环中的每个迭代在运行时都会给自己“捕获”一个 loop 的副本。但是根据作用域的工作原理，尽管循环中的五个函数是在各个迭代中分别定义的，但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个 loop 变量。
【解决方法】：
for(var loop = 1; loop <= 5; loop++) {
(function() {
setTimeout(function timer() {
console.log(loop);
}, loop * 1000);
})();
}
// 这样是不行的，因为 IIFE 作用域中“空空如也”，此时输出的 loop 仍然是全局作用域中的 loop 变量。
for(var loop = 1; loop <= 5; loop++) {
(function(j) {
setTimeout(function timer() {
console.log(j);
}, j * 1000);
})(loop);
}
【解释】：在迭代内使用 IIFE 会为每个迭代都生成一个新的作用域，使得延迟函数的回调可以将新的作用域封闭在每个迭代内部，每个迭代中都会含有一个具有正确值的变量供我们访问。
重返块作用域
我们使用 IIFE 在每次迭代时都创建一个新的作用域。换句话说，每次迭代我们都需要一个块作用域。
【本质】：将一个块转换成一个可以被关闭的作用域。
【示例】：
for(let loop = 1; loop <= 5; loop++) {
setTimeout(function timer() {
console.log(loop);
}, loop * 1000);
}
小结
- 当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。
网友评论