iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

圖解Javascript面試題目30天系列 第 5

Day 05 Function是什麼?能吃嗎? (4) Lambda, or Arrow Functions

「正面對決!比箭頭鬼還難分難解的箭頭函式!」

昨天的範例使用到了很多的箭頭函式,那麼我們今天就來好好了解一下他的特殊規則與用法吧!

10. What are lambda or arrow functions

An arrow function is a shorter syntax for a function expression and does not have its own this, arguments, super, or new.target. These functions are best suited for non-method functions, and they cannot be used as constructors.

@翻譯翻譯

箭頭函式是一種更為簡短的函式表達式,而且沒有自己的THIS引數繼承、或是new.target。箭頭函式最適合拿來作非方法的函式,而無法被作為建構式

  • THIS:箭頭函式中不是不能使用THIS,而是THIS所指到的東西不太一樣。這個部分之後會有單獨的一篇來詳細說明:D (忍術 我現在不想面對之術)
  • 引數:第一天有提到的,引數就是呼叫一個函式時,帶給它使用的內容。
  • 繼承:一般函式在子層可以使用super()來呼叫父層的建構式,以及可以用super.方法名稱來使用父層的方法。更詳盡的部分之後介紹原型鏈時會一併說明:D

    In a child class, you use super() to call its parent’s constructor and super.methodName to access its parent’s methods.
    What is super() in JavaScript?

  • 建構式:在根據類別建立物件實體時,就是在執行類別的「建構式」,講到物件時會再有更詳盡的解說:D

範例

以下將示範如何把我們常用的函式表示法轉換為箭頭函式最簡化的樣子。其實Day 03時就有偷偷用到匿名函式喔,讓我們把Day 03的範例還原成一般的函式表示式,然後改寫看看吧!

// 一般函式表示式
function cutNail(catName){
  return `Cut ${catName}'s nails. ${catName}: 'Meowˋ^ˊ!!'`
}
console.log(cutNail('Leo')) // "Cut Leo's nails. Leo: 'Meowˋ^ˊ!!'"

// 宣告一個常數 cutNail,令其指向一個匿名函式(catName) => { //do something }
const cutNail = (catName) => {
  return `Cut ${catName}'s nails. ${catName}: 'Meowˋ^ˊ!!'`
}

// 花括弧內若只有一行,則可以去掉花括弧
const cutNail = (catName) => return `Cut ${catName}'s nails. ${catName}: 'Meowˋ^ˊ!!'`

// 只有一個參數時可以不加小括號
const cutNail = catName => return `Cut ${catName}'s nails. ${catName}: 'Meowˋ^ˊ!!'`

// 但沒有參數時,一定要有小括號(執行時也要加唷,不然會印出這個匿名函式本身)
const cutNailLeo = () => "Cut Leo's nails. Leo: 'Meowˋ^ˊ!!'"
console.log(cutNailLeo()) // "Cut Leo's nails. Leo: 'Meowˋ^ˊ!!'"
console.log(cutNailLeo) // () => "Cut Leo's nails. Leo: 'Meowˋ^ˊ!!'"

是不是很簡單又易讀呀!!!


最後,明天預計是這個function小主題的倒數第二篇,明天就來看看什麼是 pure function 吧:DDD


後記:

箭頭函式說完了,那麼什麼是Lambda呢?其實也是類似的概念(́◉◞౪◟◉‵)

In computer programming, an anonymous function (function literal, lambda abstraction, or lambda expression) is a function definition that is not bound to an identifier. Anonymous functions are often arguments being passed to higher-order functions, or used for constructing the result of a higher-order function that needs to return a function. If the function is only used once, or a limited number of times, an anonymous function may be syntactically lighter than using a named function.
Wikipedia - Anonymous function

@翻譯翻譯

在電腦程式中,匿名函式(function literal, lambda abstraction, or lambda expression)是一個在定義時沒有被綁定識別字的函式。匿名函式經常作為引數傳遞給更高階的函式,或者作為建構高階函式時回傳的函式。若是一個函式被使用的次數非常稀少(像極了日本製造壓縮機)時,使用這種匿名函式就會比起具名的函式在句法上更為簡潔。

而在JavaScript之中,Lambda與匿名函式的確經常被劃上等號。但其實還是有些微的不同(參考:Lambda Functions Vs Anonymous Functions in JavaScript
由於這實在太適合寫成另一個篇章了,所以就下次再見囉!

另外,聽說我的鐵人賽標題,是「圖解Javascript面試題目30天」,而今天已經第五天了。
說好的「圖」呢?!

圖還在準備中(´;ω;`)


上一篇
Day 04 Function是什麼?能吃嗎? (3) Currying Function
下一篇
Day 06 Function是什麼?能吃嗎? (5) Pure Function
系列文
圖解Javascript面試題目30天9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言