函数的this指向只与其 申明函数的作用域和调用路径有关系
函数的this与调用路径的关系
正常情况下this指向调用其的对象
let c = {a:123}
c.b = function(){ console.log(this.a) }
c.b() //123
哪怕不是在该对象下申明的函数,在该对象下调用也是指向该对象
let c = {a:123}
c.b = function(){ console.log(this.a) }
let q = {a:321}
q.b = c.b //获取在c中声明的函数b的地址
q.b() //321
传统function函数的this指向在函数调用的时候决定,a调用指向a,b调用指向b
箭头函数不是在调用的时候决定this,而是在箭头函数 申明 的时候,就指定了this,指向上层 父作用域 的this,如果父作用域没有this,则依次往上
window下申明,window下调用func
let c = {a:123}
window.a = 321
let func = () => { console.log(this.a) } //func在window下申明,this指向父作用域this,window
c.b = function(){
func()
}
c.b() //321
其他对象下申明,window下调用func
let c = {a:123}
let func
c.b = function(){
func = () => { console.log(this.a) } //func在c.b下申明,this指向父作用域this,c
}
c.b()
func() //123
其他对象下申明调用func
let c = {a:123}
let b = {a:331}
c.f = function(){
b.func = () => { console.log(this.a) }
}
c.f()
b.func() //123
循环箭头函数
let a = {b:{c:{}}}
a.b.c.funcC = function(){
console.log('c',this)
a.funcA = () => {
console.log('a',this)
a.b.funcB()
}
a.funcA()
}
a.b.funcB = () => { console.log('b',this) }
a.b.c.funcC()
//c { funC... }
//a { funC... }
//b Window
再次强调 箭头函数的this在箭头函数申明时就已经绑定到内部,不会被外部影响改变, call 和 apply 方法对箭头函数无效
window.a = 312
let func = () => {console.log(this.a)}
let c = {a:123,func}
func() // 312
c.func() // 312
func.apply(c) //312
func.call(c) //312