是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2019-05-19 克服JS奇怪的部分系列

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

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

前言

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

重載函數

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

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

1
2
3
4
5
6
7
8
9
function greet(firstName, lastName, languaue) {
  languaue = languaue || 'en';
  if (languaue === 'en') {
    console.log('Hello ' + firstName + ' ' + lastName);
  };
  if (languaue === 'es') {
    console.log('Hola ' + firstName + ' ' + lastName);
  };
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 的預設參數值來給預設值 ↓

1
2
3
4
5
6
7
8
9
10
11
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 奇怪的部分

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

buymeacoffee | line | portaly

Terminal

相關文章

[JS奇怪的世界]No.? 閉包番外篇

2019-05-27

[JS奇怪的世界]No.68 JavaScript奇怪的部分

2019-05-25

[JS奇怪的世界]No.67 增加jQuery的支援

2019-05-25

[JS奇怪的世界]No.66 屬性與可鏈結方法

2019-05-25

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme