Question

代码段说明了一切。我有一个类，并在其构造函数中声明其变量。该变量在构造函数内部以及当我创建该类的新实例时都可以正常工作，但是该变量在eventHandler中显示为未定义状态。

"use strict";

class InputEngine{

    __mouseDown(event){
		alert(this.mouse); //doesn't work here
	};
	
	constructor(){
	    this.mouse =3;
	    window.addEventListener( 'mousedown', this.__mouseDown );
	}
}

let a = new InputEngine();
alert(a.mouse); //works here

<!DOCTYPE html>
<html>
<body>
<p>Click your mouse.</p>
</body>
</html>

Answer 1

关键字this根据JavaScript运行时正在执行的当前“操作上下文”来更改其引用的内容。这意味着，当事件发生时，事件处理程序将在该事件的上下文中运行-因此this引用事件对象，而不是碰巧包含事件处理程序的对象。

您有两种选择。最直接的方法是使用bind将函数的上下文更改为包含该函数的对象，这是因为您的代码对事件不执行任何操作。

"use strict";

class InputEngine {

  __mouseDown(event) {
    console.log(event.type); // event is still available
    alert(this.mouse); //works
  };

  constructor() {
    this.mouse = 3;
    window.addEventListener('mousedown', this.__mouseDown.bind(this));
  }
}

let a = new InputEngine();
alert(a.mouse); //works here

<!DOCTYPE html>
<html>

<body>
  <p>Click your mouse.</p>
</body>

</html>

对象的变量在事件处理程序中未定义

1 个答案: