javascript箭头函数this的几点理解

一、和普通函数this的区别

1. 箭头函数的没有自己的this，所以依托于外层函数的this，需要宿主，没有就指向window
   a. 不可以使用new构造函数
   b. 不存在arguments、super、new.target，指向外层函数的对应变量
   c.也就不能用call()、apply()、bind()这些方法去改变this的指向

2. 普通函数中的this依赖最近的调用者，这个最好熟悉下调用栈，谁调用它this就指向谁

3. 回调匿名非箭头函数中的this指向window全局对象

function Timer() {
    
    
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数,依赖宿主Timer
  setInterval(() => this.s1++, 1000);
  // 普通回调函数 指向全局
  setInterval(function () {
    
    
    this.s2++;
  }, 1000);
}

二、箭头函数的用处

1. 箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。

var handler = {
    
    
  id: '123456',
  init: function() {
    
    
    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },
  doSomething: function(type) {
    
    
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};

三、不适用的地方

1. 第一个场合是定义对象的方法，且该方法内部包括this

const cat = {
    
    
  lives: 9,
  jumps: () => {
    
    
    this.lives--;
  }
}

上面代码中，cat.jumps()方法是一个箭头函数，这是错误的。调用cat.jumps()时，如果是普通函数，该方法内部的this指向cat；如果写成上面那样的箭头函数，使得this指向全局对象，因此不会得到预期结果。*这是因为对象不构成单独的作用域，必须要函数 *，导致jumps箭头函数定义时的作用域就是全局作用域。

2. 需要动态this的时候，也不应使用箭头函数，常见注册时间获取句柄对象。

var button = document.getElementById('press');
button.addEventListener('click', () => {
    
    
  this.classList.toggle('on');
});

上面代码运行时，点击按钮会报错，因为button的监听函数是一个箭头函数，导致里面的this就是全局对象。如果改成普通函数，this就会动态指向被点击的按钮对象。

3. 另外，如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是要使用普通函数，这样可以提高代码可读性。