我该如何在事件监听器中引用我的课程

Question

我有一个类，在这个类中，我有一个带回调方法的事件侦听器。

在回调方法中，this将引用侦听器元素。

[我如何获得this引用我的班级？

class Myclass {
	constructor() {
		console.log(this); // Here this return Myclass
		window.addEventListener('click', this.clickListener, false);
	}
	clickListener(e) {
		console.log(this); // Here this return window 
	}
}

var myClass = new Myclass();

Answer 1

您可以使用箭头功能或绑定。

class Myclass {
    constructor() {
        console.log(this); // Here this return Myclass
        window.addEventListener('click', () => {
          this.clickListener();
        });
        
        // with bind window.addEventListener('click', this.clickListener.bind(this), false);
    }
    clickListener(e) {
        console.log(this); // Here this return window 
    }
}

var myClass = new Myclass();

Answer 2

您可以使用Function.prototype.bind()修复此问题：

Function.prototype.bind()

[

constructor() {
   window.addEventListener('click', this.clickListener.bind(this), false);
}

函数创建一个新的绑定函数，这是一个包装原始函数对象的奇异函数对象（ECMAScript 2015中的术语）。