深入理解JavaScript的閉包特性
有個(gè)網(wǎng)友問了個(gè)問題，如下的html，為什么點(diǎn)擊所有的段落p輸出都是5，而不是alert出對應(yīng)的0，1，2，3，4。
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>閉包演示</title>
- <style type="text/css">
- p {background:gold;}
- </style>
- <script type="text/javascript">
- function init() {
- var pAry = document.getElementsByTagName("p");
- for( var i=0; i<pAry.length; i++ ) {
- pAry[i].onclick = function() {
- alert(i);
- }
- }
- }
- </script>
- </head>
- <body onload="init();">
- <p>產(chǎn)品 0</p>
- <p>產(chǎn)品 1</p>
- <p>產(chǎn)品 2</p>
- <p>產(chǎn)品 3</p>
- <p>產(chǎn)品 4</p>
- </body>
- </html>
以上場景是初學(xué)者經(jīng)常碰到的。即獲取HTML元素集合，循環(huán)給元素添加事件。在事件響應(yīng)函數(shù)中(event handler)獲取對應(yīng)的索引。但每次獲取的都是最后一次循環(huán)的索引。
原因是初學(xué)者并未理解JavaScript的閉包特性。通過element.onclick=function(){alert(i);}方式給元素添加點(diǎn)擊事件。響應(yīng)函數(shù)function(){alert(i);}中的 i 并非每次循環(huán)時(shí)對應(yīng)的 i(如0，1，2，3，4)而是循環(huán)后最后 i 的值5。 或者說循環(huán)時(shí)響應(yīng)函數(shù)內(nèi)并未能保存對應(yīng)的值 i，而是最后一次i++的值5。
了解了原因，摸索出了很多解決辦法(純粹是興趣)。最先想到的前兩種
1、將變量 i 保存給在每個(gè)段落對象(p)上
- function init1() {
- var pAry = document.getElementsByTagName("p");
- for( var i=0; i<pAry.length; i++ ) {
- pAry[i].i = i;
- pAry[i].onclick = function() {
- alert(this.i);
- }
- }
- }
2、將變量 i 保存在匿名函數(shù)自身
- function init2() {
- var pAry = document.getElementsByTagName("p");
- for( var i=0; i<pAry.length; i++ ) {
- (pAry[i].onclick = function() {
- alert(arguments.callee.i);
- }).i = i;
- }
- }
后又想到了三種
3、加一層閉包，i 以函數(shù)參數(shù)形式傳遞給內(nèi)層函數(shù)
- function init3() {
- var pAry = document.getElementsByTagName("p");
- for( var i=0; i<pAry.length; i++ ) {
- (function(arg){
- pAry[i].onclick = function() {
- alert(arg);
- };
- })(i);//調(diào)用時(shí)參數(shù)
- }
- }
4、加一層閉包，i 以局部變量形式傳遞給內(nèi)層函數(shù)
- function init4() {
- var pAry = document.getElementsByTagName("p");
- for( var i=0; i<pAry.length; i++ ) {
- (function () {
- var temp = i;//調(diào)用時(shí)局部變量
- pAry[i].onclick = function() {
- alert(temp);
- }
- })();
- }
- }
5、加一層閉包，返回一個(gè)函數(shù)作為響應(yīng)事件(注意與3的細(xì)微區(qū)別)
- function init5() {
- var pAry = document.getElementsByTagName("p");
- for( var i=0; i<pAry.length; i++ ) {
- pAry[i].onclick = function(arg) {
- return function() {//返回一個(gè)函數(shù)
- alert(arg);
- }
- }(i);
- }
- }
后又發(fā)現(xiàn)了兩種
6、用Function實(shí)現(xiàn)，實(shí)際上每產(chǎn)生一個(gè)函數(shù)實(shí)例就會產(chǎn)生一個(gè)閉包
- function init6() {
- var pAry = document.getElementsByTagName("p");
- for( var i=0; i<pAry.length; i++ ) {
- pAry[i].onclick = new Function("alert(" + i + ");");//new一次就產(chǎn)生一個(gè)函數(shù)實(shí)例
- }
- }
7、用Function實(shí)現(xiàn)，注意與6的區(qū)別
- function init7() {
- var pAry = document.getElementsByTagName("p");
- for( var i=0; i<pAry.length; i++ ) {
- pAry[i].onclick = Function('alert('+i+')');
- }
- }
