JS-闭包
名词解释
- 词法作用域：根据声明变量的位置来确定该变量可被访问的位置。嵌套函数可获取声明于外部作用域的变量和函数。
- "链式作用域"结构（chain scope）：子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
定义
MDN: 函数与对其状态即词法环境（lexical environment）的引用共同构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在JavaScript，函数在创建时生成闭包。
闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量和函数。
什么是闭包？
能够读取其他函数内部变量的函数。在Js中，只有函数内部的函数才能读取局部变量。所以可以说闭包一个定义在函数内部的函数。
示例：
function makeFunc() {
var name = "Mozilla"; // name是makeFunc的局部变量
// displayName()函数和它的词法环境，组成了一个闭包
function displayName() {
alert(name); // 使用了父函数中声明的变量
}
return displayName;
}
//执行makeFunc，返回结果是函数displayName
var myFunc = makeFunc();
//执行displayName,此时displayName仍能访问makeFunc的局部变量name
myFunc();
displayName可以访问makeFunc的内部变量，外部无法访问makeFunc的内部变量，所以将displayName作为返回结果，在外部就可以通过displayName访问makeFunc的内部变量name了。
在一些编程语言中，函数中的局部变量仅在函数的执行期间可用，一旦函数执行完了，那么它的内部变量将不能被访问。 但是在js中，函数在执行完以后，它的内部变量还可以被它的内部函数访问。
为什么会这样呢？
原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后被垃圾回收机制（garbage collection）回收。
实用：用闭包模拟私有方法
私有方法不仅仅有利于限制对代码的访问：还提供了管理全局命名空间的强大能力，避免非核心的方法弄乱了代码的公共接口部分。
下面的示例展现了如何使用闭包来定义公共函数，并令其可以访问私有函数和变量。这个方式也称为 模块模式（module pattern）：
var makeCounter = function() {
//私有变量
var privateCounter = 0;
//私有方法
function changeBy(val) {
privateCounter += val;
}
return {
//Counter.increment，Counter.decrement 和 Count共享一个词法环境，
//也就是说,外部函数的变量privateCounter 和函数changeBy以下三个函数是都可以访问的
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
};
var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */
上面示例创建了一个词法环境和三个函数。
环境包含两个私有项：名为 privateCounter 的变量和名为 changeBy 的函数。
三个函数：Counter.increment，Counter.decrement 和 Counter.value。
这三个函数是共享同一个环境的闭包。由于JavaScript 的词法作用域，它们都可以访问 privateCounter 变量和 changeBy 函数。
为什么上面Counter2的value并没有受到影响？
每个闭包都是引用自己词法作用域内的变量 privateCounter 。
每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。
缺点
-
闭包在处理速度和内存消耗方面对脚本性能具有负面影响。
为什么？
闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。 -
闭包会在父函数外部，改变父函数内部变量的值。
如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
在创建新的对象或者类时，方法通常应该关联于对象的原型，而不是定义到对象的构造器中。
为什么？
原因是这将导致每次构造器被调用时，方法都会被重新赋值一次。
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
this.getName = function() {
return this.name;
};
this.getMessage = function() {
return this.message;
};
}
//构造器MyObject被调用时，this.getName和this.getMessage方法都会被重新赋值一次
let obj = new MyObject('shang','123');
//改造
function MyObject2(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject2.prototype.getName = function() {
return this.name;
};
MyObject2.prototype.getMessage = function() {
return this.message;
};
//调用MyObject2，它属性中的两个方法并不会被影响
let obj = new MyObject2('shang','123');
思考题
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
//这里的this指向的是window
console.log(this.name);
};
}
};
object.getNameFunc()(); //The Window
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
//闭包中的this指向的是定义它的函数，即object
var that = this;
return function(){
//这里的name就是object.name
console.log(that.name);
};
}
};
object.getNameFunc()(); //My Object
this在最终调用时才确定，而不是定义时确定。
思考题解释：
object.getNameFunc()()。
getNameFunc是由object调用，所以getNameFunc的this指向object。
第一个示例中，执行第二个方法时，由于this指向是不能像作用域一样存在链式的，所以执行第二个方法时其实是window在调用，所以输出是The Window。
第二个示例中，我们将this（this指向object）转存that，在第二个方法中输出that.name相当于输出object.name,所以输出My Object。