本系列內容為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指向的一些基礎知識點，更多技術干貨、知識技巧可以關注我們！有不清楚的問題也可以在評論區交流討論，也可以私信小千~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552259.html
標籤：其他
上一篇：深淺拷貝，溫故知新
下一篇：返回列表