回头看
首先，让我们回顾一下下箭头函数的基本语法。
ES6中添加了箭头函数：
中选择所需的墙类型。
如果需要将多个参数传递给函数：
如果函数的代码块需要多个语句：
如果需要直接返回对象：
与变量构造合并：
很多情况下，这样使用可能是不可能的，所以再举一个例子吧。 例如，在React和Immutable的技术选择中，我们处理一个事件就会变成这样：
实际上可以简化为以下内容
进行比较
本文重点比较了箭号函数和常规函数。
主要区别如下。
没有this
因为箭头函数没有this，所以必须通过查找范围链来确定this的值。
也就是说，如果箭头函数包含在非箭头函数中，则this将绑定到最近非箭头函数的this。
模拟实际开发实例。
我们的需求是点击按钮，改变那个按钮的背景颜色。
为了便于开发，如果我们需要远离Button组件并使用，可以直接：
HTML代码如下：
JavaScript代码如下：
看起来没有问题，但结果是uncaught typeerror : cannotreadproperty ‘ style ‘ of undefined
这是因为使用addEventListener ()在元素中注册事件时，事件函数的this值是对该元素的引用。
因此，如果我们在setBgColor中指向console.log(this )，this指向按钮元素，则this.element为undefined，当然报告错误。
因为this指向按钮元素，所以让我们直接更改setBgColor函数。
你能解决这个问题吗？
确实可以这样做，但在实际开发中，setBgColor可能还调用其他函数。 例如，写如下。
因此，setBgColor的this希望指向实例对象，并允许调用其他函数。
利用ES5，我们通常这样做：
为了避免高级监听器的影响，请使用bind强制将setBgColor ()的this绑定为实例对象
使用ES6可以更好地解决这个问题。
因为箭头函数没有this，所以在外层查找this的值，即绑定事件的this。 此时，this指向实例对象，因此可以正确调用this.setBgColor方法，this.setBgColor中的this也正确指向实例对象。
请注意，在此添加另一个，bindEvent和setBgColor使用普通函数的形式，而不是箭头函数。 如果更改为箭头函数，则函数中的this将指向窗口对象。
最后，因为箭号函数没有this，所以也不能用call ()、apply ()、bind ()等方法改变this的方向。 请看一个例子。
没有规则
箭号函数没有自己的arguments对象。 这不一定是坏事。 因为箭头函数可以访问外围函数的arguments对象。
如果我们要访问箭头函数的参数呢？
可以以命名参数或rest参数的形式访问参数：
3 .不能从new关键字调用
JavaScript函数有两个内部方法： [[Call]]和[[Construct
]]。
>
当通过 new 调用函数时，执行 [[Construct]] 方法，创建一个实例对象，然后再执行函数体，将 this 绑定到实例上。
>
当直接调用的时候，执行 [[Call]] 方法，直接执行函数体。
>
箭头函数并没有 [[Construct]] 方法，不能被用作构造函数，如果通过 new 的方式调用，会报错。
>
>
4. 没有 new.target
因为不能使用 new 调用，所以也没有 new.target 值。
>
关于 new.target，可以参考 http://es6.ruanyifeng.com/#docs/class#new-target-%E5%B1%9E%E6%80%A7
>
5. 没有原型
由于不能使用 new 调用箭头函数，所以也没有构建原型的需求，于是箭头函数也不存在 prototype 这个属性。
>
>
6. 没有 super
连原型都没有，自然也不能通过 super 来访问原型的属性，所以箭头函数也是没有 super 的，不过跟 this、arguments、new.target 一样，这些值由外围最近一层非箭头函数决定。
>
总结
最后，关于箭头函数，引用 MDN 的介绍就是：
>
An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.
>
翻译过来就是：
>
箭头函数表达式的语法比函数表达式更短，并且不绑定自己的this，arguments，super或 new.target。这些函数表达式最适合用于非方法函数(non-method functions)，并且它们不能用作构造函数。
>
那么什么是 non-method functions 呢？
>
我们先来看看 method 的定义：
>
A method is a function which is a property of an object.
>
对象属性中的函数就被称之为 method，那么 non-mehtod 就是指不被用作对象属性中的函数了，可是为什么说箭头函数更适合 non-method 呢？
>
让我们来看一个例子就明白了：
>
>
自执行函数
自执行函数的形式为：
>
>
或者
>
>
利用箭头简化自执行函数的写法：
>
>
但是注意：使用以下这种写法却会报错：
>
>
为什么会报错呢？嘿嘿，如果你知道，可以告诉我~
>
ES6 系列
ES6 系列目录
>
ES6 系列预计写二十篇左右，旨在加深 ES6 部分知识点的理解，重点讲解块级作用域、标签模板、箭头函数、Symbol、Set、Map 以及 Promise 的模拟实现、模块加载方案、异步处理等内容。
>
如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。
原文标题：箭头函数– ECMAScript 6进阶 – Js中文网 · 前端进阶资源教程