箭头函数——ES6系列第四

作者：无忧
关注可了解更多的前端教程。问题或建议，请留言;
如果你觉得无忧对你有帮助，欢迎点赞^[1024]

箭头函数本身，其实就是为了简化函数的写法，以前凡是函数都必须要带上一个function关键字，这看起来有点笨拙在我看来，对于代码来说更加精简了，但是对于我们来说，反而加大了阅读代码的难度。但是不管怎样，它都已经普及开了，今天稍微总结一下箭头函数的知识点吧。

先来看看写法

箭头函数对于不同的情况有不同的简化写法，大家有必要对它们熟悉，不然以后看代码可能就比较头疼咯...

第一种，形参=>返回值

  let fn = a => a*2;
  console.log(fn(10));//20

可以看到，两行代码很简洁，什么意思呢第一行，声明一个函数 fn 这个函数有一个形参为a，然后这个函数没有执行语句，直接返回了a*2 第二行的执行打印大家应该是没有问题的，所以当我们在 fn调用的时候传入参数10，得到的结果自然就是 20了

第二种，(形参,形参)=>返回值

  let fn = a,b => a*b;
  console.log(fn(10,2));//20

这样无疑是会报错的，不好意思，搞错了，看下面的

  let fn = (a,b) => a*b;
  console.log(fn(10,2));//20

可以看到，当形参的数量大于一个的时候，就需要用括号包起来了，不然，中间无缘无故多出来的逗号，电脑会把你当成傻子

第三种，()=>返回值

  let fn = () => '这是返回值';
  console.log(fn());//'这是返回值'

这个就比较简单了，但是当代码多的时候，往往容易忽视后面的返回值，所以碰到这种写法的时候大家要注意，有一些同行老骚包最喜欢干这种事情了，明明很简单的一段代码，非得写成你不认识的模样，比如三目运算，比较运算符都属于这一类。

第四种，()=>{执行语句}

  let fn = () => {
    console.log('做了一件什么事情');
  };
  fn();//'做了一件什么事情'

其实代码写到这里就已经比较明朗了，还算是比较规矩，总之前面三种都属于特殊情况，大家做个了解，放在前面也是为了引起大家的注意，正常代码中我们碰到的更多的是目前看到的这种情况

因为很少会有一个函数只有返回值而不做其他的事情，这就像是学妹让你去帮忙修电脑，而你真的只是修了电脑一样可惜。当然了，纯粹的修理工咱另说对吧。

第五种，完全写法

  let fn = (a,b) => {
     console.log('做了一件什么事情');
     return '这里是返回值'
  };
  fn();//'做了一件什么事情'

当函数中有参数，有返回值，有执行语句的时候，差不多就长这个样子了不过也要注意哦，前面的fn是不能省略的，不然的话这个函数除非你自执行，或者绑定在某个元素的事件身上，不然的话这个函数就没法执行啦，这个和之前的function没啥区别

参数

1，不定参

参数的话，正常的参数没啥可说的，还是和以前一样，不过有两点需要注意，第一个就是箭头函数没有arguments这个字面量

  function a(){
     console.log(arguments)
  }
  a(1,2,3,4,5,6);//1，2，3，4，5，6

普通的函数，这样直接利用arguments是可以拿到所有传进来的参数的，但是箭头函数没有这玩意儿，不过呢，它有了一个更高级一点的东西，叫做rest参数。其实就是利用展开运算符：

  let fn = (...arg) => {
      console.log(arg);
      return '这里是返回值'
  };
  fn(1,2,3,4,5,6);//[a,2,3,4,5,6]

在这段代码里，...arg 这前面的三个小点就是展开运算符，意思就是把所有接收到的参数都展开存到arg这个变量里，这样的话arg里就包含了所有参数了

不过这里要注意，arg是一个数组！

2，参数默认值

ES6做了一个比较人性化的改动，那就是参数可以设置默认值，以前我们想要让参数不出错，那简直了。来感受一波：

  _this.point = option.point;
  _this.k = option.k || 0.6;
  _this.interval = option.interval || 1;
  _this.C1 = option.canvas;
  _this.C1.strokeStyle= option.strokeStyle || "#899";
  _this.C1.fillStyle = option.fillStyle || '#899';
  _this.isFull = option.isFull || false;
  _this.callBack = option.callBack || false;
  _this.drawFunction = option.drawFunction || false;
  _this.speed = option.speed || 2;
  _this.element = option.element;

这个其实还不够严谨，比如说里面的_this.k，如果传入的参数是一个0...

那为了更加严谨，我们甚至需要typeof判断参数类型，简直了。而有了参数默认值之后，这一切就变得简单了很多：

  let fn = (a=1,b=10) => {
      console.log(a,b);
      return '这里是返回值'
  };
  fn(0,2);//0,2

直接在形参的后面写上默认值，当传这个参数的时候，形参得到的就是传入的参数，当参数没有传的时候，得到的就是传入的参数了，即便你传入的参数是0也是没有问题的。这下就放心很多啦~

this指向

很多人说到这个问题就很头疼，不过我这里有个秘诀：

普通函数的this指向就是个墙头草，方往哪吹往哪倒
箭头函数的this指向就是个直男，认定了就不会变了

普通函数：

  let obj = {
      fn:function(){
          console.log(this);
      }
  }
  let a = obj.fn;

  obj.fn();//obj
  a();//window
  document.onclick = obj.fn;//#document

可以看到，一个普通函数，里面的this指向是不确定的第一种，通过外层对象调用，于是指向了外层对象第二种，把函数赋值给另一个变量，通过变量直接调用，这时候指向了window 第三种，通过事件调用的，指向了触发事件的元素

同样的情况我们来看看箭头函数

  let obj = {
      fn:()=>{
          console.log(this);
      }
  }
  let a = obj.fn;

  obj.fn();//window
  a();//window
  document.onclick = obj.fn;//window

这时候可以发现不管怎么调用，里面的this指向的都是window 原因就是因为箭头函数自身没有this, 箭头函数里面的this指向的是在定义这个函数时所处的上下文环境里的this

上面代码中，箭头函数在定义的时候，所处的环境里，this指向的是window，所以后面不管怎么调用这个函数，函数里的this指向都不会再发生改变了。

即便你是这么写：

  document.onclick = ()=>{
      console.log(this);
  };//window

这里面的this，指向的也是window, 这个千万千万要注意。

最后

如果觉得文章对你有帮助，欢迎点赞哦，看了这么久的文字，给大家放松一波眼睛，看看下面的图片~