|
this是面向?qū)ο笳Z言中一個(gè)重要的關(guān)鍵字,，理解并掌握該關(guān)鍵字的使用對于我們代碼的健壯性及優(yōu)美性至關(guān)重要,。而javascript的this又有區(qū)別于Java、C#等純面向?qū)ο蟮恼Z言,，這使得this更加撲朔迷離,，讓人迷惑。
this使用到的情況： 1. 純函數(shù) 1. 純函數(shù)
var name = 'this is window'; //定義window的name屬性 function getName(){ console.log(this); //控制臺(tái)輸出: Window //this指向的是全局對象--window對象 console.log(this.name); //控制臺(tái)輸出: this is window / } getName(); 運(yùn)行結(jié)果分析：純函數(shù)中的this均指向了全局對象,，即window,。 2. 對象方法調(diào)用  var name = 'this is window'; //定義window的name屬性,看this.name是否會(huì)調(diào)用到 var testObj = { name:'this is testObj', getName:function(){ console.log(this); //控制臺(tái)輸出:testObj //this指向的是testObj對象 console.log(this.name); //控制臺(tái)輸出: this is testObj } } testObj.getName(); 運(yùn)行結(jié)果分析：被調(diào)用方法中this均指向了調(diào)用該方法的對象。 3. 使用new調(diào)用構(gòu)造函數(shù) function getObj(){ console.log(this); //控制臺(tái)輸出: getObj{} //this指向的新創(chuàng)建的getObj對象 } new getObj(); 運(yùn)行結(jié)果分析：new 構(gòu)造函數(shù)中的this指向新生成的對象,。 4. 內(nèi)部函數(shù) var name = "this is window"; //定義window的name屬性,看this.name是否會(huì)調(diào)用到 var testObj = { name : "this is testObj", getName:function(){ //var self = this; //臨時(shí)保存this對象 var handle = function(){ console.log(this); //控制臺(tái)輸出: Window //this指向的是全局對象--window對象 console.log(this.name); //控制臺(tái)輸出: this is window //console.log(self); //這樣可以獲取到的this即指向testObj對象 } handle(); } } testObj.getName(); 運(yùn)行結(jié)果分析：內(nèi)部函數(shù)中的this仍然指向的是全局對象,，即window。這里普遍被認(rèn)為是JavaScript語言的設(shè)計(jì)錯(cuò)誤,，因?yàn)闆]有人想讓內(nèi)部函數(shù)中的this指向全局對象,。一般的處理方式是將this作為變量保存下來，一般約定為that或者self,，如上述代碼所示,。 5. 使用call / apply var name = 'this is window'; //定義window的name屬性,看this.name是否會(huì)調(diào)用到 var testObj1 = { name : 'this is testObj1', getName:function(){ console.log(this); //控制臺(tái)輸出: testObj2 //this指向的是testObj2對象 console.log(this.name); //控制臺(tái)輸出: this is testObj2 } } var testObj2 = { name: 'this is testObj2' } testObj1.getName.apply(testObj2); testObj1.getName.call(testObj2); Note：apply和call類似，只是兩者的第2個(gè)參數(shù)不同： 6. 事件綁定 //頁面Element上進(jìn)行綁定 <script type="text/javascript"> function btClick(){ console.log(this); //控制臺(tái)輸出: Window //this指向的是全局對象--window對象 } </script> <body> <button id="btn" onclick="btClick();" >點(diǎn)擊</button> </body> //js中綁定方式（1） <body> <button id="btn">點(diǎn)擊</button> </body> <script type="text/javascript"> function btClick(){ console.log(this); //控制臺(tái)輸出:<button id="btn">點(diǎn)擊</button> //this指向的是Element按鈕對象 } document.getElementById("btn").onclick = btClick; document.getElementById("btn").onclick(); //默認(rèn)點(diǎn)擊 </script> //js中綁定方式（2） <body> <button id="btn">點(diǎn)擊</button> </body> <script type="text/javascript"> document.getElementById("btn").onclick = function(){ console.log(this); //控制臺(tái)輸出:<button id="btn">點(diǎn)擊</button> //this指向的是Element按鈕對象 } document.getElementById("btn").onclick(); </script> //js中綁定方式（3） <body> <button id="btn">點(diǎn)擊</button> </body> <script type="text/javascript"> function btClick(){ console.log(this); } document.getElementById("btn").addEventListener('click',btClick); //控制臺(tái)輸出:<button id="btn">點(diǎn)擊</button> //this指向的是Element按鈕對象把函數(shù)(方法)用在事件處理的時(shí)候。 document.getElementById("btn").attachEvent('onclick',btClick); //IE使用,控制臺(tái)輸出: Window //this指向的是全局對象--window對象 </script> 運(yùn)行結(jié)果分析：以上2種常用事件綁定方法,，在頁面Element上的進(jìn)行事件綁定（onclick="btClick();"）,，this指向的是全局對象；而在js中進(jìn)行綁定,，除了attachEvent綁定的事件方法（this指向的是全局對象）外,，this指向的是綁定事件的Elment元素。 參考資料： http://www./notes/16738/aa32a299479386c9c1fc254ef0dc6fcb.html |
|
|
