我爱模板网 > 建站教程 > JS、jQ、TS >  JS装饰器(Decorator)正文

JS装饰器(Decorator)

Decorator 是 ES7 的一个新语法,目前仍处于第2阶段提案中,正如其“装饰器”的叫法所表达的,他通过添加@方法名可以对一些对象进行装饰包装然后返回一个被包装过的对象,可以装饰的对象包括:类,属性,方法等。

在使用它之前需要引入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


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:事件获取目标currentTarget、target、srcElement三者之间的区别和联系 下一篇:没有了
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢