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
主 编 | 王楠岚
责 编 | 杨金月