溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JavaScript中this如何用”，在日常操作中，相信很多人在JavaScript中this如何用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript中this如何用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
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指向的是全局對象--window對象
console.log(this.name); //控制臺輸出: this is window /
}
getName();運行結果分析：純函數中的this均指向了全局對象，即window。
2. 對象方法調用
var name = 'this is window'; //定義window的name屬性,看this.name是否會調用到
var testObj = {
name:'this is testObj',
getName:function(){
console.log(this); //控制臺輸出:testObj //this指向的是testObj對象
console.log(this.name); //控制臺輸出: this is testObj
}
}
testObj.getName();運行結果分析：被調用方法中this均指向了調用該方法的對象。
3. 使用new調用構造函數
function getObj(){
console.log(this); //控制臺輸出: getObj{} //this指向的新創建的getObj對象
}
new getObj();運行結果分析：new 構造函數中的this指向新生成的對象。
4. 內部函數
var name = "this is window"; //定義window的name屬性,看this.name是否會調用到
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();運行結果分析：內部函數中的this仍然指向的是全局對象，即window。這里普遍被認為是JavaScript語言的設計錯誤，因為沒有人想讓內部函數中的this指向全局對象。一般的處理方式是將this作為變量保存下來，一般約定為that或者self，如上述代碼所示。
5. 使用call / apply
var name = 'this is window'; //定義window的name屬性,看this.name是否會調用到
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個參數不同：
[1] call( thisArg [，arg1，arg2，… ] ); // 第2個參數使用參數列表：arg1，arg2，...
[2] apply(thisArg [，argArray] ); //第2個參數使用 參數數組：argArray
運行結果分析：使用call / apply 的函數里面的this指向綁定的對象。
6. 事件綁定
事件方法中的this應該是最容易讓人產生疑惑的地方，大部分的出錯都源于此。
//頁面Element上進行綁定
<script type="text/javascript">
function btClick(){
console.log(this); //控制臺輸出: Window //this指向的是全局對象--window對象
}
</script>
<body>
<button id="btn" onclick="btClick();" >點擊</button>
</body>
//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>
//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>
//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按鈕對象把函數(方法)用在事件處理的時候。
document.getElementById("btn").attachEvent('onclick',btClick); //IE使用,控制臺輸出: Window //this指向的是全局對象--window對象
</script>運行結果分析：以上2種常用事件綁定方法，在頁面Element上的進行事件綁定（onclick="btClick();"），this指向的是全局對象；而在js中進行綁定，除了attachEvent綁定的事件方法（this指向的是全局對象）外，this指向的是綁定事件的Elment元素。
到此，關于“JavaScript中this如何用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
