ES7装饰器的使用场景和详解

2023-12-24 19:23:24

装饰器的基本知识

装饰器是ES7中引入的一种新的语法糖，可以用来修饰类、类的方法和属性。装饰器的主要作用是为被装饰的元素添加额外的功能或行为。

装饰器的基本语法如下：

@decorator
class MyClass {
  // ...
}

其中，@decorator表示装饰器，MyClass是我们要装饰的类。装饰器可以是函数或类。如果装饰器是函数，则它将在类被实例化之前执行。如果装饰器是类，则它将在类被实例化之后执行。

装饰器的使用场景

装饰器可以用于多种场景，包括：

添加额外的功能或行为
改变方法或属性的行为
拦截方法或属性的调用
控制类的实例化过程
实现面向切面编程（AOP）

装饰器的用法

装饰类

装饰器可以用来装饰类。例如，我们可以使用装饰器来添加额外的属性或方法到类中。

@addProperties({
  name: 'John',
  age: 30
})
class Person {
  // ...
}

const person = new Person();

console.log(person.name); // John
console.log(person.age); // 30

装饰类的方法

装饰器可以用来装饰类的方法。例如，我们可以使用装饰器来记录方法的执行时间。

@logExecutionTime
method() {
  // ...
}

装饰类的属性

装饰器可以用来装饰类的属性。例如，我们可以使用装饰器来验证属性的值。

@validate({
  min: 0,
  max: 100
})
property;

装饰器的实例

添加额外的属性或方法到类中

我们可以使用装饰器来添加额外的属性或方法到类中。例如，我们可以使用以下装饰器来向类中添加一个名为getName的方法：

function addMethod(target, propertyKey, descriptor) {
  descriptor.value = function() {
    return this.name;
  };
}

@addMethod
class Person {
  constructor(name) {
    this.name = name;
  }
}

const person = new Person('John');

console.log(person.getName()); // John

改变方法或属性的行为

我们可以使用装饰器来改变方法或属性的行为。例如，我们可以使用以下装饰器来将类的方法转换为只读：

function readOnly(target, propertyKey, descriptor) {
  descriptor.writable = false;
}

@readOnly
class Person {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

const person = new Person('John');

person.name = 'Mary';

console.log(person.getName()); // John

拦截方法或属性的调用

我们可以使用装饰器来拦截方法或属性的调用。例如，我们可以使用以下装饰器来记录方法的执行时间：

function logExecutionTime(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args) {
    const start = Date.now();
    const result = originalMethod.apply(this, args);
    const end = Date.now();

    console.log(`Method ${propertyKey} took ${end - start}ms to execute.`);

    return result;
  };
}

@logExecutionTime
class Person {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

const person = new Person('John');

person.getName();

控制类的实例化过程

我们可以使用装饰器来控制类的实例化过程。例如，我们可以使用以下装饰器来确保类只能被实例化一次：

function singleton(target) {
  let instance = null;

  target.prototype.getInstance = function() {
    if (!instance) {
      instance = new target();
    }

    return instance;
  };
}

@singleton
class Person {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

const person1 = Person.getInstance();
const person2 = Person.getInstance();

console.log(person1 === person2); // true