javascript運作機制之this詳細介紹_基礎知識-js教程-PHP中文網

javascript運作機制之this詳細介紹_基礎知識

WBOY

發布： 2016-05-16 17:01:18

原創

1353 人瀏覽過

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();

運行結果分析：被呼叫方法中this均指向了呼叫此方法的物件。 3. 使用new呼叫建構子

複製程式碼

 程式碼如下:

function getOb }

new getObj();

運行結果分析：new 建構子中的this指向新產生的物件。

4. 內部函數

複製程式碼


 程式碼如下:


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） >