箭头函数

194 阅读1分钟

ES6 允许使用“箭头”(=>)定义函数。

image.png

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

image.png

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

箭头函数使得表达更加简洁。

image.png

上面代码只用了两行,就定义了两个简单的工具函数。如果不用箭头函数,可能就要占用多行,而且还不如现在这样写醒目。

箭头函数的一个用处是简化回调函数。如下面的例子:

image.png

使用注意点

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

(1)箭头函数没有自己的this对象(详见下文)。

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

image.png

上面代码中,setTimeout()的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{id: 42}),所以打印出来的是42