溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JavaScript中this指向問題怎么理解”，在日常操作中，相信很多人在JavaScript中this指向問題怎么理解問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript中this指向問題怎么理解”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
通過理解上下文，我們可以更加清晰的明白this的指向問題
this的指向可以看成就是當前的上下文
先讓我們通過一個例子來看看什么是函數中的this：
let colors = {
green : "綠色",
blue : "藍色",
showColors : function() {
console.log("green: " + this.green + " blue: " + this.blue);
}}colors.showColors();let show = colors.showColors;show();
第一個輸出的是綠色和藍色，此時函數的上下文是 colors，所以this指向 colors
第二個輸出的是 undefined 和 undefined，此時直接用圓括號調用函數，上下文就是 window，此時this指向的是 window
所以，我們可以看出函數的上下文也就是this是由調用函數的方式決定。
常見的函數上下文情況：
對象打點調用它的方法函數，則函數上下文是這個打點的對象，this指向這個對象obj.fun(); 上下文就是 obj
直接用圓括號調用函數，上下文就是 window 對象，this指向 window 對象
舉個例子：
function fun() {
return this.a + this.b;}var a = 1;var b = 2;let obj = {
a : 5,
b : fun(),
fun : fun}let res = obj.fun();console.log(res);
在 obj 里面的 b 這里的 fun() 是直接用圓括號調用的，所以此時的 fun() 上下文就是 window 對象，所以這里的this指向 window，b = 1 + 2 = 3；
obj.fun() 的 fun() 是由 obj 打點調用的，所以它的上下文就是 obj，所以這里的this指向 obj，所以 res = 5 + 3 = 8
數組 / 類數組對象枚舉出函數進行調用，上下文是這個數組 / 類數組對象
即可以看成：
數組[下標](); 調用這個函數的上下文對象就是這個數組
讓我們通過例子來理解一下：
let arr = [1, 2, 3, function() {
console.log(this[0]);}];arr[3]();
這里下標為 3 是個函數，通過數組枚舉出來下標為 3 的對象，然后再執行，所以它的上下文就是這個數組 arr
類數組對象：
什么是類數組對象 ？
所有鍵名為自然數序列（從 0 開始），且有length屬性的對象
例如：arguments對象就是一個類數組對象，它是函數的實參列表
function fun() {
arguments[3]();}fun(1, 2, 3, function() {
console.log(this[0]);})
這里 fun 這個函數被調用了，但是被調用的同時又執行了傳入到它身上的一個函數，即arguments[3]()這個語句，所以就會輸出this[0]，它是個類數組對象枚舉出函數進行調用，所以它的上下文就是arguments，this指向它。
立即執行函數（IIFE），它的上下文就是 window 對象，所以它的this指向的是 window
讓我們通過一個例子理解一下：
var a = 1;let obj = {
a : 2,
fun : (function() {
let a = this.a;
return function() {
console.log(a + this.a);
}
})()};obj.fun();
obj.fun()由前文所講，fun() 由 obj 調用，所以這里的this指向 obj；
obj 中的 fun 等于一個立即執行函數的返回值，
就相當于
obj = function() {
console.log(a + this.a);}這里的this指向的是 obj，所以 this.a = 2；
在這個立即執行函數里面它的上下文對象是 window，所以它的this指向 window，所以這里面的let a = this.a 的this指向的會是 window 對象，所以 a = 1，所以它的返回值那里的 a = 1；
所以最終輸出 1 + 2 = 3
在定時器、延時器調用函數中，上下文對象是 window 對象，里面的this指向 window 對象
讓我們來通過一個例子來理解一下：
let obj = {
a : 1,
b : 2,
fun : function() {
console.log(this.a + this.b);
}}var a = 3;var b = 4;setTimeout(obj.fun, 2000);
這里setTimeout的調用函數是obj.fun，它是由延時器調用的，它將在 2s 后運行，所以它的this指向 window 對象，輸出 7
如果我們這么寫，那將會輸出什么呢 ？
let obj = {
a : 1,
b : 2,
fun : function() {
console.log(this.a + this.b);
}}var a = 3;var b = 4;setTimeout(function() {
obj.fun();}, 2000);
此時，setTimeout的第一個參數變成一個匿名函數，此時匿名函數的this指向的是 window 對象；
在匿名函數中obj.fun()，這個fun()是由 obj 調用的，所以此時fun里面的this指向的是 obj，所以輸出 3
事件處理函數的上下文是綁定事件的DOM 元素，this指向的是DOM 元素
即：
DOM元素.onclick = function() {
這里的上下文就是 DOM元素，this指向DOM元素};讓我們來通過一個例子來理解一下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件處理函數</title>
<style>
p {
width: 200px;
height: 200px;
float: left;
border: 1px solid #000;
margin-right: 10px;
}
</style></head><body>
<p id="box1"></p>
<p id="box2"></p>
<p id="box3"></p>
<script>
function show() {
alert("You click " + this.id);
}
let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');
let box3 = document.getElementById('box3');
box1.onclick = show;
box2.onclick = show;
box3.onclick = show;
</script></body></html>當我們點擊構建出來的三個盒子時，彈出的對話框中會輸出對應的盒子 id
因為事件處理函數中，this指向的就是對應的DOM 元素
到此，關于“JavaScript中this指向問題怎么理解”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
