转自知乎Rachel
什么是闭包
关于为什么在JavaScript中闭包得应用都有关键词"return"，引用JavaScript秘密花园中的一段话：
闭包是JavaScript一个非常重要得特性，这意味着当前作用域总是能够访问外部作用域中的变量。因为 函数 是JavaScript中唯一拥有自身作用域的结构，因此闭包的创建依赖于函数
闭包是一个内部函数，可以访问外部（封闭）函数的变量范围链。闭包有三个范围链：它可以访问自己的范围（在大括号之间定义的变量），它可以访问外部函数的变量，并且它可以访问全局变量
内部函数不仅可以访问外部函数的变量，还可以访问外部函数的参数，需要注意的是：即使可以直接调用外部函数的参数，内部函数仍然不能调用外部函数的参数对象。
通过在另一个函数中添加一个函数来创建一个闭包。
javaScript 闭包的基本示例：
function showName(firstName,lastName){
var nameIntro = "Your name is "
// 这个内部函数可以访问外部函数的变量，包括参数
function makeFullName(){
return nameIntro + firstName + " " + lastName
}
return makeFullName()
}
showName("Michael","Jackson")
闭包在 Node.js 中广泛使用；它们是 Node.js 的异步，非阻塞构架中的主轴。闭包也经常用在 jQuery 和 javaScript 代码中。
闭包的经典 jQuery 示例：
$(function(){
var selections = []
$(".niners").click(function(){
selections.push(this.prop("name"))
})
})
闭包规则和副作用
- 闭包可以访问外部函数的变量：
闭包最显著的特征就是闭包可以访问到外部函数变量，即使外部函数变量已经被返回。
JavaScript 中的函数执行都是相同的作用域链（函数可以从内往外访问）。因此，您可以稍后在程序中调用内部函数。此示例演示：
function celebrityName(firstName) {
var nameIntro = "This celebrity is"
// 这个内部函数可以访问外部函数的变量，包括参数
function lastName(theLastName) {
return nameIntro + firstName + " " + theLastName
}
return lastName
}
var mjName = celebrityName('Michael')
//此时celebrityName外部函数返回
//闭包(lastName)在外部函数返回后调用
//然而，闭包仍然可以访问到外部函数的变量和参数mjName("Jackson")
2.闭包引用外部函数的变量存储，不存储实际值。当外部函数的变量的值在调用闭包之前改变时，闭包变得更有趣。这个强大的功能可以创造性的利用，看如下代码：
function celebrityID() {
var celebrityID = 999;
//用内部函数返回一个对象
//所有的内部函数可以访问外部函数的变量
return {
getID: function () {
//这个内部函数将返回更新celebrityID变量
return celebrityID;
//它将返回celebrityID的当前值，即使changeTheID函数更改
},
setID: function (theNewID) {
//这个内部函数会随时改变外部函数的变量
celebrityID = theNewID;
}
}
}
var mjID = celebrityID();
// 此时，该celebrityID外部函数返回。
mjID.getID();
// 999 mjID.setID(567);
// 改变外部函数变量
mjID.getID(); // 567
3.闭包缓存
由于闭包可以访问外部函数的变量的更新值，当用一个for循环改变外部函数的变量时，也可能导致错误。从而：
function celebrityIDCreator(theCelebrities) {
var i;
var uniqueID = 100;
for (i = 0; i < theCelebrities.length; i++) {
theCelebrities[i]["id"] = function () {
return uniqueID + i;
}
}
return theCelebrities;
}
var actionCelebs = [
{ name: "Stallone", id: 0 },
{ name: "Cruise", id: 0 },
{ name: "Willis", id: 0 }
];
var createIdForActionCelebs = celebrityIDCreator(actionCelebs);
var stalloneID = createIdForActionCelebs[0];
console.log(stalloneID.id()); // 103
在前面的例子中，在调用匿名函数时，i的值未3（数组的长度，然后递增）。数字3已添加到uniqueID以为所有名人ID创建103.因此返回的数组中的每个位置都得到id = 103，而不是预期的100，101，102
发生这种情况的原因是，正如我们之前例子中讨论的，闭包（本例中的匿名函数）可以通过参数访问外部函数的变量，而不是一个值。因此，正如前面的例子所示，我们可以使用闭包访问更新的变量，这个例子类似地访问i变量改变时，因为外部函数运行整个for循环并返回i的最后一个值，即103
要解决在闭包这个副作用（错误），你可以使用一个立即调用函数表达式：
function celebrityIDCreator (theCelebrities) {
var i;
var uniqueID = 100;
for (i = 0; i < theCelebrities.length; i++) {
theCelebrities[i]["id"] = function (j) { //参数j是i通过这个IIFE调用
return function () {
return uniqueID + j;
//for循环的每个迭代通过i的当前值到这个IIFE并且保存当前值到数组
} () //通过这个函数的末尾的（），我们将立即执行，
并返回UNIQUEID + j的值，而不是返回一个函数。
} (i); //立即调用函数传递变量i作为参数
}
return theCelebrities;
}
var actionCelebs = [ {name:"Stallone", id:0}, {name:"Cruise", id:0},
{name:"Willis", id:0} ];
var createIdForActionCelebs = celebrityIDCreator (actionCelebs);
var stalloneID = createIdForActionCelebs [0];
console.log(stalloneID.id); // 100
var cruiseID = createIdForActionCelebs [1];
console.log(cruiseID.id);// 101
或者使用ES6的内容定义循环中的i
function celebrityIDCreator(theCelebrities) {
var uniqueID = 100;
for (let i = 0; i < theCelebrities.length; i++) {
theCelebrities[i]["id"] = function () {
return uniqueID + i;
}
}
return theCelebrities;
}
var actionCelebs = [
{ name: "Stallone", id: 0 },
{ name: "Cruise", id: 0 },
{ name: "Willis", id: 0 }
];
var createIdForActionCelebs = celebrityIDCreator (actionCelebs);
var stalloneID = createIdForActionCelebs [0];
console.log(stalloneID.id); // 100
var cruiseID = createIdForActionCelebs [1];
console.log(cruiseID.id);// 101