今天,看到javaScript闭包这一块的地方,不得不说,第一次接触这样的函数行为,是很难理解的,也是研究了半天,才总算理解了闭包这个牛逼的“东西”;
首先,什么是闭包,简单来说,就是内部函数(inner function)可以访问外部函数(outer function)的变量以及参数(注意inner function不能直接调用outer function的arguments对象,但可以直接使用参数);由于,有作用域链(scope chain)的存在,导致闭包在outer function即使在被调用之后,inner function依然可以访问outer function的变量,这意味着,本来应该被销毁的局部变量,却一直保留在了内存中。
下面看一个简单的闭包例子:
function showName(firstName,lastName) {
var nameInfo="My name is ";
function makeFullName() {
return nameInfo+firstName+" "+lastName;
}
return makeFullName;
}
showName("athan","Zhang")();
//会显示My name is athan Zhang
上面这个例子,简单的解释了一下内部函数可以直接调用外部函数的变量,以及直接使用外部函数的参数。
接下来,看一个比较复杂的情况:
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());
var cruiseID = createIdForActionCelebs [1];
console.log(cruiseID.id());
这个例子中,console打印出的结果都是103。因为var createIdForActionCelebs = celebrityIDCreator (actionCelebs) 这里在调用外部函数celebrityIDCreator时,完成了外部函数里面定义的语句块的内容,这也意味着,for循环也执行完毕,数组theCelebrities的id属性被赋予了函数表达式,但这个内部函数此时并没有被调用。在后面stalloneID.id()显示调用内部函数时,返回了uniqueID+i的值,而外部函数早已调用完毕,此时的i的值,已经是3,所以,无论调用theCelebrities数组里面哪一个对象,返回的值都是一样的,这也是闭包存在的一个问题,那怎么解决这个问题呢,得看下面的例子。
function celebrityIDCreator (theCelebrities) {
var i;
var uniqueID = 100;
for (i = 0; i < theCelebrities.length; i++) {
theCelebrities[i]["id"] = function (j) {
return function () { return uniqueID + j; } () ;
} (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);
这个例子里,使用了一种Immediately Invoked Function Expression(立刻调用函数表达式)的语法。上面的函数表达式function(j){/code/}(i),直接在赋值时就调用了,而且将i的值赋给了j,同样闭包里面也用了同样的语法,这样就可以在循环时,就直接调用内部函数,得到想要的值,这个例子里面打印的就是100和101。
有一点需要注意的是,函数表达式function(j){/code/}(i)和函数声明是不一样的,如果在以为函数声明时,在函数后面加上()这个括号,就是直接调用函数,是会出错的,因为编译器认为这个是函数声明,而不是函数表达式。但是如果用一个括号,将整个函数声明包起来,编译器会认为是一个表达式,就不会报错,如下面所示: