在构造函数中的方法中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)
网友评论