函式的第一天認識到它有著封裝程式碼及需要時再呼叫的特性,而第二天藉由匿名函式跟箭頭函式了解到函式也可以當作變數來操作,今天就來認識更多操作函式的方法吧!
昨天認識到函式能放進變數當成值來進行操作,但其實還可以將函式當作物件的屬性:
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並不是呼叫函式哦
嗯這是個邀約人家吃飯的函式,咳咳…我們可以稍微拆分這個例子來看:
greet
是需要放入參數的,我們將lunch
的名字傳入(這邊只需要放入名字哦)後,並在回傳的字串中呼叫lunch
lunch
後,先將randomNumber
函式存入變數之中並藉此呼叫來取得隨機1-3的數字,藉由回傳的隨機數字來判斷要邀請人家吃什麼類型的料理好,並將對應的料理回傳回去greet
greet
輸出時,便會獲得藉由上述路徑取得的完整語句。函式的操作方式相對靈活,剛學習時可以先認識再藉由練習來慢慢熟練更多用法,有時候也可以將舊題拿出來新解其實也會得到滿不錯的經驗值哦!
this
在多數情況下會因為函式呼叫的方式而得到不同的內容,像上面的例子其實相對來說是比較直觀的,從例子中能看到this.name
似乎只有可能是Mike而沒有可能是其他人的名字,但當程式碼越來越複雜時,漸漸地就又開始沒那麼確定此this
是否為彼this
了…
剛學習的時候,真的很容易被this
搞得黑人問號,雖然網上已經有非常多很棒的前輩們撰寫的文章可以參考,但在不熟悉不確定的情況下,我還是會先輸出看一下確定是否為自己預想的結果,如果是才繼續動作,如若不是便會回頭重新審視程式碼及自己的思維邏輯是否哪裡出了問題。