[JS奇怪的世界]No.32 框架小叮嚀:重載函數

發表於 2019-05-19 分類於克服JS奇怪的部分系列

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

這邊要講一個很特別的東西，在 JavaScript 沒有的，但其他程式語言有的東西以及為何它不需要重載函數 (function overloading)

前言

這邊要講一個很特別的東西，在 JavaScript 沒有的，但其他程式語言有的東西以及為何它不需要重載函數 (function overloading)

重載函數

在其他的語言 C#、C、JAVA 都有一個叫重載函數的概念，這表示我能讓同一個函數擁有不同數量的參數，但 JavaScript 不行，因為函數就是物件，所以讓我們來準備看一下範例比較清楚。

首先如果我們想要用一些其他的方式來呼叫 greet 方法，但又不想每次都要傳入 languaue，那就可以使用先前使用一個方式來傳入預設值或是使用 ES6 的預設參數來解決這個問題 ↓

function greet(firstName, lastName, languaue) {
  languaue = languaue || 'en';
  if (languaue === 'en') {
    console.log('Hello ' + firstName + ' ' + lastName);
  };
  if (languaue === 'es') {
    console.log('Hola ' + firstName + ' ' + lastName);
  };
}

那我們呼叫的時候就可以這樣子呼叫。

function greet(firstName, lastName, languaue) {
  languaue = languaue || 'en';
  if (languaue === 'en') {
    console.log('Hello ' + firstName + ' ' + lastName);
  };
  if (languaue === 'es') {
    console.log('Hola ' + firstName + ' ' + lastName);
  };
  console.log('------');
}

greet('John', 'Doe', 'en');
greet('John', 'Doe', 'es');
greet('John', 'Doe');

greet

課程也有講，如果想要函數有兩種不同的版本，我們也就可以不用傳這麼多資訊，就像這樣 ↓

function greet(firstName, lastName, languaue) {
  languaue = languaue || 'en';
  if (languaue === 'en') {
    console.log('Hello ' + firstName + ' ' + lastName);
  };
  if (languaue === 'es') {
    console.log('Hola ' + firstName + ' ' + lastName);
  };
  console.log('------');
}

function greetEnglish(firstName, lastName) {
  greet(firstName, lastName, 'en');
}

function greetSpanish(firstName, lastName) {
  greet(firstName, lastName, 'es');
}

greetEnglish('John', 'Doe');
greetSpanish('John', 'Doe');

兩種不同的版本

而上面這個做法就是一個簡單處理函數呼叫的方式，另外我們可以使用 ES6 的預設參數值來給預設值 ↓

function greet(firstName, lastName, languaue = 'en') {
  if (languaue === 'en') {
    console.log('Hello ' + firstName + ' ' + lastName);
  }
  if (languaue === 'es') {
    console.log('Hola ' + firstName + ' ' + lastName);
  };
}

greetEnglish('John', 'Doe');
greetSpanish('John', 'Doe','es');

ES6 預設參數值

圖源

JavaScript 全攻略:克服 JS 奇怪的部分