箭头函数
箭头函数有两个好处。
1.他们比传统函数表达式简洁。
const arr = [1, 2, 3]; const squares = arr.map(x => x * x); // 传统函数表达式: const squares = arr.map(function (x) { return x * x });
2.箭头函数不会绑定关键字this，我们不需要用bind()或者that = this这种方法了
function UiComponent() { const button = document.getElementById('myButton'); button.addEventListener('click', () => { console.log('CLICK'); this.handleClick(); // lexical `this` }); }
和this同样没有被箭头函数绑定的参数有
argumentssuperthisnew.target
例如：
function foo() { setTimeout( () => { console.log("args:", arguments); },100); } foo( 2, 4, 6, 8 ); // args: [2, 4, 6, 8]
=>箭头函数并没有绑定 arguments，所以它会以 foo() 的 arguments 来取而代之，而 super 和 new.target 也是一样的情况
传统的函数不好的地方在于有一些非方法的函数，劫持了this
在JavaScript中，传统函数有3种角色：
1.非方法函数
2.方法
3.构造函数
这三种函数在使用中会有角色冲突，角色2、3的函数含有他们自己的this指向，但是角色1会对this进行劫持
你可以看这段传统JS代码：
function Prefixer(pp) { this.prefix = pp; } Prefixer.prototype.prefixArray = function (arr) { // (A) return arr.map(function (x) { // (B) // 无法正常工作: return this.prefix + x; // (C) }); }; var pre = new Prefixer('Hi '); pre.prefixArray(['Joe', 'Alex']);//TypeError: Cannot read property 'prefix' of undefined
在C行，我们希望访问this.prefix，但是却无法访问，因为this在非方法函数里是undefined，所以我们会得到报错。
在ECMAScript5中，有三种办法可以绕过这个问题：
方案1 that = this
function Prefixer(prefix) { this.prefix = prefix; } Prefixer.prototype.prefixArray = function (arr) { var that = this; // (A) return arr.map(function (x) { return that.prefix + x; }); }; var pre = new Prefixer('Hi '); pre.prefixArray(['Joe', 'Alex']); //[ 'Hi Joe', 'Hi Alex' ]
方案2 直接指定this的值
一部分数组方法会提供一个额外的参数值来修改this，注意A行
function Prefixer(prefix) { this.prefix = prefix; } Prefixer.prototype.prefixArray = function (arr) { return arr.map(function (x) { return this.prefix + x; }, this); // (A) };
方案3 绑定this
你可以使用bind()方法来告诉函数是谁调用的
function Prefixer(prefix) { this.prefix = prefix; } Prefixer.prototype.prefixArray = function (arr) { return arr.map(function (x) { return this.prefix + x; }.bind(this)); // (A) };
ECMAScript6 方案：箭头函数
箭头函数的工作方式很像方案3，但箭头函数压根不会修改this的作用域，而且你不需要给正常的函数加绑定。
下面是用了箭头函数后的代码：
function Prefixer(prefix) { this.prefix = prefix; } Prefixer.prototype.prefixArray = function (arr) { return arr.map((x) => { return this.prefix + x; }); };
如果完全用ES6写这段代码，可以写成这样，可以用一个类和一个更节省的方法写函数：
class Prefixer { constructor(prefix) { this.prefix = prefix; } prefixArray(arr) { return arr.map(x => this.prefix + x); // (A) } }
在A行，我们通过箭头函数省略了一些字符
- 如果函数只有一个参数(x)，那么可以省略括号
- 如果函数体只有一个表达式，那么可以省略return
箭头函数语法
参数：
() => { ... } // 没有参数
x => { ... } // 一个参数
(x, y) => { ... } // 多个参数
函数体：
x => { return x * x } // 语句块
x => x * x // 表达式，和上一行作用相同
如果函数体是一个表达式，会隐式返回结果，对比一下：
const squares = [1, 2, 3].map(function (x) { return x * x }); const squares = [1, 2, 3].map(x => x * x);
单个参数时括号可以省略
只有一个函数参数的时候，才可以省略小括号：
[1,2,3].map(x => 2 * x) //[ 2, 4, 6 ]
如果有多个参数的时候，就必须加上小括号：
[[1,2], [3,4]].map(([a,b]) => a + b) //[ 3, 7 ]
当你使用ES6函数参数默认值的时候也必须加括号：
[1, undefined, 3].map((x='yes') => x) //[1, yes', 3 ]
箭头函数的优先级比较低
如果你把箭头函数当成一个运算符的话，它会有比较低的优先级。
所以当箭头函数和其他运算符相遇时，其他运算符通常会赢。
例如下面示例，箭头函数和条件表达式挨在一起了：
const f = x => (x % 2) === 0 ? x : 0;
换句话说等同于下面的语句：
const f = x => ((x % 2) === 0 ? x : 0);
如果想提高箭头函数的优先级，可以使用括号括住函数，让函数返回结果作为条件：
const f = (x => ((x % 2) === 0)) ? x : 0;
另一方面，当你使用使用typeof这样的表达式作为函数体时，不需要添加括号
const f = x => typeof x;
关于箭头函数换行
es6禁止参数定义和箭头之间的换行符
const func1 = (x, y) // SyntaxError => { return x + y; }; const func2 = (x, y) => // OK { return x + y; }; const func3 = (x, y) => { // OK return x + y; }; const func4 = (x, y) // SyntaxError => x + y; const func5 = (x, y) => // OK x + y;
在参数中换行是可以的：
const func6 = ( // OK x, y ) => { return x + y; };
关于箭头函数的函数体
函数体内只有一个表达式是可以省略大括号的：
asyncFunc.then(x => console.log(x));
但是声明必须放在大括号中：
asyncFunc.catch(x => { throw x });
返回对象变量
如果想让函数返回一个花括号对象，就要加小括号：
const f1 = x => ({ bar: 123 });
f1();//{ bar: 123 }
不然的话，程序会认为这是一个块级作用域
const f2 = x => { bar: 123 };
> f2() //undefined
立即调用的箭头函数
还记得立即调用函数表达式（IIFE）吗？ 它们如下所示，用于模拟ECMAScript 5中的块范围和值返回块：
(function () { // open IIFE // inside IIFE })(); // close IIFE
你也可以用箭头函数模拟：
(() => { return 123 })()
提取方法
<a id="myButton">按钮</a> <script type="text/javascript" src="js/babel.min.js"></script> <script type="text/babel"> class KK { constructor() { var myButton = document.getElementById('myButton'); myButton.addEventListener('click', event => this.handleEvent(event)); //es5 myButton.addEventListener('click', this.handleEvent.bind(this)); } handleEvent(event) { console.log(event); } } var kk = new KK(); </script>
箭头函数还可以用于参数指定技巧
比如使用array.filter需要传入函数，而且需要指定this对象为bs，只能通过额外参数来指定
const as = new Set([1, 2, 3]); const bs = new Set([3, 2, 4]); const intersection = [...as].filter(bs.has, bs);// [2, 3]
可以用箭头函数优化写法：
const as = new Set([1, 2, 3]); const bs = new Set([3, 2, 4]); const intersection = [...as].filter(a => bs.has(a)); // [2, 3]
部分求值
以前可以利用bind来产生一个新的函数来求值，但是尴尬的是第一个参数必须要传入undefined，这变得难以理解：
function add(x, y) { return x + y; } const plus1 = add.bind(undefined, 1); console.log(plus1(2));//3
如果用箭头函数，就变得容易理解：
const plus1 = y => add(1, y);
箭头函数和普通函数对比
1.箭头函数中不会干涉下列关键字：super, this, new.target
2.箭头函数没有构造函数：常规函数有Construct和函数属性，而箭头函数没有，所以 new (() => {}) 会报错
除了以上两点，箭头函数和普通函数没有什么区别，typeof和instanceof输出的结果相同：
typeof (() => {}) //'function' () => {} instanceof Function //true typeof function () {} //'function' function () {} instanceof Function //true
JavaScript深入理解ES6中的箭头函数
箭头函数表达式的语法比函数表达式短，并且不绑定自己的 this，arguments，super或 new.target。此外，箭头函数最好在非方法函数中使用，且不能用作构造函数。
语法
基础语法
(param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression // 等价于: => { return expression; } // 如果只有一个参数，圆括号是可选的: (singleParam) => { statements } singleParam => { statements } // 无参数或者多参数的箭头函数需要使用圆括号或者下划线: () => { statements } _ => { statements }
高级语法
// 只返回一个对象字面量,没有其他语句时, 应当用圆括号将其包起来: params => ({foo: bar}) // 支持 Rest parameters 和 default parameters: (param1, param2, ...rest) => { statements } (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements } // 支持参数列表中的解构赋值 var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6
描述
箭头函数的引入有两个方面的作用：一是更简短的函数书写，二是对 this的词法解析。
更短的函数
更短的函数在函数式编程里很受欢迎。试比较：
var a = [ "Hydrogen", "Helium", "Lithium", "Beryllium" ]; var a2 = a.map(function(s){ return s.length }); var a3 = a.map( s => s.length );
不绑定 this
在箭头函数出现之前，每个新定义的函数都有其自己的 this 值（例如，构造函数的 this 指向了一个新的对象；严格模式下的函数的 this 值为 undefined；如果函数是作为对象的方法被调用的，则其 this 指向了那个调用它的对象）。在面向对象风格的编程中，这会带来很多困扰。
function Person() { // 构造函数 Person() 定义的 `this` 就是新实例对象自己 this.age = 0; setInterval(function growUp() { // 在非严格模式下，growUp() 函数定义了其内部的 `this`为全局对象, 不同于构造函数Person()的定义的 `this` this.age++; }, 1000); } var p = new Person(); // 在 ECMAScript 3/5 中，这个问题通过把this的值赋给变量， // 然后将该变量放到闭包中来解决。 function Person() { var self = this; // 也有人选择使用 `that` 而非 `self`. // 只要保证一致就好. self.age = 0; setInterval(function growUp() { // 回调里面的 `self` 变量就指向了期望的那个对象了 self.age++; }, 1000); }
除此之外，还可以使用 bind 函数，把期望的 this 值传递给 growUp() 函数。
箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，因此下面的代码将如期运行。
function Person(){ this.age = 0; setInterval(() => { this.age++; // this正确地指向了person对象 }, 1000); } var p = new Person();
与严格模式的关系
考虑到 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略。
var f = () => {'use strict'; return this}; f() === window; // 或全局对象
严格模式的其他规则依然不变.
使用 call 或 apply 调用
由于 this 已经在词法层面完成了绑定，通过 call() 或 apply() 方法调用一个函数时，只是传入了参数而已，对 this 并没有什么影响：
var adder = { base : 1, add : function(a) { var f = v => v + this.base; return f(a); }, addThruCall: function(a) { var f = v => v + this.base; var b = { base : 2 }; return f.call(b, a); } }; console.log(adder.add(1)); // 输出 2 console.log(adder.addThruCall(1)); // 仍然输出 2（而不是3）
不绑定参数（arguments）
箭头函数不会在其内部暴露出参数（arguments )： arguments.length, arguments[0], arguments[1] 等等，都不会指向箭头函数的 arguments，而是指向了箭头函数所在作用域的一个名为 arguments 的值（如果有的话，否则，就是 undefined。）
var arguments = 42; var arr = () => arguments; arr(); // 42 function foo() { var f = (i) => arguments[0]+i; // foo函数的间接参数绑定 return f(2); } foo(1); // 3 // 箭头函数没有自己的 arguments ， // 不过在大多数情形下，rest参数可以给出一个解决方案： function foo() { var f = (...args) => args[0]; return f(2); } foo(1); // 2
像方法一样使用箭头函数
如上所述，箭头函数表达式对非方法函数是最合适的。让我们看看当我们试着把它们作为方法时发生了什么。
'use strict'; var obj = { i: 10, b: () => console.log(this.i, this), c: function() { console.log( this.i, this) } } obj.b(); // undefined, Window obj.c(); // 10, Object {...} // 箭头函数没有定义this绑定。 // 另一个涉及Object.defineProperty():的示例： 'use strict'; var obj = { a: 10 }; Object.defineProperty(obj, "b", { get: () => { console.log(this.a, typeof this.a, this); return this.a+10; // represents global object 'Window', // therefore 'this.a' returns 'undefined' } });
使用 new 操作符
箭头函数不能用作构造器，和 new 一起用就会抛出错误。
var Foo = () => {}; var foo = new Foo(); // TypeError: Foo is not a constructor
使用原型属性
箭头函数没有原型属性。
var Foo = () => {}; console.log(Foo.prototype); // undefined
使用 yield 关键字
yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作生成器。
函数主体
箭头函数既支持简写也支持常规编写。
简写时只需要一个表达式和一个返回值。常规编写时必须有一个明确的返回值。
var func = x => x * x; // 简写函数 省略return var func = (x, y) => { return x + y; }; //常规编写 明确的返回值
返回文字表达式
请牢记，用 params => {object:literal} 这种简单的语法返回一个文字表达式是行不通的：
var func = () => { foo: 1 }; // undefined! var func = () => { foo: function() {} }; // SyntaxError: function statement requires a name（未定义函数语句） // 这是因为花括号（即 {} ）里面的代码被解析为序列语句了 //（例如， foo 被认为是一个标签, 而非文字表达式的组成部分）。
所以，记得用圆括号把文字表达式包起来：
var func = () => ({ foo: 1 });
换行
箭头函数在参数和箭头之间不能换行哦
var func = ()=> 1; // SyntaxError: expected expression, got '=>'
解析顺序
在箭头函数中的箭头不是操作符(或者运算符,就像’+ -‘那些)， 但是箭头函数有特殊的解析规则就是：相比普通的函数，受操作符的优先级影响。
let callback; callback = callback || function() {}; // ok callback = callback || () => {}; // SyntaxError:非法箭头函数属性 callback = callback || (() => {}); // ok
示例
// 一个空箭头函数,返回 undefined let empty = () => {}; (() => "foobar")() // 返回 "foobar" var simple = a => a > 15 ? 15 : a; simple(16); // 15 simple(10); // 10 let max = (a, b) => a > b ? a : b; // 简单的数组筛选（数组filter方法），运算（数组map方法）, ... var arr = [5, 6, 13, 0, 1, 18, 23]; var sum = arr.reduce((a, b) => a + b); // 66 var even = arr.filter(v => v % 2 == 0); // [6, 0, 18] var double = arr.map(v => v * 2); // [10, 12, 26, 0, 2, 36, 46] // 更多简明的promise链 promise.then(a => { // ... }).then(b => { // ... }); // 更易理解的无参数箭头函数 setTimeout( () => { console.log('I happen sooner'); setTimeout( () => { // deeper code console.log('I happen later'); }, 1); }, 1);
