Javascript Decorator (装饰)

Posted on | Edited on | In

javascript Decorator (装饰)

参考

先我们来理解一下在 javascript 类下面声明一个属性.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class Cat{
    //创建一个属性
    meow(){
        return `${this.name} says Meow!`;
    }
}

// 上面的代码等于在在javascript内部执行 已下代码.
Object.defineProperty(Cat.prototype, 'meow', {
    value: function(){return `${this.name} says Meow!`;},
    enumerable: false,
    configurable: true,
    writable: true
});

Object.defineProperty(target, name, descriptor) 接受3个参数. 分别是(对象, 属性名字, descriptor); 在 descriptor 里面可以声明这个属性的特性, 比如说它的值, 是否可以覆盖等…
参考 MDN

装饰符就是想上面的例子一样改变一个属性的特性, 打个比方:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function readonly(target, name, descriptor){
  // descriptor对象原来的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // };
  descriptor.writable = false;
  return descriptor;
}

class Cat{
    @readonly
    meow(){
        return `${this.name} says Meow!`;
    }
}