javascript - 關於addEventListener和attachEvent相容的寫法疑問，求助！

Question

第一種寫法

#

里面的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);
};

說的很清楚，謝謝！

Samhanx

#

Answer 1

注意第一種寫法的IIFE，這樣當程式碼執行到這個addEvent函數賦值的時候就明確了addEvent到底是if回傳的函數還是else if回傳的函數。

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

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

Answer 2

我理解稱第二種方法為惰性載入函數，是相對於第一種方法而言的：
1） 第一種方法，由於是IIFE，不管是否呼叫addEvent， 都已經確認了瀏覽器支援的是addEventListener ，還是attachEvent；addEvent， 都已经确认了浏览器支持的是addEventListener ，还是attachEvent；
2) 第二种方法，则是在显式调用addEvent 2) 第二種方法，則是在明確呼叫addEvent時候才能知道瀏覽器的支援情況。

Answer 3

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