本系列內容為JS全解析，為千鋒教育資深前端老師獨家創作 致力於為大家講解清晰JavaScript相關知識點，含有豐富的代碼案例及講解。如果感覺對大家有幫助的話，可以【點個關註】持續追更~ this指向（掌握） this 是一個關鍵字，是一個使用在作用域內的關鍵字 作用域分為全局作用域和局部作用域（私 ...
本系列內容為JS全解析，為千鋒教育資深前端老師獨家創作
致力於為大家講解清晰JavaScript相關知識點，含有豐富的代碼案例及講解。如果感覺對大家有幫助的話，可以【點個關註】持續追更~
this指向（掌握）
this 是一個關鍵字，是一個使用在作用域內的關鍵字
作用域分為全局作用域和局部作用域（私有作用域或者函數作用域）
全局作用域
全局作用域中this指向window
局部作用域
函數內的 this, 和 函數如何定義沒有關係, 和 函數在哪定義也沒有關係，只看函數是如何被調用的(箭頭函數除外)
可分為以下場景：
普通函數中調用
普通函數中的this和全局調用一樣，this指向window
語法：函數名()
<script>
// 全局使用 this
console.log(this) //window
console.log(window) //window
console.log(window === this) //true
//普通函數調用
function fn() {
console.log('我是全局 fn 函數')
console.log(this) //window
}
fn()
</script>
對象（包含數組）中調用
該函數內的 this 指向 點 前面的內容，也就是那個對象或者數組
語法：
對象名.函數名()*
對象名
<script>
//對象函數調用
function fn() {
console.log(this) //{fun: ƒ}
}
var obj = {
fun: fn
}
obj.fun()
obj['fun']()
</script>
定時器處理函數中調用
定時器中的this同樣也是指向window
<script>
// 定時器處理函數
setTimeout(function() {
console.log(this); //window
}, 1000)
</script>
事件處理程式中調用
事件處理程式中的this指向的是事件源
<!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>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>hello world</div>
<script>
var res = document.querySelector('div')
res.onclick = function() {
console.log(this); //<div></div>
}
</script>
</body>
</html>
自執行函數中調用
●自執行函數中的this也指向window
<script>
(function() {
console.log(this); //window
})()
</script>
強行改變this指向
通過上面的學習大家知道，this在不同的情況指向是不同的，但是有時候需要指向一個制定的對象，這就需要改變this的指向
可以理解成不管之前指向哪裡，現在我讓你指向哪裡你就要指向哪裡
強行改變this指向的方式可以通過call、apply和bind來改變
call調用
作用：改變函數內部this的指向
語法：
函數名.call()
對象名.函數名.call(參數1，參數2，參數3...)
參數：
○第一個參數是this要指向的對象
○從第二個參數開始，依次給函數傳遞實參
特點： 會立即調用函數或者說立即執行
<script>
function fn(a, b) {
console.group('fn 函數內的 列印')
console.log('this : ', this)
console.log('a : ', a)
console.log('b : ', b)
console.groupEnd()
}
var obj = {
name: '我是 obj 對象'
}
var arr = [100, 200, 300, 400, 500]
// 用 call 調用
fn.call(obj, 100, 200)
fn.call(arr, 1000, 2000)
/*
this : {name: '我是 obj 對象'}
a : 100
b : 200
fn 函數內的 列印
this : (5) [100, 200, 300, 400, 500]
a : 1000
b : 2000
*/
</script>
apply調用
作用： 改變函數內部this的指向
語法：
○函數名.apply()
○對象名.函數名.apply(參數1，[參數2，參數3...])
參數：
○第一個參數是this要指向的對象
○第二參數的一個數組，要傳遞的實參要放到數組裡面，就是有一個實參也要放到數組裡面
特點： 會立即調用函數或者說立即執行
<script>
function fn(a, b) {
console.group('fn 函數內的 列印')
console.log('this : ', this)
console.log('a : ', a)
console.log('b : ', b)
console.groupEnd()
}
var obj = {
name: '我是 obj 對象'
}
var arr = [100, 200, 300, 400, 500]
// 用 apply 調用
fn.apply(obj, [100, 200])
fn.apply(arr, [1000, 2000])
/*
fn 函數內的 列印
this : {name: '我是 obj 對象'}
a : 100
b : 200
fn 函數內的 列印
this : (5) [100, 200, 300, 400, 500]
a : 1000
b : 2000
*/
</script>
bind調用
作用： 改變函數內部this的指向
語法：
函數名.bind()
對象名.函數名.bind(參數1，參數2，參數3...)
參數：
第一個參數是this要指向的對象
從第二個參數開始，依次給函數傳遞實參
特點： 函數不會立即調用，會返回一個改變this指向以後的函數，使用的時候需要調用
<script>
function fn(a, b) {
console.group('fn 函數內的 列印')
console.log('this : ', this)
console.log('a : ', a)
console.log('b : ', b)
console.groupEnd()
}
var obj = {
name: '我是 obj 對象'
}
var arr = [100, 200, 300, 400, 500]
// 用 bind 調用
// 註意: 因為是 bind, 不會把 fn 函數執行, 而是把 fn
// res 接受的就是 bind 方法複製出來的 fn 函數, 和 fn
var res = fn.bind(obj, 100, 200)
var res1 = fn.bind(arr, 1000, 2000)
res()
res1()
/*
fn 函數內的 列印
this : {name: '我是 obj 對象'}
a : 100
b : 200
fn 函數內的 列印
this : (5) [100, 200, 300, 400, 500]
a : 1000
b : 2000
*/
</script>
以上即為JS中this指向的一些基礎知識點，更多技術乾貨、知識技巧可以關註我們！有不清楚的問題也可以在評論區交流討論，也可以私信小千~
