window.onload没有为名为onload的函数触发

Question

今天我遇到了一个奇怪的问题：

当引用一个名为window.onload的函数时，onload似乎没有触发。

我以前从未注意到这一点：

测试1：

window.onload=onload;
function onload(){
  console.log('event fired');
}

测试2：

window.onload=onload2;
function onload2(){
  console.log('event fired');
}

为什么第一个代码不起作用？

Answer 1

Onload是pre-defind / prebuilt javascript函数，你不能覆盖它。它不起作用。

Answer 2

这是因为范围。如果你在第二个例子中遗漏window.，the alert will still fire。在第一个示例中，您将覆盖window.onload函数。

Answer 3

如果你这样做，你将覆盖从javascript构建的onload预定义函数。但是如果你想给你的功能提供名称onload，你可以这样做。

function onload() {
  alert("Page is loaded");
}

<!DOCTYPE html>
<html>
<body onload="onload()">

<h1>Hello World!</h1>

</body>
</html>

Answer 4

这里的问题是在Web浏览器中，window被设置为全局对象。这意味着window.onload和onload指的是同一财产。

console.log(window.onload === onload); // true

所以你基本上做的是

window.onload = window.onload;

这不会改变任何事情。

如果你想要一个具有相同名称的函数，你可以将它放在IIFE（或任何函数中）。在这种情况下，您定义的函数将不会放在全局范围内，因此它不会与现有的window.onload冲突。

(function() {
  window.onload = onload;

  function onload() {
    console.log('event fired');
  }
})();

如果您不一定重视函数名称，则在更改函数名称旁边，还可以将函数直接分配给onload，如下所示：

window.onload = function() {
  console.log('event fired');
};