66 lines
1.5 KiB
Markdown
66 lines
1.5 KiB
Markdown
---
|
||
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;
|
||
```
|
||
|
||
您不再需要`function`和`return`关键字，甚至是大括号。
|
||
|
||
### 简化了`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();
|
||
```
|
||
|
||
#### 进一步阅读
|
||
|
||
[MDN链接](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) |