原型內部的功能不起作用

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時，它是未定義的。