javascript - 如何使“this”不涉及事件被调用的元素？

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

我正在用Javascript创建一个名为InputHandler的类。它有一个称为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 =函数（事件）
{
    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的实例？

最佳答案

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

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

关于javascript - 如何使“this”不涉及事件被调用的元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11285112/