在使用它之前需要引入babel模块 transform-decorators-legacy 编译成 ES5 或 ES6。
1. 类的装饰
当装饰的对象是类时,我们操作的就是这个类本身,即装饰器函数的第一个参数,就是所要装饰的目标类。
@decorator class A {} // 等同于 class A {} A = decorator(A) || A;示例:添加一个日志装饰器
@log class MyClass { } function log(target) { // 这个 target 在这里就是 MyClass 这个类 target.prototype.logger = () => `${target.name} 被调用` } const test = new MyClass() test.logger() // MyClass 被调用由于装饰器是表达式,我们也可以在装饰器后面再添加个参数:
@log('hi') class MyClass { } function log(text) { return function(target) { target.prototype.logger = () => `${text},${target.name} 被调用` } } const test = new MyClass() test.logger() // hello,MyClass 被调用2. 属性或方法的装饰
对于类属性或方法的装饰本质是操作其描述符,可以把此时的装饰器理解成是 Object.defineProperty(obj, prop, descriptor)的语法糖。
class C { @readonly(false) method() { console.log('cat') } } function readonly(value) { return function (target, key, descriptor) { /** * 此处 target 为 C.prototype; * key 为 method; * 原 descriptor 为:{ value: f, enumerable: false, writable: true, configurable: true } */ descriptor.writable = value return descriptor } } const c = new C() c.method = () => console.log('dog') c.method() // cat