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

因为在第二个例子中Function Hoisting正在发生。像这样的函数声明提升函数的名称及其定义。

function someFunction(){
  //Some Code
}

通过这样做，JavaScript解释器允许您在源代码中声明它之前使用该函数。

因此，即使您的功能定义出现之后，您仍然可以使用它，因为它已被提升。

但是，函数定义提升仅针对函数声明而不是函数表达式。例如：

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

此功能只能在定义后使用。这就是为什么在第一个例子中，函数不起作用。

您可以在此处了解有关Function Hoisting的更多信息。

Answer 3

第一个是按此顺序执行，

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

因为函数声明也被提升了。