前言
对于任何一个编程语言来说,函数都是最重要的组成部分。那么这个函数在我们的ES6中也有很多的变化,接下来我要介绍的东西就是咱们今天的主角——箭头函数。
接下来,正文从这儿开始~
ES6标准新增了一种新的函数:Arrow Function(箭头函数)。为什么叫Arrow Function?因为它的定义用的就是一个箭头。
其实,咱们标准的函数可以写成这样:
function 名字(){
}
而ES6里面的函数可以写成这样
}
所以,它的名字也是由这个而来的,叫箭头函数。
温馨提示,在继续学习箭头函数之前,请测试你的浏览器是否支持ES6的Arrow Function。
在我正式说箭头函数之前,我只说两句话,这两句话童鞋们一定要记住,对大家后面有一定的好处:
1. 如果只有一个参数,那么()括号可以省略。
2. 如果只有一个return,{}可以省略。
其实这个箭头函数跟咱们以前接触的函数没有本质的区别,更多的是一种写法上的变化。
比方说咱们现在有一个普通函数:
function show(){
}
如果改成箭头函数,大概可以这么来写:
let show = () => {
}
相当于把function省略了,然后在圆括号后面添加了一个=>,这就是箭头函数,一点也不神秘。用起来和普通函数也没啥区别。
比方说,我这边举个例子:
let show = function () {
alert('runtu'); // runtu
}
show()
这个时候,浏览器弹出来的就是runtu,没跑。
如果改成箭头函数就是:
let show = () => {
alert('runtu'); // runtu
}
show()
其实改成这样的意义就是,方便。大家可能现在还感觉不到,说这哪儿方便了。没关系,一会儿咱后面会说。
咱们接着再来举个例子:
let arr = [12,5,8,99,33,14,26];
arr.sort(function(n1,n2){
return n1 - n2;
})
alert(arr);
其实,只要你愿意,咱们都可以把函数变成箭头函数:
arr.sort((n1,n2) => {
return n1 - n2;
})
接着咱们再来举一个例子,说说如果只有一个参数的话,()圆括号可以省略:
let show = a => {
return a*2;
}
alert(show(12))
这时浏览器正确弹出24。如果只有一个return的话,{} 花括号也可以省略。
修改后的例子如下:
let show = a => a*2;
alert(show(12))
同样在浏览器里弹出24,一点问题也没有。如果有熟悉其他语言的童鞋,应该能看出来,这个箭头函数抄的是Python里面的概念。
再把前面那个排序的例子拿过来,此时可以修改为:
arr.sort((n1,n2) => n1 - n2);
箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }和return。
箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。
回顾前面的例子,由于JavaScript函数对this绑定的错误处理,下面的例子无法得到预期结果:
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
return fn();
}
};
现在,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj:
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 25
说了这么多概念,举了这么多例子,其实箭头函数也没什么,就是简写,别名叫语法糖。
后记
最后,我们来总结一下,()圆括号什么时候能省略?有且只有一个参数的时候,多一个不行,少一个也不行。 那{}花括号什么时候能省略?当且仅当只有一个return语句的时候,,多了不行,少了也不行,没有更不行。那你可能就要问了,那我什么时候使用箭头函数呢?我会告诉你,你想用的时候用,不想用的话,这辈子不用都行,因为它就是一个函数的简写。
大话前端系列文章较长,未完待续。
领取专属 10元无门槛券
私享最新 技术干货