JS中的一級函式(First class function)

tingyiiii
tingyiiii
Published in
Jan 2, 2021

當函式在那個語言中可以被視為跟其他的變數一樣時,我們稱那樣的程式語言擁有一級函式!(源自MDN)

第一次聽到一級函式/一等公民/第一級公民時,只覺得頭上多了好幾個問號???蛤?程式的世界中也有分高地位階嗎?(資本主義連程式裡的物件都不放過呀XDDD

經過上課老師講解搭配找資料後才了解,啊~所謂一級函式就是指當函式(function)可以在這個程式中被視為和變數一樣操作,例如存放在變數、物件、陣列中,甚至是當作參數引數傳來傳去,就稱為一級函式

  1. 存放在變數中
const apple = function(){
console.log('🍎')
}
apple() #=> 🍎

2. 存放在陣列中

const apple = [function(){ console.log('🍎') }]apple[0] #=> function(){ console.log('🍎') }apple[0]() #=> 🍎

3. 存放在物件中,作為屬性被呼叫

const apple = {
name: function(){ console.log('🍎') }
}

apple.name() #=> 🍎

4. 作為參數引數傳遞給另一個函式

const apple = function(funcA){
return funcA
}
# 將“function(){ console.log('🍊')}”作為引數(funA)傳入
const orange = apple(function(){ console.log('🍊')})

orange() #=> 🍊

實際應用

所以函式可以完全視為變數傳來傳去有什麼好處嗎?下面就來看一些實際在JS中常用到的例子:

1. setTimeout(function( ){ }, millisecond)

setTimeout(function(){
console.log('🍰')
}, 1000)
(一秒後) #=> 🍰

2. addEventListener(type, function( ){ })

document.addEventListener('DOMContentLoaded',function(){
console.log('🍕')
})
(頁面的html DOM讀取完成後) #=> 🍕

以上!!Happy hacking~

參考資料:

0 陷阱!0 誤解!8 天重新認識 JavaScript!https://www.tenlong.com.tw/products/9789864344130

https://ithelp.ithome.com.tw/articles/10192368

--

--