听闰土大话前端之箭头函数

前言

对于任何一个编程语言来说，函数都是最重要的组成部分。那么这个函数在我们的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语句的时候，，多了不行，少了也不行，没有更不行。那你可能就要问了，那我什么时候使用箭头函数呢？我会告诉你，你想用的时候用，不想用的话，这辈子不用都行，因为它就是一个函数的简写。

大话前端系列文章较长，未完待续。