javascript - 关于addEventListener和attachEvent的兼容写法疑问，求助！

问题描述

第一种写法

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