以下内容为《你不知道的JavaScript上卷》第一部分第五章-作用域闭包及附录的阅读笔记
一.作用域闭包
1.是什么闭包？当函数可以记住并访问所在词法作用域时，就形成了闭包，即使函数是在当前词法作用域之外执行的。
function foo(){
var a = 2;
function bar(){
console.log(a);//2
}
bar();
}
foo();
- 从严格意义上来说，上面的代码片段并不是真正的闭包，更为准确的解释应该是：函数
bar()对a的引用方法是词法作用域中的查找规则，这些规则只是闭包的一部分，虽然是非常重要的一部分。
2.真正的闭包：
function foo(){
var a = 2;
function bar(){
console.log(a);//2
}
return bar;
}
var baz = foo();
baz();
通过这个例子剖析上述闭包的定义：
①记住
- 函数
bar()的词法作用域可以访问foo()的内部作用域，我们将bar所引用的函数对象本身当做返回值。一旦执行foo()函数，则会返回bar()函数。
②访问
- 通过不同的标识符引用调用了内部函数
bar()。
③
- 在这个例子中，函数
bar()在自己定义的词法作用域之外的地方执行。
More：
④闭包的"神奇"之处在于：阻止引擎的垃圾回收机制释放foo()函数的内部作用域。
⑤那么到底谁还在使用这个内部作用域呢？
- 原来是
bar()函数本身在使用。由于bar()函数所声明的位置原因，导致它拥有涵盖foo()内部作用域的闭包，使得该作用域能够一直存活，以供bar()函数在之后的任何时间进行引用。
⑥无论使用何种方式对函数类型的值进行传递，当函数在别处被调用时都可以观察到闭包现象。
function foo(){
var a = 2;
function baz(){
console.log(a);
}
bar(baz);
}
function bar(fn){
fn();//闭包
}
foo();
var fn;
function foo(){
var a = 2;
function baz(){
console.log(a);
}
fn = baz;
}
function bar(){
fn();//闭包
}
foo();
bar();//2
无论通过何种方式将内部函数传递到所在的词法作用域之外，它都会持有对原始定义作用域的引用，无论在何处执行这个函数都会使用闭包。
3.循环和闭包
①
for(var i = 1;i <= 5;i++){
setTimeout(function timer(){
console.log(i);
},i*1000);
}
对于以上代码片段，预期为分别输出数字1~5，每秒一次，每次一个。
但是，实际情况是以每秒一次的频率输出五次6。
②首先，解决一个问题：6从哪来？
- for循环中的终止条件是
i不再<=5，条件首次成立时i的值是6。因此，输出显示的是循环结束时i的最终值。
③为什么会输出五次6？
- 延迟函数的回调会在循环结束时才执行。
④代码中存在着什么缺陷，导致了它的行为和语义所暗示的不一样呢？
- 我们试图假设，循环中的每次迭代在运行时都会给自己"捕获"一个
i的副本。但是，根据作用域的工作原理，实际情况是循环中的五个函数是在各自迭代中分别定义的，但是它们都被封存在一个共享的全局作用域中，因此实际上只有一个i，也就是函数共享一个i的引用。
⑤试试IIFE(Immediately Invoked Function Expression)立即执行函数表达式：
for(var i = 1;i <= 5;i++){
(function(){
setTimeout(function timer(){
console.log(i);
},i*1000);
})();
}
>>>
6
6
6
6
6
好像不管用啊！
- 虽然每个延迟函数都会将
IIFE在每次迭代中创建的作用域封存起来，但是封存空的作用域，没有什么实际用处。
⑥它需要有自己的变量，用来在每次迭代中存储i的值：
for(var i = 1;i <= 5;i++){
(function(){
var j = i;
setTimeout(function timer(){
console.log(j);
},i*1000);
})();
}
>>>
1
2
3
4
5
//优化一下
for(var i = 1;i <= 5;i++){
(function(j){
setTimeout(function timer(){
console.log(j);
},i*1000);
})(i);
}
4.重返块作用域
①在之前代码片段中使用IIFE，可以在每次迭代时都创建一个新的作用域，换句话来说，每次迭代我们都需要一个块作用域。因此可以试着使用let声明，因为它可以用来劫持块作用域，并且在这个块作用域中声明一个变量。
for(var i = 1;i <= 5;i++){
let j = i;
setTimeout(function timer(){
console.log(j);
},j*1000);
}
>>>
1
2
3
4
5
本质上：是将一个块转换成了一个可以被关闭的作用域。
②More：for循环头部的let声明还会有一个非常强大的行为：该变量在循环过程中不止被声明一次，每次迭代都会声明。随后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。
for(let i = 1;i <= 5;i++){
setTimeout(function timer(){
console.log(i);
},i*1000)
}
>>>
1
2
3
4
5
5.模块
①
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中被称为模块。CoolModule()只是一个函数，必须要通过调用它来创建一个模块实例。CoolModule()返回一个用对象字面量语法表示的对象。这个对象中包含了对内部函数的引用。doSomthing()和doAnother()函数具有涵盖模块实例内部作用域的闭包（通过调用CoolModule()实现）。
②模块模式需具备的两个必要条件：
必须有外部的封装函数
(CoolModule)，该函数至少要被调用一次（每次调用都会创建一个新的模块实例）。封闭函数至少返回一个内部函数，这样内部函数才能在私有作用域中形成闭包，并且能够访问或者修改私有的状态。
③若只需要单个模块实例，可对上述代码进行小小的修改(IIFE)：
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
④模块也是普通的函数，因此可以接收参数：
function CoolModule(id){
function identify(){
console.log(id);
}
return{
identify: identify
};
}
var foo1 = CoolModule('foo 1');
var foo2 = CoolModule('foo 2');
foo1.identify();
>>>foo 1
foo2.identify();
>>>foo 2
⑤模块模式另一个简单而强大的用法是命名将要作为公共API返回的对象：
var foo = (function CoolModule(id){
function change(){
publicAPI.identify = identify2;
}
function identify1(){
console.log(id);
}
function identify2(){
console.log(id.toUpperCase());
}
var publicAPI = {
change: change,
identify: identify1
};
return publicAPI;
})('foo module');
foo.identify();
>>>foo module
foo.change();
foo.identify();
>>>FOO MODULE
附录A：动态作用域
1.词法作用域的定义过程发生在代码的书写阶段（这里假设代码没有使用eval和with）。
2.
function foo(){
console.log(a);//2
}
function bar(){
var a = 3;
foo();
}
var a = 2;
bar();
①这段代码说明JavaScript中的作用域就是词法作用域。
- 词法作用域让
foo()函数中的a通过RHS(Retrieve His Source)引用到了全局作用域中的a，因此输出2。
②词法作用域只关心函数在何处声明！
③那么动态作用域是怎么一回事呢？
3.动态作用域并不关心函数和作用域是如何声明以及在何处声明的，只关心它们从何处调用的。也就是说，作用域链是基于调用栈的，而不是代码中的作用域嵌套。
//注意，以下代码仅仅是在假设动态作用域存在的情况下
function foo(){
console.log(a);//3，（而不是2！）
}
function bar(){
var a = 3;
foo();
}
var a = 2;
bar();
①为什么会这样？
- 当
foo()函数无法找到a的变量引用时，就会顺着调用栈在调用foo()函数的地方查找a，而不是在嵌套的词法作用域中向上查找。由于foo()函数是在bar()函数中调用的，因此，引擎会检查bar()函数的作用域，并在其中找到值为3的变量a。
4.词法作用域和动态作用域的区别？
- 词法作用域是在写代码或者说定义时确定的，而动态作用域是在运行时确定的。
- 词法作用域关注函数在何处声明，而动态作用域则关注函数从何处调用（调用栈）。
5.JavaScript只有词法作用域，那为什么还要了解动态作用域？
- 因为
JavaScript中的this机制在某种程度上与动态作用域相似。
