javaES6箭頭函式的全新特性

大雄45發表於2023-02-24
導讀 胖箭頭函式(Fat arrow functions),又稱箭頭函式,是一個來自ECMAScript 2015(又稱ES6)的全新特性。有傳聞說,箭頭函式的語法“=>”,是受到了CoffeeScript 的影響,並且它與CoffeeScript中的“=>”語法一樣,共享this上下文。

javaES6箭頭函式的全新特性javaES6箭頭函式的全新特性
箭頭函式的產生,主要由兩個目的:更簡潔的語法和與父作用域共享關鍵字“this”。接下來,讓我們來看幾個詳細的例子。

新的函式語法

傳統的“JavaScript”函式語法並沒有提供任何的靈活性,每一次你需要定義一個函式時,你都必須輸入“function () {}”。“CoffeeScript”如今之所以那麼火,有一個不可忽略的原因就是它有更簡潔的函式語法。更簡潔的函式語法在有大量回撥函式的場景下好處特別明顯,讓我們從一個“Promise”鏈的例子看起:

< class="js">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); });
}

以下是使用新的箭頭函式語法進行重構後的程式碼:

< class="js">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”:

< class="js">const getVerifiedToken = selector => {  return getUsers()
    .then(users => users[0])
    .then(verifyUser)
    .then((user, verifiedToken) => verifiedToken)
    .catch(err => log(err.stack));
}

如果我們的函式內只有一條宣告(statement),我們可以不寫“{}”,這樣看上去會和“CoffeeScript”中的函式非常相似:

< class="js">const getVerifiedToken = selector =>
  getUsers()
    .then(users => users[0])
    .then(verifyUser)
    .then((user, verifiedToken) => verifiedToken)
    .catch(err => log(err.stack));

你沒有看錯,以上的例子是完全合法的ES6語法。當我們談論只包含一條宣告(statement)的箭頭函式時,這並不意味著這條宣告不能夠分成多行寫。

這裡有一個坑,當忽略了“{}”後,我們該怎麼返回空物件(“{}”)呢?

< class="js">const emptyObject = () => {};
emptyObject(); // ?

不幸的是,空物件“{}”和空白函式程式碼塊“{}”長得一模一樣。。以上的例子中,“emptyObject”的“{}”會被解釋為一個空白函式程式碼塊,所以“emptyObject()”會返回“undefined”。如果要在箭頭函式中明確地返回一個空物件,則你不得不將“{}”包含在一對圓括號中(“({})”):

< class="js">const emptyObject = () => ({});
emptyObject(); // {}

下面是一個更完整的例子:

< class="js">function () { return 1; }
() => { return 1; }
() => 1
 function (a) { return a * 2; }
(a) => { return a * 2; }
(a) => a * 2a => a * 2
 function (a, b) { return a * b; }
(a, b) => { return a * b; }
(a, b) => a * b 
function () { return arguments[0]; }
(...args) => args[0]
 
() => {} // undefined() => ({}) // {}
this

javaES6箭頭函式的全新特性javaES6箭頭函式的全新特性

“JavaScript”中“this”的故事已經是非常古老了,每一個函式都有自己的上下文。以下例子的目的是使用“jQuery”來展示一個每秒都會更新的時鐘:

< class="js">$('.current-time').each(function () {
  setInterval(function () {
    $(this).text(Date.now());
  }, 1000);
});

當嘗試在“setInterval”的回撥中使用“this”來引用DOM元素時,很不幸,我們得到的只是一個屬於回撥函式自身上下文的“this”。一個通常的解決辦法是定義一個“that”或者“self”變數:

< class="js">$('.current-time').each(function () {  var self = this;
 
  setInterval(function () {
    $(self).text(Date.now());
  }, 1000);
});

但當使用胖箭頭函式時,這個問題就不復存在了。因為它不產生屬於它自己上下文的“this”:

< class="js">$('.current-time').each(function () {
  setInterval(() => $(this).text(Date.now()), 1000);
});
arguments變數

javaES6箭頭函式的全新特性javaES6箭頭函式的全新特性
箭頭函式與普通函式還有一個區別就是,它沒有自己的“arguments”變數:

< class="js">function log(msg) {  const print = () => console.log(arguments[0]);
  print(`LOG: ${msg}`);
}
 
log('hello'); // hello

再次重申,箭頭函式沒有屬於自己的“this”>和“arguments”。但是,你仍可以透過rest引數,來得到所有傳入的引數陣列:

< class="js">function log(msg) {  const print = (...args) => console.log(args[0]);
  print(`LOG: ${msg}`);
}
 
log('hello'); // LOG: hello
關於yield

箭頭函式不能作為“generator”函式使用。

最後

箭頭函式是我最喜歡的ES6特性之一。使用“=>”來代替“function”是非常便捷的。但我也曾見過只使用“=>”來宣告函式的程式碼,我並不認為這是好的做法,因為“=>”也提供了它區別於傳統“function”,其所獨有的特性。我個人推薦,僅在你需要使用它提供的新特性時,才使用它:

  • 當只有一條宣告(statement)語句時,隱式“return”。
  • 需要使用到父作用域中的“this”。

原文來自:


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2933015/,如需轉載,請註明出處,否則將追究法律責任。

相關文章