js 对惰性函数的理解

平时我们写代码的时候，有时间会经常写写if…else判断语句，比如一些浏览器的兼容问题,每次都要判断到底是哪个浏览器，然后再决定用哪个方法，每次执行的时候都需要先判断，有些情况这个判断条件很耗性能且又频繁执行，那么问题就来了！是不是会很卡？，我们先来看个例子！

function isChrome() {
	return /chrome/i.test(navigator.userAgent);
};

function isFirefox() {
	return /Firefox/i.test(navigator.userAgent);
}

function isOpera() {
	return /Opera/i.test(navigator.userAgent);
}


function browser() {
	if (isChrome()) {
		console.log('chrome');
	} else if (isFirefox()) {
		console.log('Firefox');
	} else if (isOpera()) {
		console.log('Opera()');
	}
}
browser();//chrome
browser();//chrome
browser();//chrome

如果需要多次执行，是不是要多次判断？这应该不是我们想要的结果把，我们只需要执行一次判断就行了，上述的例子可能还不够抽象，那么我举个比较常用的dom浏览器兼容事件

function addEvent (type, element, fun) {
   if (window.addEventListener) {//DOM2级
       element.addEventListener(type, fun, false);// false为冒泡，true为捕获
   }
   else if(window.attachEvent){//IE
       element.attachEvent('on' + type, fun);//默认皆为冒泡
   }
   else{
       element['on' + type] = fun;//DOM0级
   }
}

这个事件大家应该很熟悉了，当每次调用addEvent函数的时，都要对浏览器支持能力进行检查，首先检查是否支持addEventListener方法，如果不支持，再检查是否支持attachEvent方法，如果还不支持，就用DOM0级方法添加事件，其实我们只希望浏览器只判断一次，它支持了后面就一直支持，if语句不必每次都执行，代码可以运行的更快一些，那怎么能做到这点呢，那就要引入我们的惰性函数的使用

惰性函数（Lazy Function Definition）

惰性函数表示函数执行的分支只会在函数第一次掉用的时候执行，在第一次调用过程中，该函数会被覆盖为另一个按照合适方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支了。那么上面的代码我可以改成两种写法：

1.

	function addEvent(type, element, fun) {
		if (window.addEventListener) { //DOM2级
			addEvent = function (type, element, fun) {
				element.addEventListener(type, fun, false); // false为冒泡，true为捕获
			};
		} else if (window.attachEvent) { //IE
			addEvent = function (type, element, fun) {
				element.attachEvent('on' + type, fun); //默认皆为冒泡
			};
		} else {
			addEvent = function (type, element, fun) {
				element['on' + type] = fun; //DOM0级
			};
		}
	}

当我们每次都需要进行条件判断，其实只需要判断一次，if语句的每个分支都会为addEvent变量赋值覆盖了原函数。下一次调用addEvent()的时候，便会直接调用新赋值的函数，这样就不用再执行if语句了!

2.

(function addEvent(type, element, fun) {
	if (window.addEventListener) { //DOM2级
		return function (type, element, fun) {
			element.addEventListener(type, fun, false); // false为冒泡，true为捕获
		};
	} else if (window.attachEvent) { //IE
		return function (type, element, fun) {
			element.attachEvent('on' + type, fun); //默认皆为冒泡
		};
	} else {
		return function (type, element, fun) {
			element['on' + type] = fun; //DOM0级
		};
	}
})();

创建了一个自执行函数，实际的逻辑都一样。一个需要调用才会执行，另外一个是自己执行！