小白也能理解的this指向问题

55 阅读1分钟

this指向问题

1、普通函数

function test (){
    console.log('函数')
    console.log(this)
}
test()

结果:指向window

2、对象方法

const obj = {
    name='shm',
    sayHi() {
        console.log('hi')
        console.log(this)
    }
}
obj.sayHi()

结果:指向obj

3、函数调用方法

function test (){
    console.log('函数')
    console.log(this)
}
const obj = {
    name='shm',
    sayHi() {
        console.log('hi')
        console.log(this)
    }
}
test = obj.sayHi
test()

结果;指向window

PS:赋予的值会覆盖掉原本test函数内的内容

4、方法调用函数

function test (){
    console.log('函数')
    console.log(this)
}
const obj = {
    name='shm',
    sayHi() {
        console.log('hi')
        console.log(this)
    }
}
obj.sayHi = test
obj.sayHi()

结果:指向obj对象

PS:同样覆盖

特例

1、构造函数

function test (){
    console.log('函数')
    console.log(this)
}
const t = new test()
console.log(t)
结果:指向t实例

2、箭头函数

function test (){
    console.log('函数')
    console.log(this)
    ()=>{
        console.log('箭头函数')
    }
}
const t = new test()
console.log(t)
结果:指向t实例

PS:箭头函数没有自己的this,向外找this,找到test(),由于test作为构造函数使用,this指向t实例

## 总结 ##
1this永远指向真正的调用者,函数调用者为window,方法调用者为obj。<br/>
2、箭头函数本身没有this,向外找this。

若函数作为构造函数(new)使用,可以认为是通过创建一个实例(t),由t来调用这个构造函数
例如,普通函数test()的this指向window,当前面加上newconst t= new test()的this指向 t。