Javascript箭头函数与普通函数的区别

每天做个总结吧，坚持就是胜利！

    /**
        @date 2021-05-23
        @description 箭头函数与普通函数的区别
    */

壹（序）

ES6新增了箭头函数，允许使用=>定义函数。

贰（使用）

  const foo = () => {}

叁（区别）

1. 从写法上看，普通函数隐式或显示的，都会带有function关键字，而箭头函数使用() => {}的形式；
2. 箭头函数没有自己的this，箭头函数的this在定义的时候已经决定，是外部的this；
3. 由于没有自己的this，所以箭头函数无法用作构造函数，使用new关键字，也没有prototype属性；
4. 同样，由于没有自己的this，所以箭头函数调用call, apply, bind时不生效；
5. 箭头函数中无法使用arguments，需要的话可以使用...运算符；
6. 箭头函数无法使用yeild，所以箭头函数无法用作Generator函数；

肆（引申）

this指向在JavaScript中一直是个令人困扰的问题，箭头函数在定义时就已经绑定好this的机制，很大程度上解决了这个困扰，但是也有一些时候不应该使用箭头函数：

1. 在定义对象时，且对象中使用到this，如下定义的test对象中的addCount方法，并不能按照我们的真实想法去增加test对象中的count；

  const test = {
    count: 1,
    addCount: () => {
      this.count++
    },
  }

2. 当this需要动态改变时，如绑定一个元素的点击事件时，需要得到当前元素的classList，但是下面的写法并不能满足我们的需求；

  element.addEventListener('click', () => {
    console.log(this.classList)
  })