關於window.onload在javascript中的困惑

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（）。這些funcs有什麼區別？

我很抱歉張貼新手問題。但是，感謝任何給我一些指導的人？

編輯：

這是由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. 打電話給你的 '功能'，你在

，並通過：

window.onload已經是一個事件，而 爲什麼我們要用typeof？

window.onload可以是一個函數，但如果沒有設置，它將是'未定義'，我們需要檢查它的類型以查看它是什麼。

function addLoadEvent（func）， window.onload = func，func（）。 這些funcs的區別是什麼？

函數是javascript中的變量。所以你可以參考功能

FUNC

，你可以把它作爲

FUNC（）

你的情況：功能addLoadEvent（FUNC）是當前函數確定指標。它需要一個參數，並且該參數應該是一個功能

窗口。的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.on load = func; //將'func'賦給window.onload事件。 func是什麼意思？

func是定義爲該函數的第一個參數（函數addLoadEvent（func））的變量。函數是JavaScript中的第一類對象 - 您可以像其他變量一樣傳遞它們。

window.onload已經是一個事件，爲什麼我們使用typeof？

這不是一個事件。它是一個可能是函數或未定義的屬性。該事件是「發生的事情」，導致該功能被運行。

function addLoadEvent（func），window.onload = func，func（）。這些funcs有什麼區別？

第一個定義了一個名爲addLoadEvent的函數。第二個分配一個名爲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中，「函數」是變量可以採用的基本變量類型。 Javascript也是鬆散的類型，所以變量的值取決於分配給它的最後一件事。 「event」只是窗口對象的成員變量。因此，您可以將其分配給任何你喜歡的。如果從未分配過任何東西，它將在javascipt中使用「未定義」的原始值。因此，對於檢查：

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

是真的檢查，看看是否window.onload事件處理程序尚未或沒有定義。

如果還沒有定義，那麼這個函數就是給window.onload事件處理函數賦值func（即在窗口加載時會調用func）。

如果它已被定義，那麼這個函數將創建一個新的函數，當窗口加載時調用現有的onload處理程序，然後調用func。這個例子還使用了一個名爲'closure'的JavaScript屬性/語言特性，以便新定義的'compose'函數可以訪問超出其範圍的變量，這些變量在外部函數失去範圍之後仍然存在。

也許更有意義的檢查將是：

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