與其他語(yǔ)言相比碉克，函數(shù)的
this關(guān)鍵字在 JavaScript 中的表現(xiàn)略有不同凌唬，此外，在嚴(yán)格模式和非嚴(yán)格模式之間也會(huì)有一些差別漏麦。
在絕大多數(shù)情況下客税，函數(shù)的調(diào)用方式?jīng)Q定了this的值。所以導(dǎo)致了this使用場(chǎng)景非常之多更耻，具體有哪些呢？
- 作為普通函數(shù)調(diào)用
- 使用call捏膨，bind秧均，apply調(diào)用
- 多為對(duì)象方法被調(diào)用
- 在class中調(diào)用
- 箭頭函數(shù)
重點(diǎn)Ｊ澄辍！Ｄ亢＞馄摺！
this的取什么值是函數(shù)執(zhí)行的時(shí)候決定的讶隐，而不是函數(shù)在定義的確定的起胰。
舉例說(shuō)明
- this在class中的調(diào)用
function fn1() {
console.log(this)
}
fn1()
此處的this指向windows，然后我們是用call改變一下this的指向再來(lái)看看this指向巫延。
fin1.call({ x: 100 }) // {x：100}
此時(shí),this的指向改為了傳入的對(duì)象效五。同樣的bind也可以改變this的指向。
const fn2 = fn1.bind({ x: 200 })
fn2() // {x：200}
apply同樣也是可以的炉峰。
- bind改變this指針畏妖，直接運(yùn)行函數(shù)，參數(shù)為依次傳入疼阔。
- bind改變this指針戒劫，返回一個(gè)函數(shù)，參數(shù)是依次傳入婆廊。
3.apply改變this指針迅细，直接運(yùn)行函數(shù)，參數(shù)必須為數(shù)組淘邻。
- 作為對(duì)象方法被調(diào)用
const zhangsan = {
name: '張三',
sayHi: function () {
console.log(this)
}
}
zhangsan.sayHi() //{name: "張三", sayHi: ?}
- 此處的this指向?qū)ο髲埲?/li>
- 在class中調(diào)用
class Pepple {
constructor(name) {
this.name = name
}
sayHi() {
console.log(this)
}
}
const zhang = new Pepple('張三')
zhang.sayHi()
- 此處的this指向zhang的對(duì)象
- 在箭頭函數(shù)中使用
const zhangsan = {
name: '張三',
whit() {
setTimeout(function () {
console.log(this)
}, 1000);
},
whit1() {
setTimeout(() => {
console.log(this)
}, 1000);
}
}
zhangsan.whit()
zhangsan.whit1()
- 沒(méi)有使用箭頭函數(shù)指向了windows,使用了箭頭函數(shù)的指向了張三的對(duì)象
- 箭頭函數(shù)的this指向永遠(yuǎn)是上一級(jí)this的指向
至此茵典，每個(gè)this的不同使用場(chǎng)景都已經(jīng)通過(guò)demo的形式展示完畢，要想真正的學(xué)懂this宾舅，那就需要聯(lián)合我們之前的class统阿，作用域還有個(gè)人的練習(xí)。希望大家可以通過(guò)上述的案例中學(xué)到東西筹我。
