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

В дополнение к данным ответам это также можно сделать с помощью простой локальной переменной.

И как предложено, и при использовании Babel для компиляции, например. это как функция стрелки, это то, что это будет переводить.

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

var foo = new Bar();

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

Answer 2

bind foo с foo.event

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.bind(foo));

Answer 3

Я не знаю, намеренно ли вы хотите избежать этого, но вы можете просто передать анонимную функцию в качестве обработчика события и вызвать foo.event().

Вы можете используйте bind() и функции стрелок, как предлагали другие парни, но вы также можете просто сделать это.

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

var foo = new Bar();

window.addEventListener("mouseover", function() {
  foo.event();
});

Это работает, потому что обработчик события вызывается с this, указывающим на объект Window.Когда foo.event является обработчиком, его this перезаписывается.Однако, если вы вызываете ее из анонимной функции, эта анонимная функция «поглощает» this слушателя, а когда вы вызываете foo.event(), она работает нормально.

Answer 4

Вместо этого используйте функцию стрелки, чтобы внутренняя функция не получила новый контекст для 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 с экземпляром объекта:

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);

Вы также можете привязать его при назначении слушателя:

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