this是物件導向語言中一個重要的關鍵字,理解並掌握該關鍵字的使用對於我們程式碼的健全性和優美性至關重要。而javascript的this又有區別於Java、C#等純粹物件導向的語言,這使得this更加撲朔迷離,讓人困惑。
this使用到的情況: 1. 純函數 2. 物件方法呼叫 3. 使用new呼叫建構子 4. 內部函數 5. 使用call / apply 6.事件綁定
1. 純函數
var name = 'this is window'; window的name屬性 function getName(){ console.log(this); //控制台輸出: Window //this指向對象name); //控制台輸出: this is window / } getName();
運行結果分析:純函數中的this均指向了全域對象,即window。
2. 物件方法呼叫
程式碼如下: 程式碼如下: 程式碼🎜>var name = 'this is window'; //定義window的name屬性,看this.name是否會呼叫 var testObj = { function(){
console.log(this); //控制台輸出:testObj //this指向的是testObj物件
}
}
testObj.getName();
複製程式碼 程式碼如下:
function getOb
} new getObj();
運行結果分析:new 建構子中的this指向新產生的物件。
複製程式碼 程式碼如下: var name = "this is window"; window的name屬性,看this.name是否會呼叫 var testObj = { name : "this is testObj", var handle = function(){ . console. log(this.name); //控制台輸出: this is window //console.log(self); // handle() ; } } testObj.getName();
執行結果分析:內部函數中的this仍指向的是全域對象,也就是window。這裡普遍被認為是JavaScript語言的設計錯誤,因為沒有人想讓內部函數中的this指向全域物件。一般的處理方式是將this當作變數保存下來,一般約定為that或self,如上述程式碼所示。
5. 使用call / apply
程式碼:
var name = 'this is window'; //定義window的name屬性,看this.name是否會呼叫 var testObj1 = { name : 'this is testOb getName:function(){ console.log(this); //控制台輸出: testObj2 //this指向: this is testObj2 } } var testObj2 = { name: ' testObj2 = { name: ' testObj2 = { name: ' testObj2 = { apply(testObj2) ; testObj1.getName.call(testObj2);
Note:apply和call類似,只是兩者的第2個參數不同:[1] call( thisArg [,arg1,arg2,… ] ); // 第2個參數使用參數清單:arg1 ,arg2,... [2] apply(thisArg [,argArray] ); //第2個參數使用參數數組:argArray 運行結果分析:使用call / apply 的函數裡面的this指向綁定定的對象。
6. 事件綁定事件方法中的this應該是最容易讓人產生疑惑的地方,大部分的出錯都源自於此。
//頁面上進行工具綁定
//頁面上進行檢查script type="text/javascript"> function btClick(){ console.log(this); //控制台輸出: 點選
//js中綁定方式(1) > 點
程式碼如下:
//js中綁定方式(2) > 點選
//js のバインドメソッド (3) >
実行結果の分析: 上記の 2 つの一般的なイベント バインディング メソッドでは、イベント バインディングはページ要素 (onclick="btClick();") で実行され、これはグローバル オブジェクトを指しますが、バインドは js で実行されます。これは、attachEvent によってバインドされるイベント メソッドに加えて、イベントがバインドされる Element 要素を指します。