你知道js的函式過載是什麼嗎？

王铁柱6發表於2024-11-30
JS函式

JavaScript 不像一些其他語言（例如 C++ 或 Java）那樣原生支援函式過載。在那些語言中，你可以在同一個作用域內定義多個同名函式，只要它們的簽名（引數數量或型別）不同即可。 JavaScript 的函式行為有所不同。

在 JavaScript 中，如果你定義了多個同名函式，後面的函式會覆蓋前面的函式。因此，你實際上只能擁有一個特定名稱的函式。

function greet(name) {
  console.log("Hello, " + name + "!");
}

function greet(name, timeOfDay) { // This overwrites the previous greet function
  console.log("Hello, " + name + "! Good " + timeOfDay + "!");
}

greet("Alice"); // Outputs: "Hello, Alice! Good undefined!"
greet("Bob", "morning"); // Outputs: "Hello, Bob! Good morning!"

為了實現類似過載的效果，JavaScript 開發者通常採用以下幾種策略：

  1. 使用預設引數: 這是最常見且推薦的方法。你可以為函式的引數設定預設值，這樣當呼叫函式時缺少某些引數時，就會使用預設值。
function greet(name, timeOfDay = "day") {
  console.log("Hello, " + name + "! Good " + timeOfDay + "!");
}

greet("Alice"); // Outputs: "Hello, Alice! Good day!"
greet("Bob", "morning"); // Outputs: "Hello, Bob! Good morning!"
  1. 檢查引數的數量或型別: 在函式內部，你可以檢查 arguments 物件的長度或使用 typeof 運算子來確定呼叫函式時傳遞的引數型別和數量，並根據不同的情況執行不同的邏輯。
function greet() {
  if (arguments.length === 1) {
    console.log("Hello, " + arguments[0] + "!");
  } else if (arguments.length === 2) {
    console.log("Hello, " + arguments[0] + "! Good " + arguments[1] + "!");
  }
}

greet("Alice"); // Outputs: "Hello, Alice!"
greet("Bob", "morning"); // Outputs: "Hello, Bob! Good morning!"
  1. 使用不同的函式名: 最簡單直接的方法是 simply 使用不同的函式名，例如 greetByName 和 greetByNameAndTimeOfDay。雖然這不算嚴格意義上的過載，但可以清晰地表達函式的目的。

總而言之，JavaScript 沒有真正的函式過載機制。開發者需要使用變通方法來實現類似的功能，其中使用預設引數和檢查引數型別是最常用的方法。

相關文章