原型内部的功能不起作用

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!"); }; } 

如果要改用函数声明

_IE浏览器

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

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

该代码实际执行为：

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

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

Answer 2

关于为什么var onKeyDown =函数语法无法完成工作的任何想法？

目前，您将onKeyDown传递给addEventListener ，它还没有值。 在调用addEventListener之后，值的分配在函数的末尾进行。

将作业移到顶部：

Game.prototype.setEventHandlers = function() {

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

    // 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);

}

Answer 3

函数声明（ function name() {}样式）的变量和值都放在作用域的顶部，但是分配给变量的匿名函数（变量var fn = function() {}样式）则没有。 在您的代码中，将悬挂变量声明，而不是将函数分配给该变量。

因此，您的代码实际上是这样解析的：

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

  window.addEventListener("keydown", onKeyDown, false);

  onKeyDown = function(e) { ... };
};

因此，当您将onKeyDown传递给addEventListener时，它是未定义的。