[TOC]
* * * * *
>引入箭头函数有两个方面的作用:
更简短的函数并且 `this` 与词法作用域里的相同。
### 1. 语法
`PS:argument 参数,简写为 arg`
~~~
<1>. (arg1, arg2, …, argN) => { 函数声明 }
// 这种情况用于不需要返回值,进行一组流程操作的时候;
~~~
![](https://box.kancloud.cn/9333f852422406eb25c5b605e43e7984_393x165.png)
~~~
<2>. (arg1, arg2, …, argN) => 表达式(单一)
/* 相当于:(arg1, arg2, …, argN) =>{ return 表达式; }
这个表达式所代表是的值,就是返回值;
如果加了花括号,就不会有返回值了,需要自己添加 return 语句。
*/
~~~
![](https://box.kancloud.cn/ced0a930611710b4a8ec4973b27d59e0_252x235.png)
~~~
<4>. 当只有一个参数时,圆括号是可选的:
( 单一参数 ) => { 函数声明 }
单一参数 => { 函数声明 }
<5>. 没有参数的函数应该写成一对圆括号。() => { 函数声明 } ,
更合适作为匿名函数
~~~
>[success]如果要返回一个对象,简写形式为
![](https://box.kancloud.cn/a23ca7f85338500b8a5a6fdc3cbc92a1_285x121.png)
### 2. 实例
>[info]例 1:普通函数体内的 this在执行过程中会被动态绑定,有时候会导致麻烦。如下就没有得到预期的结果。
![](https://box.kancloud.cn/7475344a1458f64950952b89847bcb33_541x366.png)
>[info]例 2:箭头函数不会创建自己的this;它使用封闭执行上下文的this值(即词法作用域的 this)。
![](https://box.kancloud.cn/e5198d9713367e110f6f96ba9724bf6b_563x312.png)
>[info]例 3:箭头函数体的闭包( i=0 是默认参数)
~~~
var Add = (i=0) => { return (() => (++i) ) };
var v = Add();
v(); //1
v(); //2
~~~
>[info] 例 4:通过 call 或 apply 调用
~~~
由于 this 已经在词法层面完成了绑定,
通过 call() 或 apply() 方法调用一个函数时,
只是传入了参数而已,对 this 并没有什么影响:
var b = {
base : 2
};
var adder = {
base : 1,
addThroughCall: function(a) {
var f = v => v + this.base;
return f.call(b, a);
// 如果把这里的 b,改为 null 或者 undefined,输出结果一样
}
};
console.log(adder.addThroughCall(1));
~~~
>[info] 例 5:箭头函数没有 arguments 这个参数对象
![](https://box.kancloud.cn/20c1b15a663bc99fde7c2db4a0f265c3_560x164.png)
~~~
如果想要在不使用 arguments 的情况下获取参数,就需要用 ES6的一个新特性:
(...arg)=>{
//这里就可以通过 arg[n],来获取参数
}
~~~
>[info] 例 6:new 操作后面不能用箭头函数
![](https://box.kancloud.cn/f2e6108ed622c40685f067d6d3d2ec44_511x106.png)
>[info] 例 7:箭头函数没有 原型
![](https://box.kancloud.cn/6e0fc5a8dfcda85660cfdb0ff1b504db_323x82.png)