首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

前言

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

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180228G1AQ7Y00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券