javascript - 原型(prototype)内部的功能不起作用

使用以下代码触发keydown事件时，不会调用onKeyDown函数：

Game.prototype.setEventHandlers = function() {
    // Keyboard events
    window.addEventListener("keydown", onKeyDown, false);
    window.addEventListener("downup", onKeyUp, false);

    // Mouse events
    window.addEventListener("mousemove", onMouseMove, false);
    window.addEventListener("click", onMouseClick, false);

    // Window events
    window.addEventListener("resize", onWindowResize, false);

    var onKeyDown = function(e) {
        alert("HI!");
    };
}

如果我将其替换为传统的函数语法，则可以正常工作：

function onKeyDown() {
    alert("HI!");
}

关于为什么var onKeyDown = function语法无法完成工作的任何想法？提前致谢。

最佳答案

您的操作顺序是window.addEventListener调用失败的原因。

您永远不会在第一个版本中传递onKeyDown函数，而是传递onKeyDown变量的值，该变量在调用时为undefined。

“传统”版本起作用的原因是由于所谓的“吊装”。

var和function声明被提升到所写函数的顶部。

即使您可能将代码编写为：

出于演示目的而缩短

Game.prototype.setEventHandlers = function() {
    // Keyboard events
    window.addEventListener("keydown", onKeyDown, false);

    var onKeyDown = function(e) {
        alert("HI!");
    };
}

它实际执行为：

Game.prototype.setEventHandlers = function() {
    var onKeyDown;

    // Keyboard events
    window.addEventListener("keydown", onKeyDown, false);

    onKeyDown = function(e) {
        alert("HI!");
    };
}

如果要改用函数声明

即

Game.prototype.setEventHandlers = function() {
    // Keyboard events
    window.addEventListener("keydown", onKeyDown, false);

    function onKeyDown(e) {
        alert("HI!");
    }
}

该代码实际执行为：

Game.prototype.setEventHandlers = function() {
    function onKeyDown(e) {
        alert("HI!");
    }

    // Keyboard events
    window.addEventListener("keydown", onKeyDown, false);
}

诸如jslint之类的代码清除工具将标记这些类型的不一致。通常，以将要执行的方式编写JS代码更为安全。这有助于防止这种操作顺序错误。

关于javascript - 原型(prototype)内部的功能不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21861504/