2018-10-12 20:35:31 +00:00
|
|
|
|
---
|
|
|
|
|
title: Arrow Functions
|
|
|
|
|
localeTitle: 箭头功能
|
|
|
|
|
---
|
|
|
|
|
Arrow函数是用于编写JavaScript函数表达式的新ES6语法。较短的语法节省了时间,并简化了功能范围。
|
|
|
|
|
|
|
|
|
|
## 什么是箭头功能?
|
|
|
|
|
|
|
|
|
|
箭头函数表达式是使用“胖箭头”标记( `=>` )编写函数表达式的更简洁的语法。
|
|
|
|
|
|
|
|
|
|
### 基本语法
|
|
|
|
|
|
|
|
|
|
以下是箭头功能的基本示例:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
// ES5 syntax
|
|
|
|
|
var multiply = function(x, y) {
|
|
|
|
|
return x * y;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// ES6 arrow function
|
|
|
|
|
var multiply = (x, y) => { return x * y; };
|
|
|
|
|
|
|
|
|
|
// Or even simpler
|
|
|
|
|
var multiply = (x, y) => x * y;
|
|
|
|
|
```
|
|
|
|
|
|
2019-04-08 23:13:03 +00:00
|
|
|
|
您不再需要`function`和`return`关键字,甚至是花括号。
|
|
|
|
|
注意:只有在整个功能在同一行的時候才能省略花括号和`return`关键字。不然会报错。
|
2018-10-12 20:35:31 +00:00
|
|
|
|
|
|
|
|
|
### 简化了`this`
|
|
|
|
|
|
|
|
|
|
在箭头函数之前,新函数定义了它们自己的`this`值。要在传统的函数表达式中使用`this` ,我们必须编写一个类似的解决方法:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
// ES5 syntax
|
|
|
|
|
function Person() {
|
|
|
|
|
// we assign `this` to `self` so we can use it later
|
|
|
|
|
var self = this;
|
|
|
|
|
self.age = 0;
|
|
|
|
|
|
|
|
|
|
setInterval(function growUp() {
|
|
|
|
|
// `self` refers to the expected object
|
|
|
|
|
self.age++;
|
|
|
|
|
}, 1000);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
箭头功能没有定义它自己的`this`值,它继承了`this`从封闭功能:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
// ES6 syntax
|
|
|
|
|
function Person(){
|
|
|
|
|
this.age = 0;
|
|
|
|
|
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
// `this` now refers to the Person object, brilliant!
|
|
|
|
|
this.age++;
|
|
|
|
|
}, 1000);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var p = new Person();
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### 进一步阅读
|
|
|
|
|
|
2019-04-08 23:13:03 +00:00
|
|
|
|
[MDN链接](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
|