关于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、所有其他情况(函数声明、较长的多语句表达式、需要此法名称标识符(递归等)函数)以及不符合以上几点,一般应该避免使用箭头函数

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章