JavaScript裝飾器實戰：提高代碼復用性和可讀性

一、什麼是JavaScript裝飾器

JavaScript裝飾器是一種特殊的函數，它可以動態修改其他函數的功能。這種設計模式在需要為現有函數添加新功能時非常有用。

這種函數可以接收其他函數作為參數，並返回修改後的函數。在實際應用中，裝飾器往往被用於修改函數的輸入參數、輸出結果或執行過程。它可以大幅度提高代碼的復用性和可讀性。

二、JavaScript裝飾器的實際應用

1. 為函數添加日誌記錄

function log(target, name, descriptor) {
  let original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling ${name} with`, args);
    let result = original.apply(this, args);
    console.log(`Result of ${name} is`, result);
    return result;
  }
  return descriptor;
}

class Example {
  @log
  sum(a, b) {
    return a + b;
  }
}

let example = new Example();
example.sum(1, 2);

運行結果：

Calling sum with [1, 2]
Result of sum is 3

通過裝飾器，我們成功為原有的sum函數添加了日誌記錄功能。這個過程完全不需要修改原有代碼，而且代碼的可讀性也有了很大提升。

2. 為函數添加數據緩存

function memoize(target, name, descriptor) {
  let original = descriptor.value;
  let cache = new Map();
  descriptor.value = function(...args) {
    let key = args.join(',');
    if (cache.has(key)) {
      console.log(`Returning cached result for ${name}(${args})`);
      return cache.get(key);
    } else {
      console.log(`Calculating new value for ${name}(${args})`);
      let result = original.apply(this, args);
      cache.set(key, result);
      return result;
    }
  }
  return descriptor;
}

class Example {
  @memoize
  fibonacci(n) {
    if (n <= 2) {
      return 1;
    } else {
      return this.fibonacci(n-1) + this.fibonacci(n-2);
    }
  }
}

let example = new Example();
example.fibonacci(10);
example.fibonacci(10);

運行結果：

Calculating new value for fibonacci(10)
Returning cached result for fibonacci(10)

通過裝飾器，我們成功為原有的fibonacci函數添加了結果緩存功能。多次調用相同參數時，函數並不會重複計算，從而顯著提升了代碼執行效率。

三、JavaScript裝飾器的注意事項

1. 裝飾器只能修改特定類型的函數，比如普通方法、靜態方法或getter/setter方法，而不能修改類本身，比如類的屬性或原型鏈。

2. 裝飾器只在類定義時執行一次。如果需要多次執行裝飾器，可以將裝飾器定義為一個函數，並在需要的地方調用。

3. 裝飾器的執行順序與定義順序相反。也就是說，最後定義的裝飾器最先執行。這點需要特別注意，否則會造成一些難以發現的問題。

四、總結

JavaScript裝飾器是一種實現AOP（面向切面編程）的強大工具，通過它可以為原有代碼添加各種功能，同時還能保持代碼的整潔和可讀性。當我們需要對已有代碼進行擴展時，可以考慮使用JavaScript裝飾器來實現。