【轉】javascript運行機制之this詳解

時間 2019-11-06

標籤 javascript 運行機制詳解欄目 JavaScript 简体版

原文原文鏈接

this是面嚮對象語言中一個重要的關鍵字，理解並掌握該關鍵字的使用對於咱們代碼的健壯性及優美性相當重要。而javascript的this又有區別於Java、C#等純面向對象的語言，這使得this更加撲朔迷離，讓人迷惑。javascript

this使用到的狀況：java

1. 純函數數組

2. 對象方法調用app

3. 使用new調用構造函數函數

4. 內部函數this

5. 使用call / applyspa

6.事件綁定設計

---------------------------------------------------------------code

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元素。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。