JS箭头函数和普通函数区别

普通函数： function add(a,b){return a+b};

箭头函数：（a,b）=>a+b;

这里就不详细说明箭头函数的简写规则，2者区别主要分为以下几个方面：

1.this方面：

普通函数内部的this，默认指向window，严格模式下指向undefined；

箭头函数内部的this，与上一级作用域中的this指向同一个地方。

箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，定义的时候就确定了；

2.arguments方面：

普通函数，可以通过arguments来实现重载；

箭头函数中，没有arguments，代替它功能是剩余参数rest（...）。

3.原型对象方面：

普通函数，是有自己的原型对象的；

箭头函数，没有原型对象。

4.new方面：

普通函数，可以作为构造函数，通过new实例化出子函数；

箭头函数，不能作为构造函数，使用new会报错。

5.简易程度：

箭头函数比普通函数的使用简短更多；同时箭头函数通常是匿名函数。

写一个防抖函数来区分下

 function double(fn) {
        let time
        return (...rest) => {
          console.log(arguments) //箭头函数没有arguments，这里arguments的指向的double这个函数
          //this在声明箭头函数的时候就已经被绑定到double这个函数中的作用域了。不是在函数执行的时候确定this指向的
          if (time) {
            clearTimeout(time)
          }
          time = setTimeout(function () {
            fn(rest[0])
          }, 500)
        }
      }

      let input = document.getElementsByTagName('input')[0]
      input.oninput = double((e) => {
        console.log(e)
      })

普通函数

 function double(fn) {
        let time
        return function () {
          let self = this
          console.log(this) //这里的this指向input这元素本身
          let args = arguments
          if (time) {
            clearTimeout(time)
          }
          time = setTimeout(function () {
            fn.apply(self, args)
          }, 500)
        }
      }

      let input = document.getElementsByTagName('input')[0]
      input.oninput = double((e) => {
        console.log(e)
      })