多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
[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)