0.为什么会出现箭头函数？
1.传统的javascript函数语法并没有提供任何的灵活性，每一次你需要定义一个函数时，你都必须输入function () {},这至少会出现两个问题，ES6箭头函数都圆满解决了它，
第一个问题：代码输入快了容易输错成 funciton或者functoin或者其它，但是=>这个玩意你要是再写错就只能说有点过分了。
第二个问题：节省大量代码，我们先不用管下面的ES6代码为什么这样的语法能实现同样的功能，我们就直观的感受一下代码量。
ES5写法：
function addFive(num){ return num+5; } alert(addFive(10));
ES6写法：
var addFive = num=>num+5; alert(addFive(5));
没有function、没有return,没有()，没有{},这些全变成了浮云，世界好清静。
从上面我们就可以看到，使用箭头函数不仅仅能够避免错误，同时还能让我们少一丢丢代码，当然实际工作中远比这个代码量节省更多。
一方面是因为积累效应，每一部分少一丢丢合起来就多了，一方面是它还有更能节省代码和大幅提高工作效率的场景。
接下来我们就说说今天的主角--箭头函数。
ES6标准新增了一种新的函数：Arrow Function（箭头函数），也称“胖箭头函数”， 允许
使用“箭头”（=>）定义函数，是一种简写的函数表达式。
1、箭头函数语法
在ES5中我们实现一个求和的函数：
var sum = function(x, y) { return x + y }
要使用箭头函数，可以分两步实现同样的函数功能：
首先使用=>来替代关键词function
var sum = (x, y) => { return x + y }
这个特性非常好！！！
前面我们已经说过用=>来替代关键词function就意味着不会写错function了，这真是一个绝妙的设计思想！
其次，函数体只有一条返回语句时， 我们可以省略括号{}和return关键词：
var sum = (x, y) => x + y
再夸张一点点，如果只有一个参数时，()可省略。
这是箭头函数最简洁的形式，常用于作用简单的处理函数，比如过滤：
// ES5 var array = ['1', '2345', '567', '89']; array = array.filter(function (item) { return item.length > 2; }); // ["2345", "567"] // ES6 let array = ['1', '2345', '567', '89']; array = array.filter(item => item.length > 2); // ["2345", "567"]
箭头函数的主要使用模式如下：
// 一个参数对应一个表达式 param => expression;// 例如 x => x+2; // 多个参数对应一个表达式 (param [, param]) => expression; //例如 (x,y) => (x + y); // 一个参数对应多个表示式 param => {statements;} //例如 x = > { x++; return x;}; // 多个参数对应多个表达式 ([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;}; //表达式里没有参数 () => expression; //例如var flag = (() => 2)(); flag等于2 () => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1 //传入一个表达式，返回一个对象 ([param]) => ({ key: value }); //例如 var fuc = (x) => ({key:x}) var object = fuc(1); alert(object);//{key:1}
大家不要觉得好多啊,好麻烦，其实这些根本不复杂。投入一次，受益终生。（怎么感觉我像卖保险的……），写一两次你就习惯新的写法了。
2、箭头函数中的 this
箭头函数内的this值继承自外围作用域。运行时它会首先到它的父作用域找，如果父作用域还是箭头函数，那么接着向上找，直到找到我们要的this指向。
我们先看一道经典的关于this的面试题：
var name = 'leo'; var teacher = { name: "大彬哥", showName: function () { function showTest() { alert(this.name); } showTest(); } }; teacher.showName();//结果是 leo，而我们期待的是大彬哥，这里this指向了window，我们期待指向teacher
大家知道，ES5中的this说好听了叫"灵活"，说不好听就是瞎搞，特别容易出问题.而且面试还非常爱考，工作更不用说了，经常给我们开发捣乱，出现不好调试的bug，用E箭头函数解决这个问题就很得心应手了。
var name = 'leo'; var teacher = { name: "大彬哥", showName: function () { let showTest = ()=>alert(this.name); showTest(); } }; teacher.showName();
箭头函数中的this其实是父级作用域中的this。箭头函数引用了父级的变量词法作用域就是一个变量的作用在定义的时候就已经被定义好，当在本作用域中找不到变量，就会一直向父作用域中查找，直到找到为止。
由于this在箭头函数中已经按照词法作用域绑定了，所以，用call或者apply调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略：