关于箭头函数改变this指向

函数的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