箭头函数里this指向问题

结论: 箭头函数 会动态绑定this,直到找到 外层第一个function,没有function的话就是全局的的对象

上代码

import { Injectable } from '@angular/core';

@Injectable()
export class TestService {
  constructor() {
    // 箭头函数没有固定的this指定, 指向它外层第一的 function
    this.testCallBack(() => {
      console.log(this.getUserName());
    });
    this.testCallBack(function(){
      // 报错
      console.log(this.getUserName());
    });
    this.testCallBack(() => {
       // 测试包裹一层箭头函数 这个箭头外面没有function,执向全局的ts,也就是test.service.ts,所以找到getUserName()这个方法
      console.log(this.getUserName());// 测试包裹2层箭头函数,这个箭头外面没有function,执向全局的ts,也就是test.service.ts
      let testScopeThis =  () => {
        console.log("王二麻子2");
        console.log(this.getUserName());
      }
      testScopeThis();

       // 测试包裹一层箭头函数后,用直接定义函数, this在当前这个function内,所以找不到getUserName()这个方法
      let testFunctionThis =  function scopeFunctionThis(){
        console.log(this.getUserName());
      };
      testFunctionThis();
    });
    
    
    testCallBack(callback) {
        if (callback) {
          callback()
        }
    }
    getUserName() {
      console.log("张三");
      return "张三";
    }

}

在没有箭头函数的年代,我们是如何解决,函数内的函数,调用函数外面的方法的勒

1. 匿名函数

// 一层层传递的,用的匿名函数的玩法,一层一层往里传
 this.testCallBack((function(testService){
     let testScope =(function(that){
         that.getUserName()
     })(testService);
   })(this));
  }
  

对箭头函数要理解更深点可以参考mdn 箭头函数
这是对箭头函数的一个总结,自己学习下,也希望大家可以了解下,