javascript this 關鍵字以及四種函數調用模式

標籤：js this關鍵字 四種函數調用方式

最近在學習javascript ，被js中的this關鍵字搞得暈頭轉向，都不知道這個東西到底是幹什麼的，不同的地方所指的對象又不一樣。在查詢了很多的資料以後，終於有了一些眉目了。

this的定義：在javascript中，內容物件就是this指標，即被調用函數所處的環境，內容物件的作用是一個函數內部引用調用它的對象本身。

上面就是javascript中this關鍵字的定義，單純的理解來說還是很好理解的，但是真正到用的時候發現又是另外一回事了。

說到this的用法，就要談到到this的範圍，this的用法很簡單，難的就是this的範圍。this的範圍有和js中的函數調用模式有著密切的聯絡。

js中有四種函數調用的模式，分別是：方法調用模式、函數調用模式、構造器調用模式和apply調用模式。這四種模式在this關鍵字的初始化上面有很大的差異。

方法調用模式 ：當一個函數被儲存為對象的一個屬性時，我們稱之它為該對象的一個方法，那麼this被綁定到該對象上。

var myObject={      <span style="white-space:pre"></span>name : "myObject" ,     <span style="white-space:pre"></span>value : 0 ,    <span style="white-space:pre"></span>increment : function(num){ <span style="white-space:pre"></span>this.value += typeof(num) === 'number' ? num : 0; <span style="white-space:pre"></span>} , <span style="white-space:pre"></span>toString : function(){ <span style="white-space:pre"></span>return '[Object:'+this.name+' {value:'+this.value+'}]'; <span style="white-space:pre"></span>} } alert(myObject);//[Object:myObject {value:0}] 

函數調用模式 :當一個函數並非一個對象的函數時，那麼它被當作一個函數來調用，this被綁定到全域對象上。這是語言設計的一個錯誤。倘若語言設計正確，當內建函式調用時，this應該仍然綁定到外部函數的this變數上。如: 

var myObject={ <span style="white-space:pre"></span>name : "myObject" , <span style="white-space:pre"></span>value : 0 , <span style="white-space:pre"></span>increment : function(num){ <span style="white-space:pre"></span>this.value += typeof(num) === 'number' ? num : 0; <span style="white-space:pre"></span>} , <span style="white-space:pre"></span>toString : function(){ <span style="white-space:pre"></span>return '[Object:'+this.name+' {value:'+this.value+'}]'; <span style="white-space:pre"></span>}, <span style="white-space:pre"></span>getInfo:function(){ <span style="white-space:pre"></span>return (function(){ <span style="white-space:pre"></span>return this.toString();//內部匿名函數中this指向了全域對象window <span style="white-space:pre"></span>})(); <span style="white-space:pre"></span>} <span style="white-space:pre"></span>} <span style="white-space:pre"></span>alert(myObject.getInfo());//[object Window] 

當然幸運的是，有一個很容易的解決方案：定義一個變數並給它賦值為this，那麼內建函式通過該變數訪問到指向該對象的this,如: 

var myObject={ <span style="white-space:pre"></span>name : "myObject" , <span style="white-space:pre"></span>value : 0 , <span style="white-space:pre"></span>increment : function(num){ <span style="white-space:pre"></span>this.value += typeof(num) === 'number' ? num : 0; <span style="white-space:pre"></span>} , <span style="white-space:pre"></span>toString : function(){ <span style="white-space:pre"></span>return '[Object:'+this.name+' {value:'+this.value+'}]'; <span style="white-space:pre"></span>}, <span style="white-space:pre"></span>getInfo:function(){ <span style="white-space:pre"></span>var self=this; <span style="white-space:pre"></span>return (function(){ <span style="white-space:pre"></span>return self.toString();//通過變數self指向myObject對象 <span style="white-space:pre"></span>})(); <span style="white-space:pre"></span>} } <span style="white-space:pre"></span>alert(myObject.getInfo());//[Object:myObject {value:0}] 

構造器調用模式 ：JavaScript是一門基於原型繼承的語言。這意味著對象可以直接從其他對象繼承屬性。該語言是無類別的。 
如果一個函數前面帶上new來調用，那麼將建立一個隱藏串連到該函數的prototype成員的新對象，同時this將會被綁定到建構函式的執行個體上。 

function MyObject(name){ <span style="white-space:pre"></span>this.name=name || 'MyObject'; <span style="white-space:pre"></span>this.value=0; <span style="white-space:pre"></span>this.increment=function(num){ <span style="white-space:pre"></span>this.value += typeof(num) === 'number' ? num : 0; <span style="white-space:pre"></span>}; <span style="white-space:pre"></span>this.toString=function(){ <span style="white-space:pre"></span>return '[Object:'+this.name+' {value:'+this.value+'}]'; <span style="white-space:pre"></span>} <span style="white-space:pre"></span>this.target=this; } <span style="white-space:pre"></span>MyObject.prototype.getInfo=function(){ <span style="white-space:pre"></span>return this.toString(); } <span style="white-space:pre"></span>/* <span style="white-space:pre"></span>同時建立一個MyObject.prototype對象，myObject繼承了MyObject.prototype的所有的屬性， <span style="white-space:pre"></span>this綁定到了MyObject的執行個體上 <span style="white-space:pre"></span>*/ <span style="white-space:pre"></span>var myObject=new MyObject(); <span style="white-space:pre"></span>var otherObject=new MyObject(); <span style="white-space:pre"></span>//alert(myObject.target===myObject);//ture <span style="white-space:pre"></span>//alert(myObject.target.getInfo());//[Object:MyObject {value:0}] <span style="white-space:pre"></span>myObject.increment(10); <span style="white-space:pre"></span>otherObject.increment(20); <span style="white-space:pre"></span>alert(myObject.value);//10 <span style="white-space:pre"></span>alert(otherObject.value);//20 

Apply 調用模式 ：JavaScript是一門函數式的物件導向程式設計語言，所以函數可以擁有方法。 函數的apply方法，如同該對象擁有此方法，使該對象擁有此方法。此時this指向該對象。 apply接收兩個參數，第一個是要綁定的對象（this指向的對象）,第二個是參數數組. 

function MyObject(name){ <span style="white-space:pre"></span>this.name=name || 'MyObject'; <span style="white-space:pre"></span>this.value=0; <span style="white-space:pre"></span>this.increment=function(num){ <span style="white-space:pre"></span>this.value += typeof(num) === 'number' ? num : 0; <span style="white-space:pre"></span>}; <span style="white-space:pre"></span>this.toString=function(){ <span style="white-space:pre"></span>return '[Object:'+this.name+' {value:'+this.value+'}]'; <span style="white-space:pre"></span>} <span style="white-space:pre"></span>this.target=this; } <span style="white-space:pre"></span>function getInfo(){ <span style="white-space:pre"></span>return this.toString(); <span style="white-space:pre"></span>} <span style="white-space:pre"></span>var myObj=new MyObject(); <span style="white-space:pre"></span>alert(getInfo.apply(myObj));//[Object:MyObject {value:0}],this指向myObj <span style="white-space:pre"></span>alert(getInfo.apply(window));//[object Window],this指向window 

暫時先敘述到這裡，有時間，繼續完善

javascript this 關鍵字以及四種函數調用模式