問題描述

第一種寫法

里面的if分支只會執(zhí)行一次，返回的函數(shù)里面已經(jīng)不包含瀏覽器判斷了，所以相對于常規(guī)寫法，已經(jīng)很棒了

var addEvent = (function(){ if(window.addEventListener){return function(elem, type, handler){ elem.addEventListener(type, handler, false);}; }else if(window.attachEvent){return function(elem, type, handler){ elem.attachEvent(’on’ + type, handler)}; }})();

第二種寫法

在第一次進入if判斷后，重寫了addEvent函數(shù)，這樣后續(xù)的addEvent也不包含分支判斷語句了，感覺跟第一種寫法并沒有多大的區(qū)別，但是第二種寫法被稱為惰性載入函數(shù)，可是我并沒有感覺他比第一種方式惰在哪里啊？相較來說，我更喜歡第一種方式，求解釋

var addEvent = function(elem, type, handler){ if(window.addEventListener){addEvent = function(elem, type, handler){ elem.addEventListener(type, handler, false);}; }else if(window.attachEvent){addEvent = function(elem, type, handler){ elem.attachEvent(’on’ + type, handler);}; } addEvent(elem, type, handler);};

說的很清楚，謝謝！

問題解答

注意第一種寫法的IIFE，這樣當代碼執(zhí)行到這個addEvent函數(shù)賦值的時候就明確了addEvent到底是if返回的函數(shù)還是else if返回的函數(shù)。

第二種寫法在執(zhí)行代碼的時候addEvent還是最外層那個函數(shù)，你實際調(diào)用addEvent()的時候，內(nèi)部進行重新賦值，明確addEvent到底是什么，然后函數(shù)內(nèi)再自我調(diào)用，這就是惰性的地方吧。

注意這中間參數(shù)有個傳遞的過程，并且如果不調(diào)用的話，外層函數(shù)的引用會一直保存在addEvent上面，而第一種寫法的立即執(zhí)行函數(shù)執(zhí)行完之后，那個匿名函數(shù)占用的內(nèi)存就已經(jīng)開始等待回收了。

我理解稱第二種方法為惰性載入函數(shù)，是相對于第一種方法而言的： 1） 第一種方法，由于是IIFE，不管是否調(diào)用 addEvent， 都已經(jīng)確認了瀏覽器支持的是addEventListener ，還是attachEvent； 2) 第二種方法，則是在顯式調(diào)用addEvent時候才能知道瀏覽器的支持情況。

第二種方法第一次調(diào)用后已經(jīng)把addEvent重新賦值，第二次調(diào)用時就不需要進行分支判斷了