時間：2017年4月24日22:52:12

    作為一名前端開發人員，如果立志長期發展下去，那麼深入研究的路必須走好。尤其是對JavaScript這門語言本身的精髓要有縱向研究，在實際開發和學習過程中，要善於發現問題，並總結問題。本次分享的內容，是來自一道面試題的連環知識點深度剖析。

    題目如下：

(function(window){
	function fn(str){
		this.str = str;
	}
	fn.prototype.format = function(){
		var arg = arguments;
		return this.str.replace(/\{(\d+)\}/ig,function(a,b){
			return arg[b] || "";
		});
	}
	window.fn = fn;
})(window);
(function(){
	var t = new fn('<p><a href = "{0}">{1}</a><span>{2}</span></p>');
	document.getElementById('div').innerHTML = t.format('http://www.baidu.com','baidu','welcome');
	console.log(t.format('http://www.baidu.com','baidu','welcome'));
})();
//<p><a href = "http://www.baidu.com">baidu</a><span>welcome</span></p>

    從 <p><a href = "{0}">{1}</a><span>{2}</span></p> 到 <p><a href = "http://www.baidu.com">baidu</a><span>welcome</span></p>，可以看出fn函式是一個模板引擎，將模板裡的‘{？}'佔位符替換成傳給它的引數。使用format函式將建構函式fn中的{0}{1}{2}替換為對應的實參，並返回一個格式化後的結果。

    本段程式碼，包含知識點比較多，具體分析如下：

1、String物件的replace()方法

    str.replace(searchvalue,newvalue);將str中的searchvalue替換為newvalue
    第一個引數searchvalue，可以字串，也可以是正則表示式
    第二個引數newvalue，可以是字串，也可以是函式，如果是函式，每個匹配都呼叫一次該函式並返回具體的替換內容；執行第一次匹配時，{0}被替代為arg[0]，執行第二次匹配時，{1}被替代為arg[1]，執行第三次匹配時，{2}被替代為arg[2]
    形如，str.replace(reg,function(a,b,c...)){};a為通過reg匹配到的字串,b及後面所有引數為匹配你reg要捕獲的內容，參考下面程式碼，深入理解：

this.str.replace(/\{(\d+)\}/,function(item,index){return arg[index]})，可以理解為arr.map() 或者 arr.forEach() 便於記憶

this.str.replace(/\{(\d+)\}/ig,function(a,b){
	console.log(a);//{0} {1} {2}
	console.log(b);//0 1 2
	console.log(arg[b]);//http://www.baidu.com baidu welcome
	return arg[b] || "";
});

2、自執行匿名函式

(function(window){
	//
})(window)

(function(){
	console.log("我是自執行匿名函式");
})();

(function($) {  
    //coding  
})(jQuery); 

    在JavaScript中，()()這種寫法，是匿名函式的自執行寫法，當頁面載入到這段程式碼時，匿名函式直接執行，這樣寫的目的如下：

    第一，(function() {})()這樣的匿名函式，可以避免函式體，內外變數的衝突；

    第二，(function(window) {})(window),左邊window為匿名函式的形參(區域性變數)，右邊window為匿名函式的實參；當在匿名函式體中要用到全域性物件window物件時，這種寫法省去了作用域鏈的查詢，可以提高JavaScript的執行效能；如果函式體內沒有用到window物件，則無需傳遞實參window物件；

    第三，(function() {})()常用於存放開發外掛的程式碼;

    因此，在使用jQuery進行開發時，(function($) {})(jQuery),$為形參，jQuery為實參，可以避免$與其他JavaScript函式庫衝突。

    有時候還會碰到，;(function(window,document) {})(window,document),其中;是一種容錯機制，避免壓縮出錯，避免這段程式碼之前的程式碼忘記加;導致這段程式碼執行出錯。

3、arguments物件

    arguments物件是JavaScript函式形參的類陣列物件，用來存放JavaScript函式的所用形參，因此在定義函式時，可以不用指定形參，直接用arguments物件接收並儲存形參。如下所示：

function maxNumber(num1,num2){
	if(num1 > num2)
		return num1;
	else
		return num2;
}

function maxNumber(){
	var arg = arguments;
	if(arg[0] > arg[1])
		return arg[0];
	else
		return arg[1];
}