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装饰器来实现。