TS装饰器解析，深入理解装饰器实现原理

2024-01-20 20:45:30

一、装饰器的定义与使用

装饰器本质上是一种在运行时附加到目标元素（类、属性、方法、变量、accessor）上的特殊函数，以扩展目标元素的功能，或修改其行为。

function myDecorator(target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor) {
  // 在这里修改目标元素的行为或属性
}

@myDecorator
class MyClass {
  // 类装饰器
}

以上示例中，myDecorator是一个类装饰器，当它被应用于MyClass时，它将修改该类的行为或属性。

二、装饰器的种类与应用场景

装饰器有多种类型，它们可以应用于不同的目标元素，实现不同的功能。

1. 类装饰器

类装饰器在类声明之前使用，用于修改类的行为或属性。

function sealClass(constructor: Function) {
  // 禁止修改类的属性
  Object.seal(constructor.prototype);
}

@sealClass
class MyClass {
  // 类被密封，禁止修改属性
}

2. 属性装饰器

属性装饰器在属性声明之前使用，用于修改属性的行为或属性。

function readonly(target: any, propertyKey: string | symbol) {
  // 将属性设置为只读
  Object.defineProperty(target, propertyKey, {
    writable: false,
    configurable: false
  });
}

class MyClass {
  @readonly
  public name: string;

  // name属性被设置为只读，无法修改
}

3. 方法装饰器

方法装饰器在方法声明之前使用，用于修改方法的行为或属性。

function logMethod(target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor) {
  // 在方法执行前后输出日志
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`Method ${propertyKey} called with arguments: ${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${propertyKey} returned: ${result}`);
    return result;
  };
}

class MyClass {
  @logMethod
  public greet(name: string) {
    return `Hello, ${name}!`;
  }

  // 在调用greet方法时，会输出日志
}

4. 参数装饰器

参数装饰器在方法参数之前使用，用于修改参数的行为或属性。

function required(target: any, propertyKey: string | symbol, parameterIndex: number) {
  // 检查参数是否为必需的
  const originalMethod = target[propertyKey];
  target[propertyKey] = function(...args: any[]) {
    if (args[parameterIndex] === undefined) {
      throw new Error(`Parameter ${parameterIndex} is required!`);
    }
    return originalMethod.apply(this, args);
  };
}

class MyClass {
  public greet(@required name: string) {
    return `Hello, ${name}!`;
  }

  // 调用greet方法时，必须传递name参数，否则会抛出错误
}

三、装饰器的设计模式

装饰器可以实现多种设计模式，例如：

1. 工厂模式

装饰器可以作为工厂函数，用于创建不同类型的对象。

function createButton(type: string) {
  switch (type) {
    case 'primary':
      return new PrimaryButton();
    case 'secondary':
      return new SecondaryButton();
    default:
      throw new Error('Invalid button type!');
  }
}

const primaryButton = createButton('primary');
const secondaryButton = createButton('secondary');

2. 代理模式

装饰器可以作为代理对象，用于拦截和修改目标对象的行为。

class MyClass {
  public greet(name: string) {
    return `Hello, ${name}!`;
  }
}

const myClass = new MyClass();

// 创建一个代理对象，用于拦截greet方法的调用
const proxy = new Proxy(myClass, {
  get: function(target: any, propertyKey: string | symbol) {
    if (propertyKey === 'greet') {
      return function(name: string) {
        // 在greet方法执行前输出日志
        console.log(`Method greet called with argument: ${name}`);
        const result = target[propertyKey].apply(this, arguments);
        // 在greet方法执行后输出日志
        console.log(`Method greet returned: ${result}`);
        return result;
      };
    }
    return target[propertyKey];
  }
});

// 调用代理对象的greet方法
proxy.greet('John');

3. 组合模式

装饰器可以组合使用，以实现更复杂的逻辑。

function readonly(target: any, propertyKey: string | symbol) {
  // 将属性设置为只读
  Object.defineProperty(target, propertyKey, {
    writable: false,
    configurable: false
  });
}

function logProperty(target: any, propertyKey: string | symbol) {
  // 在属性值发生变化时输出日志
  const originalValue = target[propertyKey];
  Object.defineProperty(target, propertyKey, {
    get() {
      console.log(`Property ${propertyKey} accessed`);
      return originalValue;
    },
    set(newValue: any) {
      console.log(`Property ${propertyKey} changed from ${originalValue} to ${newValue}`);
      originalValue = newValue;
    }
  });
}

class MyClass {
  @readonly
  @logProperty
  public name: string;

  // name属性被设置为只读，并且在值发生变化时输出日志
}