前端学堂
学有所用

ES2016装饰器

装饰器是ES2016 stage-2的一个草案,但是在babel的支持下,已被广泛使用。关于ES规范可参考Github:tc39/proposals

类的修饰

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

注意,修饰器对类的行为的改变,是代码编译时发生的,而不是在运行时。这意味着,修饰器能在编译阶段运行代码。也就是说,修饰器本质就是编译时执行的函数。

前面的例子是为类添加一个静态属性,如果想添加实例属性,可以通过目标类的prototype对象操作。

function testable(target) {
  target.prototype.isTestable = true;
}

@testable
class MyTestableClass {}

let obj = new MyTestableClass();
obj.isTestable // true

方法的修饰

多了两个参数(类的没有)

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

function readonly(target, name, descriptor){
  // descriptor对象原来的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // };
  descriptor.writable = false;
  return descriptor;
}

又例如一个日志的修饰器

class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

function log(target, name, descriptor) {
  var oldValue = descriptor.value;

  descriptor.value = function(...list) {
    console.log(list);
    console.log(`Calling ${name} with`, ...list);
    return oldValue.call(this, ...list);
  };

  return descriptor;
}

const math = new Math();

// passed parameters should get logged now
let result = math.add(2, 4);

console.log(result)

叠加使用
如果同一个方法有多个修饰器,会像剥洋葱一样,先从外到内进入,然后由内向外执行。

function dec(id){
  console.log('evaluated', id);
  return (target, property, descriptor) => console.log('executed', id);
}

class Example {
    @dec(1)
    @dec(2)
    method(){}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1

❗️注意如果有多个装饰器修改了getter和setter,那么叠加使用会存在问题,因为后面的会覆盖前面的getter和setter

为什么修饰器不能用于函数

修饰器只能用于类和类的方法,不能用于函数,因为存在函数提升。

常用的第三方装饰器库

core-decorators.js是一个第三方模块,提供了几个常见的修饰器,通过它可以更好地理解修饰器。
提供了 @autobind @readonly @override @deprecate 等方法。

Trait 也是一种修饰器,效果与 Mixin 类似,但是提供更多功能,比如防止同名方法的冲突、排除混入某些方法、为混入的方法起别名等等。
例如traits-decorator。这个模块提供的traits修饰器,不仅可以接受对象,还可以接受 ES6 类作为参数。

参考链接:
阮一峰的ES6教程
Decorator 的详细介绍
JS 装饰器(Decorator)场景实战

赞(0) 打赏
未经允许不得转载:前端学堂 » ES2016装饰器

评论 抢沙发

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏