JavaScript闭包
函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起构成闭包(closure)。也就是说,闭包可以让你从内部函数访问外部函数作用域。这句话简单来理解就是闭包指的是函数嵌套函数,或者说定义在一个函数内部的函数,它是将该函数内部和函数外部连接起来的一座桥梁。这个内部函数可以使用外部函数的变量。
作用:闭包可以用在许多地方。它的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
例1:请看下面代码:
function f1(){
var n=999;
nAdd=function(){n+=1};
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
这段代码中result就是闭包f2函数,这个闭包可以访问并使用f1中的变量。这里result运行了两次,第一次的结果为999,第二次的结果为1000,如何理解呢?
为了更好地理解闭包的运行结果,我们把闭包和其周围环境分开来看。对应这里也就是f1里的前两行为周围状态,后面的f2函数为闭包。周围状态第一行声明了一个变量n=999,第二行声明了一个匿名函数表达式,并且nAdd没有使用var,因此它是一个全局变量,实际上它其实也是一个闭包。第一次运行result,匿名函数表达式没被调用,因此n仍为999,运行结果为999;在第二次调用result之前,调用了nAdd,从而使得n加了1,因此第二次运行结果为1000。同时,这两次的运行结果说明了变量n一直存在于内存中,没有在调用后被销毁。这证明了闭包可以将周围环境的变量值始终保存在内存中。
注意:如果这里nAdd使用了var关键字声明,则它就是一个局部变量,无法在外面调用了。
立即执行函数
立即执行函数(IIFE),顾名思义,也就是说这个函数是立即执行函数体的,不需要你额外去主动的去调用,一般情况下我们只对匿名函数使用IIFE,这么做有两个目的:一是不必为函数命名,避免了污染全局变量 二是IIFE内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量。
( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法。要理解立即执行函数,需要先理解一些函数的基本概念:函数声明、函数表达式、匿名函数,这里不再赘述他们具体是什么。但值得注意的是,函数声明和函数表达式有两个不同点:1. Javascript引擎在解析javascript代码时会‘函数声明提升’(Function declaration Hoisting)当前执行环境(作用域)上的函数声明,而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式。2. 函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以functionName()形式调用 。
例2:闭包和立即执行函数的使用
// 这段代码无法实现预期的效果,点击某个链接就出现这是链接几。
// 因为每次循环时i的值并没有保存下来,直到循环结束时,i的最终值为6(如果有6个a元素的话)
// 所以说无论点击那个连接,最终显示的都是I am link #6
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + i);
}, 'false');
}
// 这个是可以实现效果,因为他在自执行函数表达式闭包内部
// i的值作为locked的索引存在,在循环执行结束以后,尽管最后i的值变成了a元素总数(例如10)
// 但闭包内部的lockedInIndex值是没有改变,因为他已经执行完毕了
// 所以当点击连接的时候,结果是正确的
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
(function (lockedInIndex) {
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + lockedInIndex);
}, 'false');
})(i);
}