JavaScript:避免对象构造函数中的 'this' 被事件覆盖？

Question

我想不出这个问题的直截了当的标题。我可以用代码更好地解释它:

function Bar() {
	this.string = "something";
	this.event = function(e) {
		console.log("This should say something: " + this.string);
	}
}

var foo = new Bar();

window.addEventListener("mouseover", foo.event);

问题是“this.string”在“this.event”中变为未定义，因为事件监听器更改“this”以引用事件。

我需要一种方法让它打印“某物”。

非常感谢任何帮助!

Answer 1

改用箭头函数，这样内部函数就不会为其 this 获取新的上下文。

function Foo() {
	this.string = "something";
	this.event = (e) => {
		console.log("This should say something: " + this.string);
	}
}

var bar = new Foo();

window.addEventListener("mouseover", bar.event);

另一种选择是将 this.event 函数显式绑定(bind)到实例化对象:

function Foo() {
  this.string = "something";
  this.event = function(e) {
    console.log("This should say something: " + this.string);
  }.bind(this);
}

var bar = new Foo();

window.addEventListener("mouseover", bar.event);

您也可以在分配监听器时绑定(bind)它:

window.addEventListener("mouseover", bar.event.bind(bar));