JavaScript装饰器函数(Decorator)实例详解

理解装饰器

JavaScript装饰器是ES2016的新提案之一，它是一个函数，可以被用于修改类的行为。

一个装饰器可以被认为是一个具有固定签名(接受不同数量和类型的参数)的函数，它的第一个参数是被装饰的函数或类。

装饰器主要有两种应用:
- 类装饰器: 用于修改类的定义
- 方法装饰器: 用于修改类的方法的定义

实现类装饰器

我们来看看一个简单的类装饰器的例子，这个装饰器用于向类添加一个version属性：

function classDecorator(target) {
  target.version = "1.0.0";
}

@classDecorator
class MyClass {

}

console.log(MyClass.version); // 1.0.0

我们定义了一个名为classDecorator的函数，它接受一个target参数，这个参数就是被装饰的类

然后，我们用@classDecorator修饰了MyClass类，这个修饰器将会在类实例化前自动运行，向类添加了一个version属性。

当我们访问MyClass.version时，会打印出1.0.0。

实现方法装饰器

我们来看一个示例，实现一个方法装饰器，用于在调用方法时，进行性能计时：

function timingDecorator(target, name, descriptor) {
  // 保存原有的函数
  const oldValue = descriptor.value;

  // 重新定义descriptor的value
  descriptor.value = function() {
    const start = performance.now();
    const result = oldValue.apply(this, arguments);
    const end = performance.now();
    console.log(`${name}执行时间: ${end - start}ms`);
    return result;
  }

  return descriptor;
}

class MyClass {
  @timingDecorator
  method() {
    // 模拟执行耗时操作
    for(let i = 0; i < 10000000; i++) {}
  }
}

const obj = new MyClass();
obj.method(); // 执行结果: method执行时间: 54.70499999141681ms

我们定义了一个名为timingDecorator的方法装饰器，它接受三个参数：target、name和descriptor。这些参数分别表示被包装的方法所属的对象、方法名称和方法的属性描述符。

我们在装饰器内部保存原有的函数，在重新定义descriptor的value属性时，我们使用performance.now()函数记录了函数的执行时间，并打印出来。

然后，我们用@timingDecorator修饰了MyClass类的method方法，当我们调用这个方法时，装饰器会自动记录函数执行时间并打印出来。