快捷導(dǎo)航

javascript運行機制之this詳細(xì)介紹

更新時間：2014年02月07日 14:43:28 作者：

這篇文章主要介紹了javascript運行機制之this,需要的朋友可以參考下

this是面向?qū)ο笳Z言中一個重要的關(guān)鍵字，理解并掌握該關(guān)鍵字的使用對于我們代碼的健壯性及優(yōu)美性至關(guān)重要。而javascript的this又有區(qū)別于Java、C#等純面向?qū)ο蟮恼Z言，這使得this更加撲朔迷離，讓人迷惑。

this使用到的情況：
1. 純函數(shù)
2. 對象方法調(diào)用
3. 使用new調(diào)用構(gòu)造函數(shù)
4. 內(nèi)部函數(shù)
5. 使用call / apply
6.事件綁定

1. 純函數(shù)

復(fù)制代碼代碼如下:

var name = 'this is window';  //定義window的name屬性  
function getName(){  
       console.log(this);    //控制臺輸出: Window  //this指向的是全局對象--window對象  
       console.log(this.name);  //控制臺輸出: this is window  /  
}  

  
getName();  

運行結(jié)果分析：純函數(shù)中的this均指向了全局對象，即window。

2. 對象方法調(diào)用

復(fù)制代碼代碼如下:

var name = 'this is window';  //定義window的name屬性,看this.name是否會調(diào)用到  
var testObj = {  
    name:'this is testObj',  
    getName:function(){  
        console.log(this);  //控制臺輸出:testObj   //this指向的是testObj對象  
        console.log(this.name);  //控制臺輸出: this is testObj  
    }  
}  

testObj.getName();  

運行結(jié)果分析：被調(diào)用方法中this均指向了調(diào)用該方法的對象。

3. 使用new調(diào)用構(gòu)造函數(shù)

復(fù)制代碼代碼如下:

function getObj(){  
    console.log(this);    //控制臺輸出: getObj{}  //this指向的新創(chuàng)建的getObj對象  
}  

new getObj();  

運行結(jié)果分析：new 構(gòu)造函數(shù)中的this指向新生成的對象。

4. 內(nèi)部函數(shù)

復(fù)制代碼代碼如下:

var name = "this is window";  //定義window的name屬性,看this.name是否會調(diào)用到  
var testObj = {  
    name : "this is testObj",  
    getName:function(){  
        //var self = this;   //臨時保存this對象  
        var handle = function(){  
            console.log(this);   //控制臺輸出: Window  //this指向的是全局對象--window對象  
            console.log(this.name);  //控制臺輸出: this is window    
            //console.log(self);  //這樣可以獲取到的this即指向testObj對象  
        }  
        handle();  
    }  
}  

testObj.getName(); 

運行結(jié)果分析：內(nèi)部函數(shù)中的this仍然指向的是全局對象，即window。這里普遍被認(rèn)為是JavaScript語言的設(shè)計錯誤，因為沒有人想讓內(nèi)部函數(shù)中的this指向全局對象。一般的處理方式是將this作為變量保存下來，一般約定為that或者self，如上述代碼所示。

5. 使用call / apply

復(fù)制代碼代碼如下:

var name = 'this is window';  //定義window的name屬性,看this.name是否會調(diào)用到  
var testObj1 = {  
    name : 'this is testObj1',  
    getName:function(){  
        console.log(this);   //控制臺輸出: testObj2  //this指向的是testObj2對象  
        console.log(this.name);  //控制臺輸出: this is testObj2    
    }  
}  

var testObj2 = {  
    name: 'this is testObj2'  
}  

testObj1.getName.apply(testObj2);  
testObj1.getName.call(testObj2);  

Note：apply和call類似，只是兩者的第2個參數(shù)不同：
[1] call( thisArg [，arg1，arg2，… ] ); // 第2個參數(shù)使用參數(shù)列表：arg1，arg2，...
[2] apply(thisArg [，argArray] ); //第2個參數(shù)使用參數(shù)數(shù)組：argArray
運行結(jié)果分析：使用call / apply 的函數(shù)里面的this指向綁定的對象。

6. 事件綁定
事件方法中的this應(yīng)該是最容易讓人產(chǎn)生疑惑的地方，大部分的出錯都源于此。

復(fù)制代碼代碼如下:

//頁面Element上進(jìn)行綁定  
  <script type="text/javascript">  
     function btClick(){  
        console.log(this);  //控制臺輸出: Window  //this指向的是全局對象--window對象  
    }  
  </script>  
  <body>  
    <button id="btn" onclick="btClick();" >點擊</button>  
  </body>  

復(fù)制代碼代碼如下:

//js中綁定方式（1）  
  <body>  
    <button id="btn">點擊</button>  
  </body>  
  <script type="text/javascript">  
     function btClick(){  
        console.log(this);  //控制臺輸出:<button id="btn">點擊</button>  //this指向的是Element按鈕對象  
     }  

     document.getElementById("btn").onclick = btClick;  
     document.getElementById("btn").onclick;    
  </script>  

復(fù)制代碼代碼如下:

//js中綁定方式（2）  
<body>  
   <button id="btn">點擊</button>  
 </body>  
 <script type="text/javascript">  
    document.getElementById("btn").onclick = function(){  
     console.log(this);  //控制臺輸出:<button id="btn">點擊</button>  //this指向的是Element按鈕對象  
    }  
    document.getElementById("btn").onclick;  
 </script>  

復(fù)制代碼代碼如下:

//js中綁定方式（3）  
<body>  
   <button id="btn">點擊</button>  
 </body>  
 <script type="text/javascript">  
    function btClick(){  
        console.log(this);    
     }  

    document.getElementById("btn").addEventListener('click',btClick); //控制臺輸出:<button id="btn">點擊</button>  //this指向的是Element按鈕對象把函數(shù)(方法)用在事件處理的時候。  
    document.getElementById("btn").attachEvent('onclick',btClick);  //IE使用,控制臺輸出: Window  //this指向的是全局對象--window對象  
 </script>  

運行結(jié)果分析：以上2種常用事件綁定方法，在頁面Element上的進(jìn)行事件綁定（onclick="btClick();"），this指向的是全局對象；而在js中進(jìn)行綁定，除了attachEvent綁定的事件方法外，this指向的是綁定事件的Elment元素。

您可能感興趣的文章: