如何使"this"不是指一个事件被调用的元素？

Question

我知道Javascript中没有类,为方便起见,我将构造函数称为类.

我正在InputHandler用Javascript 调用一个类.它有一个名为的方法onMouseDown,它将它注册为一个事件处理程序,如下所示:

Irenic.InputHandler.prototype.attach = function()
{
    var inputHandler = this; //Get the instance of InputHandler

    document.addEventListener("keydown", inputHandler.onKeyDown, false); //Concentrate on this, but the question applies to all of these.
    document.addEventListener("keyup", inputHandler.onKeyUp, false);
    document.addEventListener("mousemove", inputHandler.onMouseMove, false);
    document.addEventListener("mouseup", inputHandler.onMouseUp, false);
    document.addEventListener("mousedown", inputHandler.onMouseDown, false);
}

(Irenic是我正在构建的引擎的名称,它也是一个包含所有这些类的全局对象.)

该inputHandler.onMouseDown方法如下所示:

Irenic.InputHandler.prototype.onMouseDown = function(event){var inputHandler = this; //遗憾地,这是指文档,而不是InputHandler的实例

console.log(inputHandler); //Logs #document

if (event.button == 0)
{
    inputHandler.mouse.lmb = true;
}

if (event.button == 1)
{
    inputHandler.mouse.wheel = true;
}

if (event.button == 2)
{
    inputHandler.mouse.rmb = true;
}

}

正如我在评论中所说,this关键字指的是事件触发的元素.我显然不希望这样:那么如何让它引用一个实例InputLoader呢？

Answer 1

使用Function.prototype.bind锁定功能的情况下:

inputHandler.onKeyDown.bind(inputHandler)

PS.使用switch,或至少else if代替多个if构造.其中只有一个是真的.

Answer 2

在构造函数中,将实例的方法绑定到该实例:

function InputHandler() {
    this.onKeyDown = this.onKeyDown.bind(this);
    this.onKeyUp = this.onKeyUp.bind(this);
    this.onMouseMove = this.onMouseMove.bind(this);
    this.onMouseUp = this.onMouseUp.bind(this);
    this.onMouseDown = this.onMouseDown.bind(this);
}

这样,实例一旦构建就准备好了.

看到 Function#bind