js中for循环点击事件（闭包）

最新推荐文章于 2023-05-17 17:16:30 发布

yayaHello雅雅

最新推荐文章于 2023-05-17 17:16:30 发布

阅读量2.8k

点赞数 3

文章标签： js 闭包前端

本文链接：https://blog.csdn.net/sinat_40172076/article/details/87161221

版权

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <title></title>
      <script type="text/javascript">
                function onMyLoad(){
                     var arr = document.getElementsByTagName("p");
                     for(var i = 0; i < arr.length; i++){
                            arr[i].onclick = function(){
                                  alert(i);//5次均输出5
                            }
                     }
                }
       </script>
</head>
<body "onMyLoad()">
          <p>0</p>
          <p>1</p>
          <p>2</p>
          <p>3</p>
          <p>4</p>
</body>
</html>

以上代码期望依次输出0,1,2,3,4，实际却输出5,5,5,5,5，这是因为闭包导致，下来来具体介绍：
for循环是一个外部闭包，依次绑定的点击事件是一个函数实例，也产生了一个闭包域，它引用了外部闭包的变量i，外部闭包域中i的最终值为5，点击事件触发时引用外部闭包变量i（此时i=5），所以输出的值全为5。

解决方案
方法一：增加若干个对应的闭包域空间(采用匿名函数实现)专门用来存储原先需要引用的内容(下标值)，只限于基本类型(基本类型值传递，对象类型引用传递)

for(var i = 0; i<arr.length; i++){
       (function (arg){//这个函数对象有一个本地私有变量arg(形参)，该函数的function scope的closure对象属性有两个引用：arr和i。i的值随外部改变，但是本地的私有变量(形参)arg不会受影响，其值在一开始被调用时就决定了
            arr[i].onclick = function () {//onclick函数实例的function scope的closure对象属性有一个引用arg
                  alert(arg);//只要外部空间的arg不变，这里的引用值就不会改变
            }
       })(i);//立即执行匿名函数，传递下标i(实参)
}

方法二：将下标作为对象属性(name:“i”,value:i的值)添加到每个数组项(p对象)中

for(var i=0; i<arr.length; i++){
       //为当前数组项(当前p对象)添加一个名为i的属性，值为循环体i变量的值
       //此时当前p对象的i属性并不是对循环体的i变量的引用，而是一个独立p对象的属性，属性值在声明的时候就确定了
       arr[i].i = i;
       arr[i].onclick = function (){
              alert(this.i);
       }
}

方法三：增加若干个对应的闭包域空间用来存储下标。新增的匿名闭包空间内完成事件绑定。

//绑定的函数中的function scope中的closure对象的引用arg是指向将其返回的匿名函数的私有变量arg
for(var i = 0; i<arr.length; i++){
      arr[i].onclick = (function(arg){
              return function () {
                     alert(arg);
              }
      })(i);
}

方法四：使用ES6的let关键字

"use strict";
var arr = document.getElementsByTagName("p");
for(var i = 0; i<arr.length; i++){
      let j = i;//块级变量
      arr[i].onclick = function () {
             alert(j);
      }
}

个人推荐后两种方法。