this是面嚮物件語言中一個重要的關鍵字，理解並掌握該關鍵字的使用對於我們程式碼的健壯性及優美性至關重要。而javascript的this又有區別於Java、C#等純物件導向的語言，這使得this更加撲朔迷離，讓人迷惑。
this使用到的情況：
1. 純函式
2. 物件方法呼叫
3. 使用new呼叫建構函式
4. 內部函式
5. 使用call / apply
6.事件繫結
---------------------------------------------------------------
1. 純函式
1 var name = 'this is window'; //定義window的name屬性 2 function getName(){ 3 console.log(this); //控制檯輸出: Window //this指向的是全域性物件--window物件 4 console.log(this.name); //控制檯輸出: this is window / 5 } 6 7 getName();
執行結果分析：純函式中的this均指向了全域性物件，即window。
2. 物件方法呼叫
1 var name = 'this is window'; //定義window的name屬性,看this.name是否會呼叫到 2 var testObj = { 3 name:'this is testObj', 4 getName:function(){ 5 console.log(this); //控制檯輸出:testObj //this指向的是testObj物件 6 console.log(this.name); //控制檯輸出: this is testObj 7 } 8 } 9 10 testObj.getName();
執行結果分析：被呼叫方法中this均指向了呼叫該方法的物件。
3. 使用new呼叫建構函式
1 function getObj(){ 2 console.log(this); //控制檯輸出: getObj{} //this指向的新建立的getObj物件 3 } 4 5 new getObj();
執行結果分析：new 建構函式中的this指向新生成的物件。
4. 內部函式
1 var name = "this is window"; //定義window的name屬性,看this.name是否會呼叫到 2 var testObj = { 3 name : "this is testObj", 4 getName:function(){ 5 //var self = this; //臨時儲存this物件 6 var handle = function(){ 7 console.log(this); //控制檯輸出: Window //this指向的是全域性物件--window物件 8 console.log(this.name); //控制檯輸出: this is window 9 //console.log(self); //這樣可以獲取到的this即指向testObj物件 10 } 11 handle(); 12 } 13 } 14 15 testObj.getName();
執行結果分析：內部函式中的this仍然指向的是全域性物件，即window。這裡普遍被認為是JavaScript語言的設計錯誤，因為沒有人想讓內部函式中的this指向全域性物件。一般的處理方式是將this作為變數儲存下來，一般約定為that或者self，如上述程式碼所示。
5. 使用call / apply
1 var name = 'this is window'; //定義window的name屬性,看this.name是否會呼叫到 2 var testObj1 = { 3 name : 'this is testObj1', 4 getName:function(){ 5 console.log(this); //控制檯輸出: testObj2 //this指向的是testObj2物件 6 console.log(this.name); //控制檯輸出: this is testObj2 7 } 8 } 9 10 var testObj2 = { 11 name: 'this is testObj2' 12 } 13 14 testObj1.getName.apply(testObj2); 15 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應該是最容易讓人產生疑惑的地方，大部分的出錯都源於此。
1 //頁面Element上進行繫結 2 <script type="text/javascript"> 3 function btClick(){ 4 <span style="white-space:pre"> </span>console.log(this); //控制檯輸出: Window //this指向的是全域性物件--window物件 5 <span style="white-space:pre"> </span> } 6 </script> 7 <body> 8 <button id="btn" onclick="btClick();" >點選</button> 9 </body>
1 //js中繫結方式（1） 2 <body> 3 <button id="btn">點選</button> 4 </body> 5 <script type="text/javascript"> 6 function btClick(){ 7 console.log(this); //控制檯輸出:<button id="btn">點選</button> //this指向的是Element按鈕物件 8 } 9 10 document.getElementById("btn").onclick = btClick; 11 document.getElementById("btn").onclick; 12 </script>
1 //js中繫結方式（2） 2 <body> 3 <button id="btn">點選</button> 4 </body> 5 <script type="text/javascript"> 6 document.getElementById("btn").onclick = function(){ 7 console.log(this); //控制檯輸出:<button id="btn">點選</button> //this指向的是Element按鈕物件 8 } 9 document.getElementById("btn").onclick; 10 </script>
1 //js中繫結方式（3） 2 <body> 3 <button id="btn">點選</button> 4 </body> 5 <script type="text/javascript"> 6 function btClick(){ 7 console.log(this); 8 } 9 10 document.getElementById("btn").addEventListener('click',btClick); //控制檯輸出:<button id="btn">點選</button> //this指向的是Element按鈕物件把函式(方法)用在事件處理的時候。 11 document.getElementById("btn").attachEvent('onclick',btClick); //IE使用,<span style="font-family: Arial, Helvetica, sans-serif;">控制檯輸出: Window //this指向的是全域性物件--window物件</span> 12 13 </script>
執行結果分析：以上2種常用事件繫結方法，在頁面Element上的進行事件繫結（onclick="btClick();"），this指向的是全域性物件；而在js中進行繫結，除了attachEvent繫結的事件方法外，this指向的是繫結事件的Elment元素。