箭头函数

箭头函数

箭头函数能让this的指向固定化

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

分析：
1）第一个setInterval()中使用了箭头函数，箭头函数使this绑定定义时所在的作用域，this指向固定
2）第二个setInterval()中使用了普通函数,只想运行时的作用域 即全局对象

箭头函数转成 ES5 的代码

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

箭头函数中不存在this 引用外部this
除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target

箭头函数的不适合场景

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

箭头函数中的this指向了window，静态化了
普通函数 this指向cat

需要动态this 难怪addEventListenr中不能使用箭头函数

// 这里this指向了window  会报错
let button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

修改为：
button.addEventListener('click', function(e) {
  this.classList.toggle('on');
});

结论：回调函数里面使用了this的不要使用箭头函数