ES6类 - 从事件处理程序中调用方法

Question

我正在尝试为当前项目的交互式日历编写ES6类.

该类看起来类似于以下内容:

class Calendar {

constructor (s) {

    this.eventButtons = s.eventButtons;
    this.eventButtons.forEach(button => button.addEventListener('click', this.method1);
    this.eventBoxes = s.eventBoxes;


method1 (e) {
    e.preventDefault();
    this.method2(e.target.href);
}

method2 (url) {
    console.log(url);
}

}


export default Calendar;

我知道'this'关键字的上下文已从构造函数更改为已在method1函数中单击的按钮.但是我不知道如何将按钮和构造函数的上下文保持在同一个函数中.我尝试将按钮事件侦听器代码更改为以下内容:

this.eventButtons.forEach(button => button.addEventListener('click', this.method1).bind(this);

但这只是将'this'关键字的上下文切换到构造函数而不是按钮.我需要在我的功能中使用它们.

有任何想法吗？我希望这是一个非常普遍的问题？

Answer 1

您可以创建一个发送事件和按钮的闭包.闭包将保持此上下文并发送按钮

button => button.addEventListener('click', event => this.method1(event, button))

Answer 2

由于您使用的是ES6,您是否尝试过使用箭头功能？

箭头函数表达式具有比函数表达式更短的语法,并且不绑定它自己的this,arguments,super或new.target.这些函数表达式最适合非方法函数,不能用作构造函数.

method1 = (e) => {
    e.preventDefault();
    this.method2(e.target.href);
}