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？

function 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.将'func'分配给你传递给onload的函数

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

调用旧的onload函数
调用您传递的'func'

和

window.onload已经是一个事件了为什么我们使用typeof？

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

function addLoadEvent（func）， window.onload = func，func（）。什么是这些功能之间的区别？

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

FUNC

您可以将其称为

FUNC（）

在你的情况下：函数addLoadEvent（func）是当前的函数定义。它需要一个参数，而该参数应该是一个函数

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

FUNC（）

调用你传递的函数

这是逐行修正：

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，则将其设置为运行传递函数的新函数，然后使用旧函数
如果不是，只需让传递的函数运行onload

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

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

window.onload已经是一个事件，为什么我们使用typeof？

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

function addLoadEvent（func），window.onload = func，func（）。这些功能有什么区别？

第一个定义了一个名为addLoadEvent的函数。第二个为onload分配一个名为func的函数。第三个调用名为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中，“function”是变量可以采用的原始变量类型。 Javascript也是松散类型的，因此变量的值取决于分配给它的最后一件事。 “event”只是window对象的成员变量。因此，您可以将其分配给您喜欢的任何内容。如果它从未被分配给任何东西，它将在javascipt中采用“undefined”的原始值。所以检查：

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

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

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

如果之前已经定义过，那么这个函数将创建一个新函数，在窗口加载时调用现有的onload处理程序，然后调用func。这个例子也使用了名为'closure'的javascript的属性/语言特性，这样新定义的'compose'函数就可以访问其范围之外的变量，这些变量在外部函数失去范围后仍然存在。

也许更有意义的检查是：

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

关于javascript中window.onload的困惑

4 个答案: