关于闭包

最新推荐文章于 2022-11-15 09:04:46 发布

转载最新推荐文章于 2022-11-15 09:04:46 发布 · 253 阅读

转自 http://blog.youkuaiyun.com/chenmoquan/

啥是闭包?

一个闭包就是一个可以访问外部函数作用域链的一个内部函数。闭包有三个作用域链：它可以访问自己的作用域（即当前的大括号内），它也可以访问外部函数的变量，它还可以访问全局变量。

闭包不仅可以访问外部函数的变量，还可以访问外部函数的参数。注意：尽管内部函数可以直接访问外部函数的参数，但并不能调用外部函数的arguments 对象。

我们可以通过在一个function里增加一个function来创建一个闭包。

一个简单的闭包示例 in JavaScript: 

function showName (firstName, lastName) { 
var nameIntro = "Your name is ";
// this inner function has access to the outer function's variables, including the parameter
function makeFullName () { 
return nameIntro + firstName + " " + lastName; 
}

return makeFullName (); 
} 

showName ("Michael", "Jackson"); // Your name is Michael Jackson 
闭包在node.js中广泛使用，它是node.js的异步和无阻塞的工具。在jQuery以及几乎每一段js代码中，闭包都被广泛使用。

jQuery中一段经典的闭包代码：

$(function() {

var selections = [];
$(".niners").click(function() { // this closure has access to the selections variable
selections.push (this.prop("name")); // update the selections variable in the outer function's scope
});

});

闭包的特性及副作用

1. 外部函数返回后，闭包依然可以访问外部函数中的变量

这是闭包中重要的特性之一。是的，你没看错。在js函数执行过程中，内部函数与外部函数使用相同的作用域链。这意味着即使外部函数返回之后，内部函数依然可以访问其中的变量。所以我们可以稍后在程序中调用内部函数。
示例代码:

function celebrityName (firstName) {
var nameIntro = "This celebrity is ";
// this inner function has access to the outer function's variables, including the parameter
function lastName (theLastName) {
return nameIntro + firstName + " " + theLastName;
}
return lastName;
}

var mjName = celebrityName ("Michael"); // At this juncture, the celebrityName outer function has returned.

// The closure (lastName) is called here after the outer function has returned above
// Yet, the closure still has access to the outer function's variables and parameter
mjName ("Jackson"); // This celebrity is Michael Jackson 

2. 闭包保存了对外部函数中的变量的引用

并不是保存实际的变量值。当闭包被调用之前，如果外部函数的变量发生变化时，闭包会很有意思。闭包的这种特性有很多用途。例如下面这个私有变量的例子（first demonstrated by Douglas Crockford）: 

function celebrityID () {
var celebrityID = 999;
// We are returning an object with some inner functions
// All the inner functions have access to the outer function's variables
return {
getID: function () {
// This inner function will return the UPDATED celebrityID variable
// It will return the current value of celebrityID, even after the changeTheID function changes it
return celebrityID;
},
setID: function (theNewID) {
// This inner function will change the outer function's variable anytime
celebrityID = theNewID;
}
}

}

var mjID = celebrityID (); // At this juncture, the celebrityID outer function has returned.
mjID.getID(); // 999
mjID.setID(567); // Changes the outer function's variable
mjID.getID(); // 567: It returns the updated celebrityId variable 

3. 闭包很乱

因为闭包可以访问外部函数的变量，所以在for循环中当外部函数的变量发生变化时容易出bug。

// This example is explained in detail below (just after this code box).
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。所以每个返回的array 都会得到 i=103，而不是 100, 101, 102。原因是闭包访问外部函数的变量，是通过引用，并不是直接访问值。前面的例子展示了我们可以通过闭包访问更新的变量，这个例子也是在i变化时访问它，因为外部函数运行整个循环返回的最后的i值是103。

为了修复这个bug，可以使用一个立即执行函数表达式 Immediately Invoked Function Expression (IIFE), 代码如下:

function celebrityIDCreator (theCelebrities) {
var i;
var uniqueID = 100;
for (i = 0; i < theCelebrities.length; i++) {
theCelebrities[i]["id"] = function (j) { // the j parametric variable is the i passed in on invocation of this IIFE
return function () {
return uniqueID + j; // each iteration of the for loop passes the current value of i into this IIFE and it saves the correct value to the array
} () // BY adding () at the end of this function, we are executing it immediately and returning just the value of uniqueID + j, instead of returning a function.
} (i); // immediately invoke the function passing the i variable as a parameter
}

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