聊聊JavaScript中常見的函數裝飾模式

函數裝飾是一種設計模式，它透過在函數內部添加額外的程式碼來改變函數的行為。 JavaScript中，使用函數裝飾可以在函數呼叫時執行一些操作，例如驗證輸入參數、修改回傳值或快取函數計算結果等等。本文將透過介紹JavaScript中常見的函數裝飾模式，幫助你更能理解並應用此技術。

一、裝飾器模式

裝飾器模式是一種結構型設計模式，它允許物件在運行時動態地添加新的功能或行為。在JavaScript中，函數也是一種對象，因此我們可以使用裝飾器模式來裝飾函數。

下面的範例展示如何使用裝飾器模式來新增輸入驗證功能：

function validateInput(fn) {
  return function(...args) {
    for(let arg of args) {
      if(typeof arg !== 'number') {
        throw new Error('Invalid input, input should be a number');
      }
    }
    return fn(...args);
  }
}

function addNumbers(a, b) {
  return a + b;
}

const addNumbersWithValidation = validateInput(addNumbers);

console.log(addNumbersWithValidation(1, 2)); //output: 3
console.log(addNumbersWithValidation('1', 2)); //throws Error: Invalid input, input should be a number

在上面的範例中，我們定義了一個名為validateInput的函數，它接收一個函數作為參數，並傳回一個新的函數。這個新的函數會先驗證輸入參數是否為數字，如果是數字則呼叫原始函數，否則會拋出錯誤。

最後，我們用validateInput裝飾了addNumbers函數，創建了一個新的函數addNumbersWithValidation，並使用它來加法兩個數字。當輸入參數為字串和數字的時候，我們可以看到addNumbersWithValidation的行為和原始的addNumbers不同，因為它會對輸入參數進行驗證。

使用裝飾器模式時，需要注意以下幾點：

• 裝飾函數 should 傳回一個新的函數。
• 新的函數 should 接受與原始函數相同的參數，並且在呼叫原始函數之前或之後執行一些額外的操作。
• 裝飾器函數可以被組合。例如，我們可以編寫一個裝飾器來進行輸入驗證，然後再寫一個裝飾器來進行輸出快取。

二、高階函數

在JavaScript中，函數是一等公民，這意味著我們可以像對待普通變數一樣對待函數。高階函數是那些接收一個或多個函數作為參數，並且傳回一個新的函數的函數。使用高階函數可以讓我們更靈活地處理函數，具有更高的可讀性和可重複使用性。

下面的例子展示了一個簡單的高階函數：

function higherOrderFunction(a, b, callback) {
  const result = callback(a, b);
  console.log(`The result is ${result}`);
}

function add(a, b) {
  return a + b;
}

higherOrderFunction(1, 2, add); //output: The result is 3

在上面的例子中，我們定義了一個名為higherOrderFunction的函數，它接收兩個數字和一個回調函數作為參數。在higherOrderFunction函數內部，我們呼叫了回呼函數，將它的回傳值輸出到控制台。

最後，我們使用add函數來進行操作，並將它作為回呼函數傳遞給了higherOrderFunction。在higherOrderFunction內部，我們將add呼叫的結果輸出到控制台上。

總之，高階函數是一種強大的工具，可以讓我們更靈活地處理函數和變量，並提供更高的可讀性和可重複使用性。

三、函數柯里化

函數柯里化是一種透過將多參數函數轉換為一系列單一參數函數來實現的技術。這樣，我們可以在每個單一參數函數中儲存一部分參數，並使用這些部分參數來呼叫原始函數。函數柯里化可以使程式碼更加簡潔和可讀，並且自然地支援函數複合和函數組合等抽像操作。

下面的範例展示如何使用柯里化來將多個參數拆分為多個步驟：

function add(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    }
  }
}

console.log(add(1)(2)(3)); //output: 6

在上面的範例中，我們定義了一個接收一個參數並傳回一個函數的函數。呼叫返回的函數之後也會傳回一個函數。最後，最內層函數直接將所有參數加到一起並傳回對應的結果。

在使用函數柯里化時，需要注意以下幾點：

• 每個單一參數函數都應該只接收一個參數。
• 每個單一參數函數 should 傳回另一個函數，或最後傳回一些值。
• 函數柯里化可以使用bind方法來實現。例如，const add10 = add.bind(null, 10)可以用來建立一個add10函數，它將10作為第一個參數傳遞給add函數。

四、結論

透過使用裝飾器模式、高階函數和函數柯里化，我們可以更靈活地處理和組合函數，並實現一些高級功能，如驗證輸入、快取結果、組合函數等等。這些技術在JavaScript中非常常見，因此值得我們深入學習和掌握。

以上是聊聊JavaScript中常見的函數裝飾模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！