问题描述

JavaScript ES6标准新增了比较重要的一种新的函数:Arrow Function(箭头函数),但大多数人都不能很好的了解箭头函数的用法,也不能区别箭头函数和function(),所以接下来我们就来介绍一下箭头函数。

解决方案

1 箭头函数的写法

() => {}

//举例

x => x*2 //x的返回值变成x*2的值

箭头函数定义包括一个参数列表,函数体放在最后。

箭头函数有两种格式,一种只包含一个表达式,就如上面的举例,你会发现它没有return,因为在箭头函数中,只要一个表达式,并且省略了包围的 { } 的话,就意味着表达式前面有一个隐含的 return。另一种格式就是,当箭头函数包含多条语句,这个时候{ }和return 就不能省略,例如:

x => {

      if (x>0){

          return x*x

      }else{

         return x

      }

而当有多个参数就要用()将参数括起来:

(x,y) => {

      if (x>0){

          return x*y

      }else{

         return x+y

      }

2 箭头函数this的指向

箭头函数总是函数表达式;并不存在箭头函数声明。同时箭头函数看上去是匿名函数(它们没有用于递归或者事件绑定 / 解绑定的命名引用)的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。例如:

var ming = {

     birth: 1999,

     getAge: function () {

         var b = this.birth; // 1999

         var a = () => new Date().getFullYear() - this.birth; // this指向ming对象

         return a();

     }

};

ming.getAge();//

结果:

JavaScript|箭头函数的用法_Java

如上例子,箭头函数中this总是指向语法作用域,也就是此处的外部调用者xiaoming对象,故而此处ming.getAge()的返回值为21。

也就是说,使用箭头函数,就不需要以前的那种hack写法了:

var that = this;

由于this在箭头函数中已经按照词法作用域绑定了,所以用call()或者apply()调用函数的时候,无法对this 进行绑定,即传入的第一个参数被忽略。例如:

var ming = {

     birth: 1999,

     getAge: function (year) {

         var b = this.birth; // 1999

         var a = (y) => y - this.birth; // this.birth仍是1999

         return a.call({birth:2000}, year);

     }

};

ming.getAge(2020);//21

结果:

JavaScript|箭头函数的用法_Java_02

3 箭头函数与function()函数的区别

通过上面对于箭头函数的讲解就可以发现虽然有时候可以将function()函数变为箭头函数,但两者还是有很大的区别的:

a.箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象;

b.箭头函数不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误;

c.箭头函数不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替;

d.不可以使用yield命令,因此箭头函数不能用作Generator函数;

结语

箭头函数中this的指向十分的重要,需要注意,有时候为了节约时间,可以使用箭头函数代替function()函数,在使用的时候一定要注意箭头函数本身没有this,它的this是根据上下文指向语法作用域的,所以小编在此建议,如果你还想用this,就最好不要用使用箭头函数的写法哦。

END

 

 

 


   

JavaScript|箭头函数的用法_Java_03