ES6 Decorator 装饰器

Decorator 装饰器

1. 简介

• 装饰器（Decorator）是一种与类（class）相关的语法，用来修改类、类方法和类属性。
• 装饰器是一种函数，写成@ + 函数名。它可以放在类、类方法和类属性的定义前面。

@frozen
class Foo {
    @configurable(false)@enumerable(true)method() {
    }@throttle(500)expensiveMethod() {
    }
}

2. 类的装饰

• 装饰器可以用来装饰整个类。

@testable
class MyTestableClass {
    // ...
}// target是MyTestableClass类本身。
function testable(target) {
    target.isTestable = true;
}MyTestableClass.isTestable // true

• 如果觉得一个参数不够用，可以在装饰器外面再封装一层函数。

function testable(isTestable) {
    return function(target) {
    target.isTestable = isTestable;}
}@testable(true)
class MyTestableClass {
    }
MyTestableClass.isTestable // true@testable(false)
class MyClass {
    }
MyClass.isTestable // false

3. 方法的装饰

• 装饰器不仅可以装饰类，还可以装饰类的属性。

class Person {
    @readonlyname() {
     return `${
      this.first} ${
      this.last}` }
}// target是Person.prototype
function readonly(target, name, descriptor){
    // descriptor对象原来的值如下// {
    // value: 属性值,// enumerable: false, // 是否可遍历// configurable: true, // 是否可配置，即是否可用delete 删除属性或使用Object.defineProperty设置属性// writable: true // 是否可写// };descriptor.writable = false;return descriptor;
}

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