JS装饰器的深入浅出

2024-02-09 08:18:49

JS装饰器

许多面向对象的语言都有修饰器（Decorator）函数，用来修改类的行为。目前，有一个提案将这项功能，引入了 ECMAScript。

装饰器是一个对类进行处理的函数。装饰器函数的第一个参数，就是所要修饰的目标类。

Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个现有属性，并返回这个对象。

如果该属性被标记为可写（writable）的话，就能够修改赋值。

let obj = {
  name: 'John Doe'
};

Object.defineProperty(obj, 'name', {
  writable: false
});

obj.name = 'Jane Doe';

console.log(obj.name); // John Doe

修饰器类型

在 JavaScript 中，有四种类型的装饰器：

类装饰器
方法装饰器
属性装饰器
实例装饰器

类装饰器

类装饰器用于修饰类。类装饰器函数的第一个参数，就是所要修饰的目标类。

function classDecorator(target) {
  console.log(`类装饰器：${target.name}`);
}

@classDecorator
class MyClass {
  constructor() {
    console.log('构造函数');
  }
}

const myObject = new MyClass();

输出结果：

类装饰器：MyClass
构造函数

方法装饰器

方法装饰器用于修饰类的方法。方法装饰器函数的第一个参数，就是所要修饰的目标方法。

function methodDecorator(target, key, descriptor) {
  console.log(`方法装饰器：${key}`);
}

class MyClass {
  @methodDecorator
  method() {
    console.log('方法');
  }
}

const myObject = new MyClass();
myObject.method();

输出结果：

方法装饰器：method
方法

属性装饰器

属性装饰器用于修饰类的属性。属性装饰器函数的第一个参数，就是所要修饰的目标属性。

function propertyDecorator(target, key) {
  console.log(`属性装饰器：${key}`);
}

class MyClass {
  @propertyDecorator
  property = '属性';
}

const myObject = new MyClass();
console.log(myObject.property);

输出结果：

属性装饰器：property
属性

实例装饰器

实例装饰器用于修饰类的实例。实例装饰器函数的第一个参数，就是所要修饰的目标实例。

function instanceDecorator(target) {
  console.log(`实例装饰器：${target.constructor.name}`);
}

@instanceDecorator
class MyClass {
  constructor() {
    console.log('构造函数');
  }
}

const myObject = new MyClass();