关于ES中的箭头函数

注：此文来源《你不知道的JS--下卷》

一、特点

1、箭头函数为函数表达式，并不存在箭头函数声明

2、箭头函数是匿名函数表达式，没有用于递归或事件绑定/解绑定的命名引用

3、支持普通函数参数所有功能，包括默认值、解构、rest参数等

4、语法清晰简洁

二、设计的主要目的

以特定的方式改变this的行为特性，解决this相关编码的特殊而常见的痛点

注：在箭头函数内部，this绑定不是动态的，而是词法的

如：

var controller = {

   makeRequest: function() {

      var self = this;

      btn.addEventListener('click', function() {

        self.makeRequest();

      }, false)

   }

}

此时this的绑定是动态的，代码中通过self变量依赖于词法作用于的可预测性

var controller = {

   makeRequest: function() {

      btn.addEventListener('click', () => {

        this.makeRequest();

      }, false)

   }

}

代码中的点头函数回调中的词法this与封装的函数makeRequest()指向同样的值，即=> 是 var self = this; 的词法替代形式

var controller = {

   makeRequest: () => {

     this.helper();

   },

   helper: () => {}

}

此时this是从包围作用域中词法继承而来的，指向全局对象

三、适用规则

1、若有一个简短单句在线函数表达式:

1）唯一的语句是return某个计算的值

2）函数内部没有this引用

3）没有自身引用（递归、事件绑定/解绑定）

4）不会要求函数执行3）中的事件

则可以安全的重构为=>箭头函数

2、若有一个内层表达式：

1）依赖于包含它的函数中调用var self = this hack

2）依赖于.bind(this)来确定适当的this绑定

则可以安全的重构为=>箭头函数

3、若内层函数表达式依赖于封装函数中某种像var args = Array.prototype.slice.call(arg)来保证arg的复制，则可以安全的重构为=>箭头函数

4、所有其他情况（函数声明、较长的多语句表达式、需要此法名称标识符（递归等）函数）以及不符合以上几点，一般应该避免使用箭头函数