我一直在使用具有 ES6 某些功能的舊 vanilla javascript (es5)，現在我正在做一些事情，所以我創建了一個類來在網頁中顯示我的 html 內容，然后添加一個點擊
我的班級是：
class Field {
constructor(key, label, status, isUnsubscribed){
this.key = key;
this.label = label;
this.status = status;
this.isUnsubscribed = isUnsubscribed;
}
// want this to be executed on click
test(){
alert(this.key);
}
returnHTMLField(){
// Global Container
let fieldContainer = document.createElement("div");
fieldContainer.addEventListener("click", function(){
// issue here, this return the element itself, which makes sense
this.test()
})
return fieldContainer;
}
}
所以基本上我正在創建一個物件，其中包含將組件添加到 DOM 的方法，這在另一個類的幫助下作業正常，但是現在每當我單擊時，我都希望執行測驗函式，但是eventListener 操作中的這個不是t回傳物件狀態，它回傳組件（DOM元素），這是正常行為，我不知道如何在事件偵聽器中執行測驗函式..
任何幫助將非常感激
uj5u.com熱心網友回復：
嘗試使用箭頭功能
fieldContainer.addEventListener("click", ()=>{ this.test() )
uj5u.com熱心網友回復：
您可以使用arrow函式將 系結this到父作用域，而不是創建單獨的lexical作用域。
class Field {
constructor(key, label, status, isUnsubscribed){
this.key = key;
this.label = label;
this.status = status;
this.isUnsubscribed = isUnsubscribed;
}
// want this to be executed on click
test(){
alert(this.key);
}
returnHTMLField(){
// Global Container
let fieldContainer = document.createElement("div");
fieldContainer.addEventListener("click",() => {
// issue here, this return the element itself, which makes sense
this.test()
})
return fieldContainer;
}
}
uj5u.com熱心網友回復：
所以，如果你更喜歡 ES5，那就是.bind(this)它。
class Field {
constructor(opts){
Object.assign(this, opts); // Bonus ES6 code here
}
// want this to be executed on click
test(){
alert(this.key);
}
returnHTMLField(){
// Global Container
let fieldContainer = document.createElement("div");
fieldContainer.addEventListener("click", function(){
// issue here, this return the element itself, which makes sense
this.test()
}.bind(this)) // <--- HERE
return fieldContainer;
}
}
var f = new Field({ key : 10
, label : "Test"
, status : "OK"
, isUnsubscribed: false
});
console.log(f.returnHTMLField().dispatchEvent(new Event("click")));轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385762.html
標籤：javascript 哎呀 ecmascript-6 点击监听器
下一篇：模板函式忽略繼承類的成員