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