87,993
社区成员
发帖
与我相关
我的任务
分享js的变量的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keyword" content="布尔教育">
<title>Document</title>
</head>
<body>
<button>红</button>
<button>绿</button>
<button>黄</button>
<script>
var btn=document.getElementsByTagName('button');
for(var j=0;j < 3;j++){
btn[j].onclick = function(){
alert(j);
}
}
</script>
</body>
</html>
提问：以上代码，居然j能打印出3来，莫名奇妙？
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keyword" content="布尔教育">
<title>Document</title>
</head>
<body>
<button>红</button>
<button>绿</button>
<button>黄</button>
<script>
var btn=document.getElementsByTagName('button');
for(var j=0;j < 3;j++){
btn[j].onclick = function(){
alert(j);
}
}
</script>
</body>
</html>
提问：以上代码，居然j能打印出3来，莫名奇妙？
...全文
请发表友善的回复…
发表回复
天际的海浪 2017-02-08
- 打赏
- 举报
es6版本有局部作用域
for(let j=0;j < 3;j++){
forwardNow 2017-02-08
- 打赏
- 举报
JavaScript没有局部作用域的概念，
你那段代码等价于：
<script>
var btn = document.getElementsByTagName( 'button' );
var j;
for( j = 0; j < 3; j++ ) {
btn[ j ].onclick = function(){
alert( j );
};
}
</script>var btn = document.getElementsByTagName( 'button' );
var j;
for( j = 0; j < 3; j++ ) {
+function( _j ){
btn[ _j ].onclick = function(){
alert( _j );
};
} ( j );
}天际的海浪 2017-02-08
- 打赏
- 举报
事件执行时，for循环早就结束了，这个时候i已经是最大值加1了。
解决方法是用闭包把每次循环i的值保存起来
圭宁的小小前端 2017-02-08
- 打赏
- 举报
楼主这块代码还没出现闭包，只是如果想要点击按钮依次显示123就要用到闭包来处理。
圭宁的小小前端 2017-02-08
- 打赏
- 举报
楼主这块代码还没出现闭包，只是如果想要点击按钮一次显示123就要用到闭包来处理。
Jacie_chao 2017-02-08
- 打赏
- 举报
以上代码执行结果就是3，没有错。
原因在于for循环中变量i值为3时跳出循环，所以最终j值为3，按钮的onclick事件方法中，j的值随着for循环的执行在改变。所以只能打印出最终值3
yibey 2017-02-08
- 打赏
- 举报
楼上去理解一下闭包就知道了。JS是顺序执行的，所以当你绑定完时间后j=3
