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級
		};
	}
})();

創建了一個自執行函數，實際的邏輯都一樣。一個需要調用纔會執行，另外一個是自己執行！