JS中this指向
- 1.?背景關系與this的關系
- 2.?一般函式
- 3.?陣列 / 類陣列物件
- 4.?立即執行函式
- 5.?定時器、延時器呼叫函式
- 6.?事件處理函式
1.?背景關系與this的關系
通過理解背景關系，我們可以更加清晰的明白this的指向問題
this的指向可以看成就是當前的背景關系
2.?一般函式
先讓我們通過一個例子來看看什么是函式中的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
3.?陣列 / 類陣列物件
陣列 / 類陣列物件列舉出函式進行呼叫，背景關系是這個陣列 / 類陣列物件
即可以看成：
陣列[下標](); 呼叫這個函式的背景關系物件就是這個陣列
讓我們通過例子來理解一下：
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指向它，
4.?立即執行函式
立即執行函式（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
5.?定時器、延時器呼叫函式
在定時器、延時器呼叫函式中，背景關系物件是 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
6.?事件處理函式
事件處理函式的背景關系是系結事件的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>
div {
width: 200px;
height: 200px;
float: left;
border: 1px solid #000;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<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 元素
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/386615.html
標籤：其他
上一篇：JavaScript零基礎入門 7：JavaScript基礎函式
下一篇：初識Javascript