問題描述

第一種寫法

里面的if分支只會執行一次，返回的函數里面已經不包含瀏覽器判斷了，所以相對于常規寫法，已經很棒了

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函數，這樣后續的addEvent也不包含分支判斷語句了，感覺跟第一種寫法并沒有多大的區別，但是第二種寫法被稱為惰性載入函數，可是我并沒有感覺他比第一種方式惰在哪里啊？相較來說，我更喜歡第一種方式，求解釋

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，這樣當代碼執行到這個addEvent函數賦值的時候就明確了addEvent到底是if返回的函數還是else if返回的函數。

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

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

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

第二種方法第一次調用后已經把addEvent重新賦值，第二次調用時就不需要進行分支判斷了