胖箭頭函數(Fat arrow functions),又稱箭頭函數,是一個來自ECMAScript 2015(又稱ES6)的全新特性。有傳聞說,箭頭函數的語法=>,是受到了CoffeeScript 的影響,并且它與CoffeeScript中的=>語法一樣,共享this上下文。
箭頭函數的產生,主要由兩個目的:更簡潔的語法和與父作用域共享關鍵字this。接下來,讓我們來看幾個詳細的例子。
新的函數語法
傳統的JavaScript函數語法并沒有提供任何的靈活性,每一次你需要定義一個函數時,你都必須輸入function () {}。
CoffeeScript如今之所以那么火,有一個不可忽略的原因就是它有更簡潔的函數語法。更簡潔的函數語法在有大量回調函數的場景下好處特別明顯,讓我們從一個Promise鏈的例子看起:
function getVerifiedToken(selector) { return getUsers(selector) .then(function (users) { return users[0]; }) .then(verifyUser) .then(function (user, verifiedToken) { return verifiedToken; }) .catch(function (err) { log(err.stack); });}以下是使用新的箭頭函數語法進行重構后的代碼:
function getVerifiedToken(selector) { return getUsers(selector) .then(users => users[0]) .then(verifyUser) .then((user, verifiedToken) => verifiedToken) .catch(err => log(err.stack));}以下是值得注意的幾個要點:
function和{}都消失了,所有的回調函數都只出現在了一行里。
當只有一個參數時,()也消失了(rest參數是一個例外,如(...args) => ...)。
當{}消失后,return關鍵字也跟著消失了。單行的箭頭函數會提供一個隱式的return(這樣的函數在其他編程語言中常被成為lamda函數)。
這里再著重強調一下上述的最后一個要求。僅僅當箭頭函數為單行的形式時,才會出現隱式的return。當箭頭函數伴隨著{}被聲明,那么即使它是單行的,它也不會有隱式return:
const getVerifiedToken = selector => { return getUsers() .then(users => users[0]) .then(verifyUser) .then((user, verifiedToken) => verifiedToken) .catch(err => log(err.stack));}如果我們的函數內只有一條聲明(statement),我們可以不寫{},這樣看上去會和CoffeeScript中的函數非常相似:
const getVerifiedToken = selector => getUsers() .then(users => users[0]) .then(verifyUser) .then((user, verifiedToken) => verifiedToken) .catch(err => log(err.stack));
你沒有看錯,以上的例子是完全合法的ES6語法。當我們談論只包含一條聲明(statement)的箭頭函數時,這并不意味著這條聲明不能夠分成多行寫。
這里有一個坑,當忽略了{}后,我們該怎么返回空對象({})呢?
const emptyObject = () => {};emptyObject(); // ?
新聞熱點
疑難解答
圖片精選