这个问题在这里已有答案:
var test = {
array: [1,2,3,4],
events: function() {
document.getElementById("button").addEventListener("click", this.show);
},
show: function() {
console.log(this.array);
}
}
test.events();
这个对象,当我单击一个按钮时,将调用事件方法中的addEventListener并调用show方法。然后show方法显示我的数组,但它只显示未定义。怎么解决?
问题的原因是this
的行为实际上与您的预期不同。当执行click事件处理程序(即this.show
)时,绑定到this
的值不再是test
对象。我无法解释它比凯尔辛普森的“你不了解JS:这个和对象原型”中的very good chapter更好。
在您的特定情况下,您必须确保将绑定到this
的值显式设置为test
对象。您可以通过多种方式完成此操作:
element.addEventListener('click', () => this.show());
Function.prototype.bind()
显式绑定this
值:
element.addEventListener('click', this.show.bind(this) );