箭头函数中this指向的改变

Posted 2021-05-25 十九万里

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