JavaScript 中的函式
本文將解釋 JavaScript 中的函式。
YouTube Video
JavaScript 中的函式
函式在 JavaScript 中是執行特定任務的可重複使用的代碼塊。使用函式可以提高代碼的可讀性並使維護變得更加容易。函式可以用多種方式定義，並且可以通過參數和返回值靈活操作。
定義函式的方法
函式聲明
函數可以使用 function 關鍵字來定義。函式聲明會在代碼執行之前被提升，因此可以在定義之前被調用。
1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4 return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice
在此範例中，因為在 greet 函式聲明之前已被調用，會顯示 Hello, Everyone 和 Hello, Alice。
函式表達式
函式也可以通過賦值給變數來定義。在這種情況下，函式不會被提升，因此只能在定義之後調用。
1const greet = function(name) {
2 return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob
在此範例中，會顯示 Hello, Bob。
箭頭函式
箭頭函式是一種使用更簡短語法來定義函式的方法。在使用匿名函式（無名稱的函式）時非常有用。箭頭函式在 this 關鍵字的行為上也有不同之處。
1const greet = (name) => {
2 return "Hello, " + name;
3};
4
5// When it can be expressed in a single line,
6// `return` and curly braces can be omitted
7const greetShort = name => "Hello, " + name;
8
9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave
在此範例中，函式可以定義為 greet 和 greetShort。如果函式只有一行，可以像 greetShort 一樣省略 {}（大括號）。
函式的結構
參數
傳遞給函式的值稱為參數。在定義函式時指定參數，可以在調用函式時傳遞值。
1function add(a, b) {
2 return a + b;
3}
4
5console.log(add(2, 3)); // 5
默認參數
如果沒有給參數傳遞值，可以指定一個默認值。
1function greet(name = "Guest") {
2 return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice
在此範例中，如果調用 greet()，將使用默認值 Guest。
返回值
你可以使用 return 語句從函式中返回一個返回值。如果沒有 return 語句，函式將返回 undefined。
1function greet(name) {
2 console.log('Hello, ' + name + '!');
3}
4function square(num) {
5 return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined
在此範例中，由於 greet 沒有返回值，其返回值為 undefined。
匿名函式
沒有名稱的函式稱為匿名函式。它們通常用作函式表達式或箭頭函式。
1const double = function(num) {
2 return num * 2;
3};
4
5console.log(double(5)); // 10
立即執行函式表達式 (IIFE)
立即執行函式表達式（IIFE）是一種在定義後立即執行的函式。它通常用於控制作用域。
1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3 console.log("This is an IIFE");
4})(); // This is an IIFE
它在聲明時立即執行。
回調函式
將函式作為參數傳遞給另一個函式以便稍後執行，稱為回調函式。它常用於異步處理和事件處理。
1function processData(callback) {
2 let data = "Processed Data";
3 callback(data);
4}
5
6processData(function(result) {
7 console.log(result); // Processed Data
8});在此範例中，一個輸出值到控制台的函式被傳遞作為回調函式。
遞歸函式
函式調用自身被稱為遞歸，而利用這一特性進行重複處理的函式稱為遞歸函式。例如，可以使用遞歸來實現計算階乘的函式，如下所示。
1function factorial(n) {
2 if (n === 0) {
3 return 1;
4 } else {
5 return n * factorial(n - 1);
6 }
7}
8
9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)
在此範例中，將顯示數字 5 的階乘值，也就是 120。
this 關鍵字
在函式內使用的 this 表示該函式所參考的物件。在常規函式中，它指的是調用該函式的物件，但在箭頭函式中，它保留了定義它時所在作用域的 this。
1const obj = {
2 name: "Alice",
3 greet: function() {
4 console.log(this.name); // Refers to "Alice"
5 }
6};
7
8obj.greet(); // Alice
9
10const obj2 = {
11 name: "Bob",
12 greet: () => {
13 // Arrow function refers to the outer scope (undefined here)
14 console.log(this.name);
15 }
16};
17
18obj2.greet(); // undefined
obj 變數中的 greet 是使用 function 關鍵字聲明的。因此，this 關鍵字指向了 obj 變數的物件。另一方面，obj2 變數中的 greet 是使用箭頭函數聲明的。因此，在此範例中，this 關鍵字指向外部範疇中的物件，並且是 undefined。
函數範疇與閉包
在函數內定義的變數無法從函數外部存取。這被稱為 函數範疇。還有一個叫做 閉包 的特性，能夠保留函數定義時的範疇。
1function outer() {
2 let outerVar = "I am outer!";
3
4 function inner() {
5 console.log(outerVar); // Can access outerVar
6 }
7
8 return inner;
9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!
在這個例子中，inner 函數能存取變數 outerVar，因為它保留了定義時的範疇。
總結
- 定義函數的方法有多種，包括 函數聲明、函數表達式 和 箭頭函數。
- 函數可以接收 參數 並返回 值。
- 有一些特殊用途的函數，例如 回調函數 和 遞歸函數。
- 在處理
this時需要特別注意，因為箭頭函數與普通函數的行為有所不同。 - 閉包 可用於從作用域外部存取內部變數。
函數是 JavaScript 中的重要概念之一，依靠其靈活的結構。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。