关于javascript中window.onload的困惑

Question

我有一段 javascript 代码。而且我不是很明白。 你能逐行解释吗？非常感谢。

 function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

这就是我的想法：

 function addLoadEvent(func) { //define a function with a parameter 'func'
  var oldonload = window.onload; //assign window.onload event to variable oldonload
  if (typeof window.onload != 'function') { //if window.onload is not a function, then...
    window.onload = func; //assign 'func' to window.onload event. what does func mean?
  } else {             //if window.onlad is a function
    window.onload = function() {  //don't understand
      oldonload();  //call function oldonload()
      func();       //call function func()
    }
  }
}

困惑：

window.onload 已经是一个事件了，为什么还要使用 typeof？

函数 addLoadEvent(func) , window.onload = func, func()。这些功能有什么区别？

很抱歉发布了一个新手问题。但是感谢任何给我一些指导的人？

编辑：

这是 Simon Willison 改进的原始代码。

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

Answer 1

它非常简单。

您检查是否已经注册了 onload 函数。

如果没有， 1.将传入的函数赋值给onload

如果有的话， 创建一个新的 onload 函数，它将：

1. 调用旧的 onload 函数
2. 调用你传入的“func”

和：

window.onload 已经是一个事件，并且 为什么要使用 typeof？

window.onload 可以是一个函数，但如果没有设置，它将是“未定义”，我们需要检查它的类型以查看它是什么。

函数 addLoadEvent(func) , window.onload = 函数，函数（）。什么是 这些功能的区别？

函数是javascript中的一个变量。所以你可以将函数称为

功能

你可以这样称呼它

函数()

在您的情况下：函数 addLoadEvent(func) 是当前函数定义。它需要一个参数，并且该参数应该是一个函数

window.onload = 函数 将你传入的函数分配给 onload 事件

函数()

调用你传入的函数

这里是逐行修正：

function addLoadEvent(func) { //define a new function called addLoadEvent which takes in one param which should be function
  var oldonload = window.onload; //assign window.onload event to variable oldonload
  if (typeof window.onload != 'function') { //if window.onload is not a function,  and thus has never been defined before elsewhere
    window.onload = func; //assign 'func' to window.onload event. set the function you passed in as the onload function
  } else {             //if window.onlad is a function - thus already defined, we dont want to overwrite it so we will..
    window.onload = function() {  //define a new onload function that does the following:
      oldonload();  //do whatever the old onload function did
      func();       //and then do whatever your new passed in function does
    }
  }
}

//then call it like this: 
addLoadEvent(function() {
  alert("hi there");
});
addLoadEvent(function() {
  alert("this will be alerted after hi there");
});
//or like this:
var fn = function(){
 alert("this will be the last thing alerted");
};
addLoadEvent(fn);

Answer 2

你能逐行解释吗？

我太懒了，但简而言之：

• 将 onload 复制到另一个变量
• 如果 onload 是一个函数，则将其设置为一个新函数，该函数运行传递的函数，然后运行旧函数
• 如果不是，只需让传递的函数在加载时运行

window.onload = 函数； // 将 'func' 分配给 window.onload 事件。 func是什么意思？

func 是定义为函数的第一个参数的变量（函数 addLoadEvent(func)）。函数是 JavaScript 中的第一类对象——你可以传递它们，就像任何其他变量一样。

window.onload 已经是一个事件了，为什么还要使用 typeof？

这不是一个事件。它是一个可能是函数或未定义的属性。事件是导致该函数运行的“发生的事情”。

函数 addLoadEvent(func) , window.onload = func, func()。这些功能有什么区别？

第一个定义了一个名为 addLoadEvent 的函数。第二个将一个名为 func 的函数分配给 onload。第三个调用一个名为 func 的函数。

顺便说一句，不要使用这个。使用addEventListener/attachEvent 或跨浏览器标准化它们的库，例如YUI 或jQuery。

Answer 3

定义的函数addLoadEvent(func) 旨在为已经存在的window.onLoad 事件添加一个附加函数。因此，它做的第一件事就是检查window.onLoad 事件是否 是一个函数。如果没有，它只是将传入的函数分配给window.onLoad 事件。

但是，如果 window.onload 已经定义，它将重置它以调用原始的 onload 函数以及您传入的函数 (func)。

您可以像这样使用它来将您自己的事件添加到“堆栈”中：

addLoadEvent(function() {
  alert('Hello! I run after the original window.onload event if it exists!');
});

这会将一个匿名函数传递给 addLoadEvent 函数。这就是上面代码中window.onload = function() { ... } 中发生的情况。您也可以预先定义函数并像这样传递它：

var myOnloadEvent = function() {
  alert('Hello! I run after the original window.onload event if it exists!');
};

addLoadEvent(myOnloadEvent);

Answer 4

在 javascript 中，“函数”是变量可以采用的原始变量类型。 Javascript 也是松散类型的，所以变量的值取决于最后分配给它的东西。 “事件”只是窗口对象的一个​​成员变量。因此，您可以将其分配给您喜欢的任何内容。如果它从未被分配给任何东西，它将采用 javascipt 中“未定义”的原始值。所以检查：

if (typeof window.onload != 'function') {

确实在检查 window.onload 事件处理程序是否已经定义。

如果尚未定义，则此函数将 func 分配给 window.onload 事件处理程序（即 func 将在窗口加载时被调用）。

如果之前已定义，则此函数将创建一个新函数，该函数调用现有的 onload 处理程序，然后在窗口加载时调用 func。此示例还使用了名为“closure”的 javascript 属性/语言功能，因此新定义的“compose”函数可以访问其范围之上的变量，这些变量在外部函数失去范围后仍然存在。

也许更有意义的检查是：

if (typeof window.onload === 'undefined') {