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