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重新赋值，第二次调用时就不需要进行分支判断了