Javascript闭包

最新推荐文章于 2025-06-09 09:53:44 发布

lgd5979

最新推荐文章于 2025-06-09 09:53:44 发布

阅读量541

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript function

本文链接：https://blog.youkuaiyun.com/lgd5979/article/details/7019682

前端专栏收录该内容

17 篇文章

订阅专栏

1、将变量 i 保存给在每个段落对象（p）上

1function 
init1() { 

2  var
pAry = document.getElementsByTagName("p"); 

3  for(
var i=0; i<pAry.length; i++ ) {

4     pAry[i].i = i;

5     pAry[i].onclick =
function() {

6        alert(this.i); 

7     }

8  } 

9}

2、将变量 i 保存在匿名函数自身

1function 
init2() { 

2  var
pAry = document.getElementsByTagName("p"); 

3  for(
var i=0; i<pAry.length; i++ ) {

4   (pAry[i].onclick =
function() {

5        alert(arguments.callee.i);

6    }).i = i;

7  } 

8}

后又想到了三种

3、加一层闭包，i 以函数参数形式传递给内层函数

01function 
init3() { 

02  var
pAry = document.getElementsByTagName("p");

03  for(
var i=0; i<pAry.length; i++ ) {

04   (function(arg){

05       pAry[i].onclick =
function() {

06          alert(arg);

07       };

08   })(i);//调用时参数 

09  } 

10}

4、加一层闭包，i 以局部变量形式传递给内层函数

01function 
init4() { 

02  var
pAry = document.getElementsByTagName("p");

03  for(
var i=0; i<pAry.length; i++ ) { 

04    (function
() { 

05      var
temp = i;//调用时局部变量 

06      pAry[i].onclick =
function() {

07        alert(temp);

08      }

09    })();

10  } 

11}

5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）

01function 
init5() { 

02  var
pAry = document.getElementsByTagName("p");

03  for(
var i=0; i<pAry.length; i++ ) {

04   pAry[i].onclick =
function(arg) {

05       return
function() {//返回一个函数 

06       alert(arg);

07     }

08   }(i);

09  } 

10}

后又发现了两种

6、用Function实现，实际上每产生一个函数实例就会产生一个闭包

1function 
init6() { 

2    var
pAry = document.getElementsByTagName("p");

3    for(
var i=0; i<pAry.length; i++ ) {

4      pAry[i].onclick =
new Function("alert("
+ i + ");");//new一次就产生一个函数实例

5    }

6}

7、用Function实现，注意与6的区别

1function 
init7() { 

2    var
pAry = document.getElementsByTagName("p");

3    for(
var i=0; i<pAry.length; i++ ) {

4         pAry[i].onclick = Function('alert('+i+')');

5    }

6

}