构造函数中用addEventListener添加事件函数怎么改变this指向和传参

在构造函数中的方法中this指向的是实例化对象，但是当我们在使用elem.addEventListener("evtType",evtHandler)添加处理事件的时候，事件处理函数evtHandler()的this指向会改变成事件源elem，这时我们就不能用this调用构造函数的方法了。

改变this指向可以用箭头函数，bind和call/apply，其中bind比较特殊，和后二者不同，bind中不额外加()操作符，就不会立即函数，并且可以传参。当我们既要使用事件源elem又要通过this调用构造函数的方法时，bind就能很好的帮我们解决这个问题。
需要注意的是：bind是ES5中的方法，不兼容ie8。

那么，bind具体怎么使用呢？看下面一个加载图片的案例，我们创建一个image，加载完第一张图片后再加载下一张，我们给image监听load事件，在load处理函数中，我们要调用构造函数中的图片地址imgSrcList，但是这个时候this指向的是事件源image。在这个案例中我们既要通过this使用构造函数里面的属性和方法，又要设置事件源image的样式，就可以通过bind来实现。

image.addEventListener("load", this.loadHandler.bind(this指向,实参1,实参2,实参3));括号里第一个是事件函数中的this指向，后面接着参数，可以是一个或者多个；
而loadlHandler声明时的语法是这样的loadHandler(形参1,形参2,形参3,e)，注意形参要跟实参一一对应，形参后面的e是事件。

本例中我们把事件源image作为参数传入，image.addEventListener("load", this.LoadHandler.bind(this, image);
LoadHandler(img,e)(){console.log(e.target===img);}调用发现为true，说明实参image传递给了形参img，e就是事件，事件源e.target就是image，下面设置image的样式除了用img.style也可以使用e.target.style赋值。打印console.log(this,img,e); 发现this指向已经改变，指向了构造函数的实例化对象。

class LoadImage {
    imgWidth = 310
    imgHeight = 220
    imgList = []
    constructor(imgSrcList) {
      this.imgSrcList = imgSrcList
      // 加载图片
      this.loadImage()
    }
    loadImage() {
      var image = new Image();
      image.index = 0;
      image.addEventListener("load", this.loadHandler.bind(this,image));
      image.src = imgSrcList[image.index];
    }
    loadHandler(img,e) {
        console.log(e.target===img);
        console.log(this,img,a,e); 
        img.index++;
        var m = img.cloneNode(false);
        m.style.width = this.imgWidth + "px";
        m.style.height = this.imgHeight + "px";
        this.imgList.push(m);
        if (img.index > this.imgSrcList.length - 1) {
          img.removeEventListener("load", this.LoadHandler)
          return
        }
        img.src = this.imgSrcList[img.index];
      }
  }
  // 创建实例化对象
  var imgSrcList = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg", "./images/4.jpg", "./images/5.jpg", "./images/6.jpg", "./images/7.jpg"]
  var a=new LoadImage(imgSrcList)

最后编辑于：2020.06.12 08:42:21