js中this的指向问题

核心

js中this的指向不是在定义的时候确定的，而是在调用时明确。

指向口诀

“谁调用指向谁，如果存在多级调用，那么它的指向就是离它最近的调用者”，光说不练假把式，上代码！

let obj = {
    name :  'paopao',
    sayName:function (){
        console.log(this.name)
    }
}

obj.sayName()  //paopao

直接在方法中打印this

function consoleThis () {
    console.log(this)
}
consoleThis() //window

这里的consoleThis()看似没有调用者，其实他可以换种写法window.consoleThis()，因为在浏览器环境中定义的方法都可以看做是window的属性。

箭头函数中的this

箭头函数中并没有this，它的this继承自父级。也就是说箭头函数中的this的指向与它父级中this的指向一致。

let obj = {
    name:'dollar',
    sayName:()=>{
        console.log(this.name)
    }
}
window.name ='haha'
obj.sayName()  //haha

这个例子中sayName方法中的this与obj的this保持一致，当执行obj.sayName()时，其实是window.obj.sayName()，即window调用了obj那么obj的this指向就是window，所以obj.sayName()最后输出了定义在window上的haha