阅读 428

箭头函数——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, 这个千万千万要注意。

最后

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

文章分类
前端
文章标签