箭頭函數是一種利用(=>)箭頭定義函數的新語法,但是它與傳統的JavaScript函數有不同,主要集中在下面方面
(1)沒有this、super、arguments、new.target綁定
箭頭函數中的this、super、arguments及new.target這些值由外圍最近一層非箭頭函數決定
(2)不能通過new關鍵字調用
箭頭函數沒有[[Construct]] 方法,所以不能用作構造函數,如果通過new調用,會出錯
(3)沒有原型
因為不能通過new關鍵字調用,沒有構造原型的需求,所以箭頭函數不存在prototype屬性
(4)不可以改變this的綁定
函數內部的this值不可改變,在函數生命周期保持一致
(5)不支持arguments對象
箭頭函數沒有arguments綁定,所以你必須通過命名參數和不定參數兩種形式訪問函數的參數
(6)不支持重復命名的參數
無論在嚴格或者非嚴格模式下,箭頭函數都不支持重復命名的參數,而在傳統函數中,只有嚴格模式下不支持
箭頭函數語法
let reflect = value => value;
相當於:
let reflect = function(value){
return value;
}
如果要傳入兩個或兩個以上的參數,要在參數的兩側添加一對小括號,比如:
如果函數沒有參數時,也要寫一對小括號
如果你希望為函數編寫由多個表達式組成的更傳統的函數體,那么需要花括號包裹函數體,並顯式地定義一個返回值
如果你想創建一個空函數
如果你想返回一個對象字面量
創建立即執行函數表達式
(1)箭頭函數沒有this綁定
看以下示例:
以上代碼會報錯,在綁定click事件時,回調函數里面的this綁定的是事件目標對象的引用(document),而沒有綁定PageHandler
可以使用bind()方法顯式地將this綁定到PageHandler函數上來修正,如下:
調用bind(this)后實際上創建了一個新函數,它的this綁定到當前的this,也就是PageHandler
為了避免創建額外的函數,我們可以用箭頭函數
上述事件處理程序中調用了一個this.doSomething()的箭頭函數,
此處this與init()里面的this一致
箭頭函數缺少正常函數所擁有的prototype屬性,它的設計初衷是"即用即棄",所以不能用它來定義新的類型
箭頭函數內部的this值取決於該函數外部的非箭頭函數的this值,且不能通過call(),apply(),bind()來改變this值
箭頭函數可以用來簡化數組
(2)箭頭函數沒有arguments綁定
箭頭函數沒有自己的arguments對象,它始終可以訪問外圍函數的arguments對象
(3)箭頭函數的辨識方法
typeof 和 instanceof 操作符調用箭頭函數和其他函數一樣
仍然可以在箭頭函數上調用call(),apply(),bind()方法,但是不會改變箭頭函數的this值