問(wèn)題描述

第一種寫法

里面的if分支只會(huì)執(zhí)行一次，返回的函數(shù)里面已經(jīng)不包含瀏覽器判斷了，所以相對(duì)于常規(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)}; }})();

第二種寫法

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

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);};

說(shuō)的很清楚，謝謝！

問(wèn)題解答

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

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

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

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

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