javascript - 关于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 的函数赋值给 'func'

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

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

和:

window.onload is already an event, and why do we use typeof?

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

function addLoadEvent(func) , window.onload = func, func(). What's the difference among these funcs?

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

函数

你可以这样调用它

函数()

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

window.onload = func 将你传入的函数赋值给 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);