function()内会改变作用域

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量、作用域</title>
<style type="text/css">
button{
display:inline-block;
background:#3cb371;;
width:40px;
height:25px;
border:1px solid red;
border-radius:5px;
margin:0 0 0 5px;
}
</style>
</head>
<body>
<button id="0">btn1</button>
<button id="1">btn2</button>
<button id="2">btn3</button>
<script type="text/javascript">

//要想弹出0,1,2;
var btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++)
{
btns[i].onclick=function(){
i=this.id;
alert(i);
}
}

</script>
</body>
</html>

web_東 2017-11-24

源自：JavaScript变量、作用域 4-5 选择题

收起

5回答

貂爷回答被采纳获得+3积分 2017-11-25 13:23:46

你想问的是什么？

收起回答

web_東提问者 #1

非常感谢！有没有其他写法，达到同样的效果？

2017-11-26 00:21:33
貂爷回复提问者 web_東 #2

<script type="text/javascript"> //要想弹出0,1,2; var btns=document.getElementsByTagName("button"); for(var i=0;i<btns.length;i++){ (function(a){ btns[a].onclick=function(){ alert(a); }; })(i); } </script> 这样写，你应该更容易理解。你首先要了解闭包，了解函数的参数，了解自执行。那么一个新的问题，这里为什么要用到闭包，并且自执行？因为闭包可以开辟一个新的空间来储存数据。自执行可以保存循环的值。那么这样做就可以把for循环的i的值给保存在闭包里。我们在自执行调用的那个括号里给了一个实参i，这个i就是for循环的i，每一次循环，它都会被传递进了函数中，函数中有个形参a去接收，a的值就等于i的值。函数中的内容大家都能看懂，这里就不解释了。说的再直白些，我们把for循环中的自执行闭包就看做for循环中有个console.log(i);每一次循环，控制台是不是都会输出i的值。前面的(function(...){...})这个闭包就等同于console.log。后面的(i)就刚好等同于(i)，那么是不是每一次循环i都会改变，(i)在闭包后面是不是调用函数，往里面传个参数i，那么0，1，2是不是就被传进闭包中去了？然后闭包中的a是不是刚好接受了这个i的0，1，2。

2017-12-06 10:59:05

貂爷 2017-12-06 11:00:08

<!DOCTYPE html>

<html>

<head>

</head>

<body>

//要想弹出0,1,2;

var btns=document.getElementsByTagName("button");

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

(function(a){

btns[a].onclick=function(){

alert(a);

};

})(i);

}

</script>

</body>

</html>

这样写，你应该更容易理解。你首先要了解闭包，了解函数的参数，了解自执行。

那么一个新的问题，这里为什么要用到闭包，并且自执行？

因为闭包可以开辟一个新的空间来储存数据。自执行可以保存传递循环的值。

这样做就可以把for循环的i的值给保存在闭包里。

我们在自执行调用的那个括号里给了一个实参i，这个i就是for循环的i，每一次循环，它都会被传递进了函数中，函数中有个形参a去接收，a的值就等于i的值。函数中的内容大家都能看懂，这里就不解释了。

说的再直白些，我们把for循环中的自执行闭包就看做for循环中有个console.log(i);

每一次循环，控制台是不是都会输出i的值。

前面的(function(...){...})这个闭包就等同于console.log。后面的(i)就刚好等同于(i)。

那么是不是每一次循环i都会改变，(i)在闭包后面就是调用函数，往里面传个参数i，那么0，1，2是不是就被传进闭包中去了？然后闭包中的a是不是刚好接收了这个i的0，1，2。

收起回答

貂爷 #1

当你for循环执行过，这个闭包就被循环了三遍，在内存中就已经有了i=0,i=1,i=2 就有了 (function(0){ btns[0].onclick=function(){ alert(0); }; })(0); (function(1){ btns[1].onclick=function(){ alert(1); }; })(1); (function(2){ btns[2].onclick=function(){ alert(2); }; })(2); 你点击哪个按钮，就会弹出相应的值

2017-12-06 11:09:23

貂爷 2017-12-05 17:37:35

给你们展示一个不用循环的无聊方法。。。。

全局i和局部i。。。。

//要想弹出1,2,3;

var btns=document.getElementsByTagName("button");

var i = 0;

btns[i].onclick = function num(){

var i = 0;

alert(i+1);

i++;

btns[i].onclick = function(){

alert(i+1);

i++;

btns[i].onclick = function(){

alert(i+1);

}

</script>

收起回答

提问者 web_東 2017-11-30 00:52:45

(function(i){

btns[i].onclick=function(){

alert(i);

}

})(i)

收起回答

小于飞飞 #1

这是立即执行函数的写法。

2017-11-30 10:50:15
提问者 web_東 #2

老师，还是不懂？

2017-11-30 21:55:32
小于飞飞回复提问者 web_東 #3

函数声明：function fnName () {…}; ，执行 fnName () ，所以（function（）{}）（）；通俗的理解这种写法就是定义和执行在一起，即立即执行函数，向后学习在函数课程中有该知识的讲解，加油。

2017-12-01 10:08:29