Функция внутри прототип не работает

Question

OnKeyDown функция не вызывается, когда KeyDown событие вызывается, используя следующий код:

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

It фактически исполняется как:

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-код так, как он будет выполняться. Это помогает предотвратить ошибку такого порядка операций.

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.