箭頭函數


箭頭函數是一種利用(=>)箭頭定義函數的新語法,但是它與傳統的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值

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM