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