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

Question

使用以下代码触发 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 语法不能完成工作的任何想法？提前致谢。

Answer 1

您的操作顺序是 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!");
    };
}

如果您改用函数声明

_I.E.

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 代码通常更安全。这有助于防止此类操作顺序错误。