JavaScript中this如何用

這篇文章主要介紹“JavaScript中this如何用”，在日常操作中，相信很多人在JavaScript中this如何用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”JavaScript中this如何用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)建站于2013年成立，先為鹿泉等服務(wù)建站，鹿泉等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為鹿泉企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

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

this使用到的情況：

1. 純函數(shù)

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

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

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

5. 使用call / apply

6.事件綁定

1. 純函數(shù)

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

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

2. 對(duì)象方法調(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對(duì)象 
 console.log(this.name); //控制臺(tái)輸出: this is testObj 
 } 
} 
testObj.getName();

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

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

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

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

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對(duì)象 
 var handle = function(){ 
 console.log(this); //控制臺(tái)輸出: Window //this指向的是全局對(duì)象--window對(duì)象 
 console.log(this.name); //控制臺(tái)輸出: this is window 
 //console.log(self); //這樣可以獲取到的this即指向testObj對(duì)象 
 } 
 handle(); 
 } 
} 
testObj.getName();

運(yùn)行結(jié)果分析：內(nèi)部函數(shù)中的this仍然指向的是全局對(duì)象，即window。這里普遍被認(rèn)為是JavaScript語(yǔ)言的設(shè)計(jì)錯(cuò)誤，因?yàn)闆](méi)有人想讓內(nèi)部函數(shù)中的this指向全局對(duì)象。一般的處理方式是將this作為變量保存下來(lái)，一般約定為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對(duì)象 
 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ù)不同：

[1] call( thisArg [，arg1，arg2，… ] ); // 第2個(gè)參數(shù)使用參數(shù)列表：arg1，arg2，...

[2] apply(thisArg [，argArray] ); //第2個(gè)參數(shù)使用參數(shù)數(shù)組：argArray

運(yùn)行結(jié)果分析：使用call / apply 的函數(shù)里面的this指向綁定的對(duì)象。

6. 事件綁定

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

//頁(yè)面Element上進(jìn)行綁定 
 <script type="text/javascript"> 
 function btClick(){ 
 console.log(this); //控制臺(tái)輸出: Window //this指向的是全局對(duì)象--window對(duì)象 
 } 
 </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按鈕對(duì)象 
 }
 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按鈕對(duì)象 
 } 
 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按鈕對(duì)象把函數(shù)(方法)用在事件處理的時(shí)候。 
 document.getElementById("btn").attachEvent('onclick',btClick); //IE使用,控制臺(tái)輸出: Window //this指向的是全局對(duì)象--window對(duì)象 
 </script>

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

到此，關(guān)于“JavaScript中this如何用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

分享名稱：JavaScript中this如何用
網(wǎng)站URL：http://muchs.cn/article38/ijdjpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站營(yíng)銷、自適應(yīng)網(wǎng)站、標(biāo)簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容