ES6语法糖之箭头函数

普通函数中this的绑定是很复杂多变的，ES6箭头函数=>以特定的方式改变this的行为特性，解决this相关编码的
一个特殊又常见的痛点。

箭头函数也不老是比普通函数好，当这个函数越长，=>带来的好处越小，这个函数越短，=>带来的好处越大。因此
只在确实须要简短的在线函数表达式的时候才用=>，而对于那些通常长度的函数则无需改变。

var controller = { 
     makeRequest: function(){ 
     var self = this; 
     btn.addEventListener( "click", function(){ 
        // .. 
            self.makeRequest(); 
        }, false ); 
     } 
};

在这个例子中，咱们使用var self = this这一Hack，而后使用self.makeRequest，由于咱们传入addEVentListener的回调函数内部，this绑定和
makeRequest()自己的this绑定不同。普通函数中的this绑定是动态的，咱们须要经过self变量依赖词法做用域的可预测性。

箭头函数中的this绑定不是动态的，而是词法的。

var controller = { 
     makeRequest: function(){ 
         btn.addEventListener( "click", () => { 
             // .. 
            this.makeRequest(); 
         }, false ); 
     } 
};

咱们使用=>箭头函数替代普通函数，箭头函数回调中的词法this和makeRequest()中是同样的。=>就是var self = this的词法替代形式。

咱们使用Babel转换一下：

发现，在使用=>以前，也就是箭头函数的外层，先使用var self = this保存了this

再看一个例子：

var controller = { 
     makeRequest: () => { 
         // .. 
        this.helper(); 
     }, 
     helper: () => { 
         // .. 
     } 
}; 
controller.makeRequest();

尽管咱们以 controller.makeRequest(..) 的形式调用，this.helper 引用仍是会失败，由于
这里的 this 并不像日常同样指向 controller。那么它指向哪里呢？它是从包围的做用域中
词法继承而来的 this。在前面的代码中也就是全局做用域，其中 this 指向那个全局对象。

• 箭头函数没有本身的this，只有词法this，继承自父层
• 箭头函数没有本身的arguments数组，只有词法arguments，继承自父层
• 箭头函数也没有super
• 箭头函数也没有new.target

做用域和做用域链

必定要记住箭头函数的特色，在适当的地方使用。
若是是写对象的方法，要使用普通函数，由于普通函数中有this，通常状况下指向该对象，而箭头函数没有this,则访问不到对象的其余属性了。

若是返回值是一个简单的表达式，且这个函数内部没有this的引用，且没有自身引用（递归、绑定/解绑定，且不会要求函数执行这些，可使用箭头函数。

若是函数内部有不少语句，仍是要用普通函数，保证可读性。