闭包(Closure)
闭包是一个函数和词法环境的组合，函数声明在这个词法环境中
词法作用域
看下面一个例子
function init() {
var name = 'Mozilla'; // name是局部变量
function displayName() { // displayName()是内部函数，一个闭包
alert(name); // 运用外部函数声明的变量
}
displayName();
}
init(); init()建立了一个局部变量name和一个函数displayName()。函数displayName()是一个已定义在init()内部的函数，而且只能在函数init()内里才接见获得。函数displayName()没有本身的局部变量，但由于内部函数可以接见外部函数变量，displayName()可以接见到声明在外部函数init()的变量name，假如局部变量还存在的话，displayName()也可以接见他们。
闭包
看下面一个例子
function makeFunc() {
var name = 'Mozilla';
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc(); 运转这段代码你会发明和之前init()的要领是一样的结果，但差别之处是，displayName()在实行之前，这个内部要领是从外部要领返返来的。
起首，代码照样会准确运转，在一些编程言语当中，一个函数内的局部变量只存在于该函数的实行时期，随后会被烧毁，一旦makeFunc()函数实行终了的话，变量名就不可以被猎取，然则，由于代码依然一般实行，这显然在JS里是不会如许的。这是由于函数在JS里是以闭包的情势涌现的，闭包是一个函数和词法作环境的组合，词法环境是函数被声明的谁人作用域，这个实行环境包括了建立闭包时统一建立的恣意变量，即建立的这个函数和这些变量处于统一个作用域当中。在这个例子当中，myFunc()是displayName()的函数实例，makeFunc建立的时刻，displayName随之也建立了。displayName的实例可以获得词法作用域的援用，在这个词法作用域当中，存在变量name，关于这一点，当myFunc挪用的话，变量name，依然可以被挪用，因而，变量’Mozilla’通报给了alert函数。
这里另有一个例子 – 一个makeAdder函数
function makeAdder (x) {
return function(y) {
return x + y;
}
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12 在这个例子当中，我们定义了一个函数makeAdder(x)，通报一个参数x，而且返回一个函数，这个返回函数吸收一个参数y，并返回x和y的和。
现实上，makeAdder是一个工场形式 – 它建立了一个函数，这个函数可以盘算特定值的和。在上面这个例子当中，我们运用工场形式来建立新的函数 – 一个与5举行加法运算，一个与10举行加法运算。add5和add10都是闭包，他们同享雷同的函数定义，但却存储着差别的词法环境，在add5的词法环境当中，x为5；在add10的词法环境当中，x变成了10。
闭包的实践
闭包是很有效的，由于他让你把一些数据(词法环境)和一些可以猎取这些数据的函数联系起来，这有点和面向对象编程相似，在面向对象编程当中，对象让我们可以把一些数据(对象的属性)和一个或多个要领联系起来
因而，你可以像对象的要领一样随时运用闭包。现实上，大多数的前端JS代码都是事宜驱动性的 – 我们定义一些事宜，当这个事宜被用户所触发的时刻(比方用户的点击事宜和键盘事宜)，我们的事宜通常会带上一个回调：即事宜触发所实行的函数。比方，假定我们愿望在页面上增加一些按钮，这些按钮可以调解笔墨的大小，完成这个功用的体式格局是肯定body的字体大小，然后再设置页面上其他元素(比方题目)的字体大小，我们运用em作为单元。
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}我们设置的调治字体大小的按钮可以转变body的font-size，而且这个调治可以经由过程相对字体单元，反应到其他元素上，
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);size12,size14,size16是三个离别把字体大小调解为12,14,16的函数，我们可以把他们绑定在按钮上。
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>经由过程闭包来封装私有要领
相似JAVA言语可以声明私有要领，意味着只可以在雷同的类内里被挪用，JS没法做到这一点，但却可以经由过程闭包来封装私有要领。私有要领不限定代码：他们供应了治理定名空间的一种强有力体式格局。
下面代码论述了如何运用闭包来定义公有函数，公有函数可以接见私有要领和属性。
var counter = (function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
};
})();
console.log(counter.value()); // logs 0
counter.increment();
counter.increment();
console.log(counter.value()); // logs 2
counter.decrement();
console.log(counter.value()); // logs 1 在先前的例子当中，每一个闭包具有他们本身的词法环境，在这个例子中，我们建立了一个零丁的词法环境，这个词法环境被3个函数所同享，这三个函数是counter.increment, counter.decrement和counter.value
同享的词法环境是由匿名函数建立的，一定义就可以被实行，词法环境包括两项：变量privateCounter和函数changeBy，这些私有要领和属性不可以被表面接见到，但是，他们可以被返回的大众函数接见到。这三个公有函数就是闭包，同享雷同的环境，JS的词法作用域的优点就是他们可以相互接见变量privateCounter和changeBy函数
var makeCounter = function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
};
var counter1 = makeCounter();
var counter2 = makeCounter();
alert(counter1.value()); /* Alerts 0 */
counter1.increment();
counter1.increment();
alert(counter1.value()); /* Alerts 2 */
counter1.decrement();
alert(counter1.value()); /* Alerts 1 */
alert(counter2.value()); /* Alerts 0 */两个计数器counter1和counter2离别是相互自力的，每一个闭包具有差别版本的privateCounter，每次计数器被挪用，词法环境会转变变量的值，然则一个闭包里变量值的转变并不影响另一个闭包里的变量。
轮回中建立闭包：罕见毛病
下面一个例子
<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>function showHelp(help) {
document.getElementById('help').innerHTML = help;
}
function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
];
for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
}
}
}
setupHelp(); helpText 数组定义了三个有效的hint，每一个离别与输入框的id相对应，每一个要领与onfocus事宜绑定起来。当你运转这段代码的时刻，不会像预期的那样事情，不论你聚焦在哪一个输入框，一直显现你的age信息。
缘由在于，分配给onfocus事宜的函数是闭包，他们由函数定义组成，从setupHelp函数的函数作用域猎取。三个闭包由轮回所建立，每一个闭包具有统一个词法环境，环境中包括一个变量item.help,当onfocus的回调实行时，item.help的值也随之肯定，轮回已实行终了，item对象已指向了helpText列表的末了一项。处置惩罚这个题目的要领是运用更多的闭包，详细点就是提早运用一个封装好的函数：
function showHelp(help) {
document.getElementById('help').innerHTML = help;
}
function makeHelpCallback(help) {
return function() {
showHelp(help);
};
}
function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
];
for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
}
}
setupHelp();上面代码运转一般，回调此时差别享一个词法环境，makeHelpCallback函数给每一个回调制造了一个词法环境，词法环境中的help指helpText数组中对应的字符串，运用匿名闭包来重写的例子以下：
function showHelp(help) {
document.getElementById('help').innerHTML = help;
}
function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
];
for (var i = 0; i < helpText.length; i++) {
(function() {
var item = helpText[i];
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
}
})(); // Immediate event listener attachment with the current value of item (preserved until iteration).
}
}
setupHelp();假如你不想运用闭包，你可以运用ES6的let关键字
function showHelp(help) {
document.getElementById('help').innerHTML = help;
}
function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
];
for (var i = 0; i < helpText.length; i++) {
let item = helpText[i];
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
}
}
}
setupHelp();这个例子运用let替代var，所以，每一个闭包绑定了块级作用域，也就意味着不需要分外的闭包
机能斟酌
假如闭包在现实案例中是不被许可的，在一个函数中就不一定再建立一个函数，由于这会影响剧本的机能，比方处置惩罚的速率和内存的斲丧。比方，当建立一个对象，对象的要领应当跟对象的原型联系起来而不是在对象的组织器里定义，这是由于不管什么时刻组织器被挪用，要领都会被从新分配
下面一个例子
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
this.getName = function() {
return this.name;
};
this.getMessage = function() {
return this.message;
};
}前面的代码没有充分利用闭包，我们重写以下
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject.prototype = {
getName: function() {
return this.name;
},
getMessage: function() {
return this.message;
}
};但是，我们不发起从新定义原型，下面的例子中，给原型离别定义要领而不是从新定义全部原型，如许会转变constructor的指向。
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject.prototype.getName = function() {
return this.name;
};
MyObject.prototype.getMessage = function() {
return this.message;
};在前面两个例子中，继续原型可以被一切对象所同享而且在每一个对象建立的同时都不必定义要领。
