Question

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方法显示我的数组，但它只显示未定义。如何解决？

Answer 1

问题的原因是this的行为实际上与您的预期不同。当执行click事件处理程序（即this.show）时，绑定到this的值不再是test对象。我无法解释它比凯尔辛普森的<{3>} 你不知道JS：这个＆amp;对象原型`。

在您的特定情况下，您必须确保将绑定到this的值显式设置为test对象。您可以通过多种方式实现这一目标：

将其包装到另一个函数中并显式调用实际的回调函数：
```
element.addEventListener('click', () => this.show());
```

使用very good chapter显式绑定this值：

element.addEventListener('click', this.show.bind(this) );

javascript：如何使用addEventListener访问方法内的对象属性表单

1 个答案: