關於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、所有其他情況(函數聲明、較長的多語句表達式、需要此法名稱標識符(遞歸等)函數)以及不符合以上幾點,一般應該避免使用箭頭函數

 

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