mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-25 19:22:21 +00:00
114 lines
2.2 KiB
Markdown
114 lines
2.2 KiB
Markdown
# 箭头函数
|
||
|
||
## 定义
|
||
|
||
ES6允许使用“箭头”（=>）定义函数。
|
||
|
||
```javascript
|
||
|
||
var f = v => v;
|
||
|
||
```
|
||
|
||
上面的箭头函数等同于：
|
||
|
||
```javascript
|
||
|
||
var f = function(v) {
|
||
return v;
|
||
};
|
||
|
||
```
|
||
|
||
如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
|
||
|
||
```javascript
|
||
|
||
var f = () => 5;
|
||
// 等同于
|
||
var f = function (){ return 5 };
|
||
|
||
var sum = (num1, num2) => num1 + num2;
|
||
// 等同于
|
||
var sum = function(num1, num2) {
|
||
return num1 + num2;
|
||
};
|
||
|
||
```
|
||
|
||
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
|
||
|
||
```javascript
|
||
|
||
var sum = (num1, num2) => { return num1 + num2; }
|
||
|
||
```
|
||
|
||
由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。
|
||
|
||
```javascript
|
||
|
||
var getTempItem = id => ({ id: id, name: "Temp" });
|
||
|
||
```
|
||
|
||
##实例：回调函数
|
||
|
||
箭头函数的一个用处是简化回调函数。
|
||
|
||
```javascript
|
||
|
||
// 正常函数写法
|
||
[1,2,3].map(function (x) {
|
||
return x * x;
|
||
});
|
||
|
||
// 箭头函数写法
|
||
[1,2,3].map(x => x * x);
|
||
|
||
```
|
||
|
||
另一个例子是
|
||
|
||
```javascript
|
||
|
||
// 正常函数写法
|
||
var result = values.sort(function(a, b) {
|
||
return a - b;
|
||
});
|
||
|
||
// 箭头函数写法
|
||
var result = values.sort((a, b) => a - b);
|
||
|
||
```
|
||
|
||
## 注意点
|
||
|
||
箭头函数有几个使用注意点。
|
||
|
||
- 函数体内的this对象，绑定定义时所在的对象，而不是使用时所在的对象。
|
||
- 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
|
||
- 不可以使用arguments对象，该对象在函数体内不存在。
|
||
|
||
关于this对象，下面的代码将它绑定定义时的对象。
|
||
|
||
```javascript
|
||
|
||
var handler = {
|
||
|
||
id: "123456",
|
||
|
||
init: function() {
|
||
document.addEventListener("click",
|
||
event => this.doSomething(event.type), false);
|
||
},
|
||
|
||
doSomething: function(type) {
|
||
console.log("Handling " + type + " for " + this.id);
|
||
}
|
||
};
|
||
|
||
```
|
||
|
||
上面代码的init和doSomething方法中，都使用了箭头函数，它们中的this都绑定handler对象。否则，doSomething方法内部的this对象就指向全局对象，运行时会报错。
|