### 一个参数的时候
~~~javascript
var f = v => v;
// 等同于
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`语句返回。
```
var sum = (num1, num2) => {
num1 = 100;
return num1 + num2;
};
console.log(sum(1, 1));
```
### 箭头函数可以与变量解构结合使用
```javascript
let person = {
first: "wang",
last: "yijia"
};
const full = ({ first, last }) \=> first + " " + last;
console.log(full(person));
```
### 可以简化回调函数
~~~javascript
// 正常函数写法
[1,2,3].map(function (x) {
return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);
~~~
### 尖头函数中的this
* 函数体内的`this`对象,就是定义时所在的对象,而不是使用时所在的对象。
请问下面的代码之中有几个`this`?
~~~javascript
function foo() {
return () => {
return () => {
return () => {
console.log('id:', this.id);
};
};
};
}
var f = foo.call({id: 1});
var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1
~~~
上面代码之中,只有一个`this`,就是函数`foo`的`this`,所以`t1`、`t2`、`t3`都输出同样的结果。因为所有的内层函数都是箭头函数,都没有自己的`this`,它们的`this`其实都是最外层`foo`函数的`this`。不能用`call()`、`apply()`、`bind()`这些方法去改变`this`的指向。
### 扩展:关于call和apply
* 都是用于动态改变this的指向。只是参数不一样。
~~~javascipt
function fun(arg1, arg2, ...){
// Your code
...
}
fun.call(this, arg1, arg2, ...)
fun.apply(this, [arg1, arg2, ...])
~~~