iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0
自我挑戰組

菜鳥的前端學習筆記系列 第 19

DAY19 - 接著再聊函式

  • 分享至 

  • xImage
  •  

前言

函式的第一天認識到它有著封裝程式碼及需要時再呼叫的特性,而第二天藉由匿名函式跟箭頭函式了解到函式也可以當作變數來操作,今天就來認識更多操作函式的方法吧!


常見操作函式的方法

昨天認識到函式能放進變數當成值來進行操作,但其實還可以將函式當作物件的屬性:

const identity = {
  name: 'Mike',
  birthday: '1992, 10, 10',
  age: 30,
  job: ['front-end engineer', 'novelist'],
	bmi: {
	  height: 170,
		weight: 68
  },
	greet: function () {
		return `Hi, I'm ${this.name}, ${this.age} years old and I'm a ${this.job[0]}!`
	}
}

console.log(identity.greet())

從上面的例子可以看到在identity這個物件中,包含了一個greet的函式,而該函式可以藉由this的方式來將物件中的值取出放入欲輸出的字串中,最終形成一段簡單的打招呼語句。

此外,函式還可以當成另一個函式的回傳值或參數,像是:

function greet(callback) {
  return `Hey, are we go eat ${callback()} food?`
}

function lunch() {
  const chooseFood = randomNumber()
  if (chooseFood === 1) {
    return `Japanese`
  } else if (chooseFood === 2) {
    return `Thai`
  } else {
    return `Korean`
  }
}

function randomNumber() {
  return Math.floor(Math.random() * 3) + 1
}

console.log(greet(lunch)) // 這裡的lunch並不是呼叫函式哦

嗯這是個邀約人家吃飯的函式,咳咳…我們可以稍微拆分這個例子來看:

  1. 首先greet是需要放入參數的,我們將lunch的名字傳入(這邊只需要放入名字哦)後,並在回傳的字串中呼叫lunch
  2. 進入lunch後,先將randomNumber函式存入變數之中並藉此呼叫來取得隨機1-3的數字,藉由回傳的隨機數字來判斷要邀請人家吃什麼類型的料理好,並將對應的料理回傳回去greet
  3. 最終greet輸出時,便會獲得藉由上述路徑取得的完整語句。

函式的操作方式相對靈活,剛學習時可以先認識再藉由練習來慢慢熟練更多用法,有時候也可以將舊題拿出來新解其實也會得到滿不錯的經驗值哦!


很淺很淺地談this

this在多數情況下會因為函式呼叫的方式而得到不同的內容,像上面的例子其實相對來說是比較直觀的,從例子中能看到this.name似乎只有可能是Mike而沒有可能是其他人的名字,但當程式碼越來越複雜時,漸漸地就又開始沒那麼確定此this是否為彼this了…

剛學習的時候,真的很容易被this搞得黑人問號,雖然網上已經有非常多很棒的前輩們撰寫的文章可以參考,但在不熟悉不確定的情況下,我還是會先輸出看一下確定是否為自己預想的結果,如果是才繼續動作,如若不是便會回頭重新審視程式碼及自己的思維邏輯是否哪裡出了問題。


上一篇
DAY18 - 繼續聊函式
下一篇
DAY20 - DOM前暖身之HTML
系列文
菜鳥的前端學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言