【原】JavaScript|箭头函数的用法

问题描述

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();//

结果：

如上例子，箭头函数中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

结果：

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

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

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

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

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

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

结语

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

END

主       编   |   王楠岚

责       编   |   杨金月

 where2go 团队

---

微信号：算法与编程之美