слушатель событий будет вызывать функцию, но не переменную назначенную функцию

Question

Задача - вызвать функцию каждый раз, когда браузер изменяет размер.

Неправильное решение:

window.addEventListener("resize", resize); 

var resize = function() { 
    console.log("message"); 
}; 

Правильное решение:

window.addEventListener("resize", resize); 

function resize() { 
    console.log("message"); 
}; 

Вопрос - почему первый пример не работает?

Answer 1

Объявлены объявления функций.

Назначения не поднимаются.

С window.addEventListener("resize", resize); появляется перед тем вы = function ... значение resize еще undefined.

Это будет работать:

var resize = function() { 
    console.log("message"); 
}; 

window.addEventListener("resize", resize); 

Answer 2

Первый в этом порядке выполнен,

var resize; // undefined 
window.addEventListener("resize", resize); 

resize = function() { 
    console.log("message"); 
}; 

значение resize в то время, когда EventListener установлено, undefined.

Переменная становится hoisted, что означает, переменная объявлена, но не имеет задание.

Второй в этом порядке выполнен,

function resize() { 
    console.log("message"); 
} 

window.addEventListener("resize", resize); 

, потому что объявления функций водрузили тоже.

Answer 3

Потому что во втором примере Function Hoisting происходит. Объявление функции, подобное этому, вызывает имя функции и ее определение.

function someFunction(){ 
    //Some Code 
} 

Делая это, интерпретатор JavaScript позволяет использовать функцию до точки, в которой она была объявлена ​​в исходном коде.

Таким образом, даже если ваше определение функции приходит после того, как вы все еще можете использовать его, как он поднимается.

Однако определение определения функции происходит только для объявлений функций, а не для выражений функций. Пример:

var definitionNotHoisted = function() { 
    console.log("Definition not hoisted!"); 
}; 

Эта функция может использоваться только после ее определения. Вот почему в первом примере функция не работает.

Вы можете узнать больше о Function Hoisting здесь.