微信号:ardays

介绍:android每日绝对干货

探索ES2015:箭头函数(Arrow Functions)

2017-11-24 13:25 Kai

前言

在JavaScript的世界中函数被誉为一等公民,每当我们需要在JS定义一个新的函数,我们都会毫不犹豫的function() {},也许我们可以开始换一种方式来定义一个函数,也就是本文的主角箭头函数,一个来自ECMAScript 2015(又称ES6)的全新特性。

语法

1
var func = p => p

上面的代码等价于

1
2
3
var func = function(p) {
 return p
}

看出差异了么?最明显的,我们不再需要写function这个关键字,只要使用=>箭头即可定义一个函数。我们在定义函数的时候根据根据需求的不同,箭头函数也有一些细微的差异,我们来列举一下:

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

1
2
3
4
5
// 无参函数
var func1 = () => 1

// 多参(大于1)函数
var func2 = (a, b) => a + b

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

1
2
3
4
5
6
7
8
9
// 不需要显示return
var func = p => p

// 需要大括号并且显示return
var func p => {
 var a = p + 1

 return a
}

特性

箭头函数除了让我们少写几个字母外难道没有更牛逼的特性?必须不是!下面我们来介绍一个牛逼闪闪的特性:父作用域共享关键字this

JavaScript中的this做为一个古老的特性,有一个非常坑爹的特性this永远指向的是当前函数的上下文

1
2
3
4
5
document.addEventListener('click', function() {
 setTimeout(function() {
   console.log(this) // ?
 })
}, false)

在运行上面代码时,this指向的是什么呢?答案是window,原因是setTimeoutwindow对象下的一个方法。但是我们此时希望的是获取到document,怎么解决呢,传统的办法是添加一个变量self保持对this的引用。

1
2
3
4
5
6
7
document.addEventListener('click', function() {
 var self = this;

 setTimeout(function() {
   console.log(self) // self => document
 })
}, false)

但是这种方法显示不够优雅,这个时候我们就可以利用箭头函数来解决它,因为它不产生属于它自己的this

1
2
3
4
5
6
7
document.addEventListener('click', function() {
 var self = this;

 setTimeout(() => {
   console.log(this) // this => document
 })
}, false)

注意

箭头函数有几个使用注意点:

  • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用解构参数代替。

  • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

  • 不可以使用yield命令,因此箭头函数不能用作Generator函数。

总结

箭头函数应该是我们在ES6中使用最多的,也是我最喜欢的特性之一,箭头函数使得表达更加简洁。当第一眼看到它的写法时,就被它的优雅所吸引,建议大家多多尝尝ES6的各种新特性。

参考

MDN
ECMAScript 6 入

 
Android每日干货 更多文章 好久不见 三句代码完成整个App侧滑关闭 慢慢的我也会失去自己 想要资源的来这里 主流App应用市场
猜您喜欢 程序员应该读的 7 本计算机书 LSM upon SSD “压倒服务器的最后一个用户”-- 如何寻找极限点? 我们把市面上最便宜好用的文具,都为你打包好了~ 设计模式之代理模式(二)CGLIB动态代理实现