Question

我知道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 = 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

Answer 3

我认为bind不适用于IE＆lt; = 8，所以如果这是必需的，这应该有效：

document.addEventListener("keydown", function (ev) { return inputHandler.onKeyDown(ev); }, false)

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

3 个答案: