JS装饰器|极客笔记

JS装饰器

在JavaScript中，装饰器模式是一种结构型设计模式，它允许在不改变对象自身的基础上动态地给对象添加新的功能。装饰器模式是一种为已有的对象添加新功能的方式，通常通过将对象传递给装饰器函数，然后返回一个新的装饰后的对象来实现。在JavaScript中，装饰器一般是一个高阶函数，它接受一个目标对象或函数作为参数，并返回一个新的函数或对象，添加了一些额外的行为。

装饰器的基本原理

装饰器模式的基本原理是利用高阶函数来包装目标对象，以实现在目标对象上添加新的功能或行为。通过装饰器模式可以在不改变目标对象原有结构的情况下，动态地扩展目标对象的功能。

在JavaScript中，装饰器可以应用在许多地方，包括类、函数和属性等。在ES6中，我们可以使用装饰器语法来实现对类和类的方法进行装饰。

类装饰器

类装饰器是一种装饰器，用于装饰类。在类声明之前使用 @ 符号，后跟装饰器函数，可以对类进行装饰。类装饰器可以用来添加静态属性、实例属性、静态方法、实例方法等。

下面是一个简单的类装饰器的示例：

function classDecorator(target) {
  target.log = 'Class Decoration';
}

@classDecorator
class MyClass {
  static staticProperty = 'static property';
  instanceProperty = 'instance property';

  constructor() { }

  static staticMethod() {
    console.log('static method');
  }

  instanceMethod() {
    console.log('instance method');
  }
}

console.log(MyClass.log); // Class Decoration

在这个示例中，classDecorator 是一个类装饰器函数，它接受目标类 MyClass 作为参数，在类声明前被调用。在装饰器函数中，我们给类添加了一个静态属性 log。当我们输出 MyClass.log 时，可以看到输出为 Class Decoration。

方法装饰器

方法装饰器是一种装饰器，用于装饰类的方法。方法装饰器可以用来处理方法的参数、返回值等。方法装饰器在类方法前使用 @ 符号来应用。

下面是一个简单的方法装饰器示例：

function methodDecorator(target, key, descriptor) {
  descriptor.value = function() {
    console.log('Method has been decorated');
  }
}

class MyClass {
  @methodDecorator
  myMethod() {
    console.log('Original method');
  }
}

const myObj = new MyClass();
myObj.myMethod(); // Method has been decorated

在这个示例中，methodDecorator 是一个方法装饰器函数，它接受目标类的原型、方法名和方法描述符作为参数，在方法声明前被调用。在装饰器函数中，我们将原始方法重新定义为输出一句话。当我们调用 myObj.myMethod() 方法时，可以看到输出为 Method has been decorated。

属性装饰器

属性装饰器是一种装饰器，用于装饰类的属性。属性装饰器可以用来监听属性的读取、写入操作等。属性装饰器在类属性前使用 @ 符号来应用。

下面是一个简单的属性装饰器示例：

function propertyDecorator(target, key) {
  let value = target[key];

  const getter = function() {
    console.log(`Getting value:  ${value}`); return value; } const setter = function(newValue) { console.log(`Setting value:$ {newValue}`);
    value = newValue;
  }

  Object.defineProperty(target, key, {
    get: getter,
    set: setter
  });
}

class MyClass {
  @propertyDecorator
  myProperty = 'initial value';
}

const myObj = new MyClass();
myObj.myProperty; // Getting value: initial value
myObj.myProperty = 'new value'; // Setting value: new value
myObj.myProperty; // Getting value: new value

在这个示例中，propertyDecorator 是一个属性装饰器函数，它接受目标对象和属性名作为参数，在属性声明前被调用。在装饰器函数中，我们使用 Object.defineProperty 方法来定义属性的 getter 和 setter 方法，以实现属性的读取和写入操作。当我们对 myObj.myProperty 进行读取和写入操作时，可以看到输出为相应的日志信息。