【JavaScript】箭頭函式及其應用
什麼是箭頭函式?
箭頭函式表示式的語法比函式表示式更短,並且不繫結自己的this,arguments,super或 new.target。箭頭函式與傳統函式最大的不同之處在,禁用new操作。
將箭頭函式限制為使用固定this引用,有利於JavaScript引擎優化處理。
其實箭頭函式本身沒有this,而自身的this會在函式宣告的時候做繫結,它是根據上級的function中的this來做繫結的
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();
// 6
箭頭功能可以有一個“簡寫體”或常見的“塊體”。
在一個簡寫體中,只需要一個表示式,並附加一個隱式的返回值。
在一個塊體中,必須使用明確的return語句。
var func = x => x * x;
// 隱式返回,一個引數時可不加括號
var func = (x, y) => { return x + y; };
// 顯式返回,多個引數時必須加括號
var add = () => { console.log("hey foo") };
// 如果沒有引數,那麼你必須要有一個空括號——不能沒有
注意:箭頭函式在引數和箭頭之間不能換行。
箭頭函式支援rest引數、支援預設引數、可以返回物件字面量
為什麼要擁抱ES6的箭頭函式?
柯里化箭頭函式不僅能讓程式碼更加清晰並具有可讀性(因為沒有ES5中多餘的語法干擾),還能減少錯誤的藏身之處,因為它能讓 bug 隱藏的部分更少。
“this”在箭頭函式中如何工作?
箭頭函式沒有它自己的this值。箭頭函式中的this值總是從封閉範圍繼承。在JavaScript中,每個函式都有它自己的this值,這取決於程式碼是如何呼叫函式的。
什麼情況下不能用箭頭函式?
箭頭函式無疑是 ES6 帶來的重大改進,在正確的場合使用箭頭函式能讓程式碼變的簡潔、短小,但某些方面的優勢在另外一些方面可能就變成了劣勢,在需要動態上下文的場景中使用箭頭函式你要格外的小心,這些場景包括:
- 定義物件方法
- 定義原型方法
- 定義建構函式
- 定義事件回撥函式