javascript:如何使用addEventListener [duplicate]访问方法内的对象属性表单

问题描述 投票:0回答:1
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方法显示我的数组,但它只显示未定义。怎么解决?

javascript
1个回答
0
投票

问题的原因是this的行为实际上与您的预期不同。当执行click事件处理程序(即this.show)时,绑定到this的值不再是test对象。我无法解释它比凯尔辛普森的“你不了解JS:这个和对象原型”中的very good chapter更好。

在您的特定情况下,您必须确保将绑定到this的值显式设置为test对象。您可以通过多种方式完成此操作:

  1. 将其包装在另一个函数中并显式调用实际的回调函数: element.addEventListener('click', () => this.show());
  2. 使用Function.prototype.bind()显式绑定this值: element.addEventListener('click', this.show.bind(this) );
© www.soinside.com 2019 - 2024. All rights reserved.