在構(gòu)造函數(shù)中的方法中this指向的是實例化對象祟峦,但是當我們在使用elem.addEventListener("evtType",evtHandler)添加處理事件的時候,事件處理函數(shù)evtHandler()的this指向會改變成事件源elem膊升,這時我們就不能用this調(diào)用構(gòu)造函數(shù)的方法了示血。
改變this指向可以用箭頭函數(shù)右莱,bind和call/apply,其中bind比較特殊氏堤,和后二者不同沙绝,bind中不額外加()操作符,就不會立即函數(shù)鼠锈,并且可以傳參闪檬。當我們既要使用事件源elem又要通過this調(diào)用構(gòu)造函數(shù)的方法時,bind就能很好的幫我們解決這個問題购笆。
需要注意的是:bind是ES5中的方法粗悯,不兼容ie8。
那么同欠,bind具體怎么使用呢样傍?看下面一個加載圖片的案例横缔,我們創(chuàng)建一個image,加載完第一張圖片后再加載下一張衫哥,我們給image監(jiān)聽load事件茎刚,在load處理函數(shù)中,我們要調(diào)用構(gòu)造函數(shù)中的圖片地址imgSrcList撤逢,但是這個時候this指向的是事件源image膛锭。在這個案例中我們既要通過this使用構(gòu)造函數(shù)里面的屬性和方法,又要設(shè)置事件源image的樣式笛质,就可以通過bind來實現(xiàn)泉沾。
image.addEventListener("load", this.loadHandler.bind(this指向,實參1,實參2,實參3));括號里第一個是事件函數(shù)中的this指向,后面接著參數(shù)妇押,可以是一個或者多個跷究;
而loadlHandler聲明時的語法是這樣的loadHandler(形參1,形參2,形參3,e),注意形參要跟實參一一對應(yīng)敲霍,形參后面的e是事件俊马。
本例中我們把事件源image作為參數(shù)傳入,image.addEventListener("load", this.LoadHandler.bind(this, image);
LoadHandler(img,e)(){console.log(e.target===img);}調(diào)用發(fā)現(xiàn)為true肩杈,說明實參image傳遞給了形參img柴我,e就是事件,事件源e.target就是image扩然,下面設(shè)置image的樣式除了用img.style也可以使用e.target.style賦值艘儒。打印console.log(this,img,e); 發(fā)現(xiàn)this指向已經(jīng)改變,指向了構(gòu)造函數(shù)的實例化對象夫偶。
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];
}
}
// 創(chuàng)建實例化對象
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)