ECMAScript6笔记：修饰器

布满荆棘的人生 2022-07-14 03:52 188阅读 0赞

## 类的修饰 ##

修饰器（Decorator）是一个函数，用来修改类的行为。这是ES7的一个提案，目前Babel转码器已经支持。

修饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，修饰器能在编译阶段运行代码。

function testable(target) { 
      target.isTestable = true;
    }
    
    @testable
    class MyTestableClass { }
    
    console.log(MyTestableClass.isTestable) // true

上面代码中，@testable就是一个修饰器。它修改了MyTestableClass这个类的行为，为它加上了静态属性isTestable。

也就是说，修饰器本质就是编译时执行的函数。

修饰器函数的第一个参数，就是所要修饰的目标类。

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

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

上面代码中，修饰器testable可以接受参数，这就等于可以修改修饰器的行为。

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

function testable(target) { 
      target.prototype.isTestable = true;
    }
    
    @testable
    class MyTestableClass {}
    
    let obj = new MyTestableClass();
    obj.isTestable // true

上面代码中，修饰器函数testable是在目标类的prototype对象上添加属性，因此就可以在实例上调用。

## 方法的修饰 ##

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

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

上面代码中，修饰器readonly用来修饰“类”的name方法。

此时，修饰器函数一共可以接受三个参数，第一个参数是所要修饰的目标对象，第二个参数是所要修饰的属性名，第三个参数是该属性的描述对象。

function readonly(target, name, descriptor){ 
      // descriptor对象原来的值如下
      // { 
      // value: specifiedFunction,
      // enumerable: false,
      // configurable: true,
      // writable: true
      // };
      descriptor.writable = false;
      return descriptor;
    }
    
    readonly(Person.prototype, 'name', descriptor);
    // 类似于
    Object.defineProperty(Person.prototype, 'name', descriptor);

上面代码说明，修饰器（readonly）会修改属性的描述对象（descriptor），然后被修改的描述对象再用来定义属性。

下面是另一个例子，修改属性描述对象的enumerable属性，使得该属性不可遍历。

class Person { 
      @nonenumerable
      get kidCount() { return this.children.length; }
    }
    
    function nonenumerable(target, name, descriptor) { 
      descriptor.enumerable = false;
      return descriptor;
    }

下面的@log修饰器，可以起到输出日志的作用。

class Math {
      @log
      add(a, b) {
        return a + b;
      }
    }
    
    function log(target, name, descriptor) { 
      var oldValue = descriptor.value;
    
      descriptor.value = function() { 
        console.log(`Calling "${name}" with`, arguments);
        return oldValue.apply(null, arguments);
      };
    
      return descriptor;
    }
    
    const math = new Math();
    
    // passed parameters should get logged now
    math.add(2, 4);
    
    
    上面代码中，@log修饰器的作用就是在执行原始的操作之前，执行一次console.log，从而达到输出日志的目的。

修饰器有注释的作用。

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

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

上面代码中，外层修饰器@dec(1)先进入，但是内层修饰器@dec(2)先执行。

除了注释，修饰器还能用来类型检查。所以，对于类来说，这项功能相当有用。从长期来看，它将是JavaScript代码静态分析的重要工具。

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

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

总之，由于存在函数提升，使得修饰器不能用于函数。类是不会提升的，所以就没有这方面的问题。

## core-decorators.js ##

core-decorators.js是一个第三方模块，提供了几个常见的修饰器，通过它可以更好地理解修饰器。

（1）@autobind

autobind修饰器使得方法中的this对象，绑定原始对象。

import { autobind } from 'core-decorators';
    
    class Person { 
      @autobind
      getPerson() {
        return this;
      }
    }
    
    let person = new Person();
    let getPerson = person.getPerson;
    
    getPerson() === person;
    // true

（2）@readonly

readonly修饰器使得属性或方法不可写。

（3）@override

override修饰器检查子类的方法，是否正确覆盖了父类的同名方法，如果不正确会报错。

（4）@deprecate (别名@deprecated)

deprecate或deprecated修饰器在控制台显示一条警告，表示该方法将废除。

（5）@suppressWarnings

suppressWarnings修饰器抑制decorated修饰器导致的console.warn()调用。但是，异步代码发出的调用除外。

## 使用修饰器实现自动发布事件 ##

我们可以使用修饰器，使得对象的方法被调用时，自动发出一个事件。

import postal from "postal/lib/postal.lodash";
    
    export default function publish(topic, channel) { 
      return function(target, name, descriptor) { 
        const fn = descriptor.value;
    
        descriptor.value = function() { 
          let value = fn.apply(this, arguments);
          postal.channel(channel || target.channel || "/").publish(topic, value);
        };
      };
    }

上面代码定义了一个名为publish的修饰器，它通过改写descriptor.value，使得原方法被调用时，会自动发出一个事件。它使用的事件“发布/订阅”库是Postal.js。

它的用法如下。

import publish from "path/to/decorators/publish";
    
    class FooComponent {
      @publish("foo.some.message", "component")
      someMethod() {
        return {
          my: "data"
        };
      }
      @publish("foo.some.other")
      anotherMethod() {
        // ...
      }
    }

以后，只要调用someMethod或者anotherMethod，就会自动发出一个事件。

let foo = new FooComponent();
    
    foo.someMethod() // 在"component"频道发布"foo.some.message"事件，附带的数据是{ my: "data" }
    foo.anotherMethod() // 在"/"频道发布"foo.some.other"事件，不附带数据

## Mixin ##

在修饰器的基础上，可以实现Mixin模式。所谓Mixin模式，就是对象继承的一种替代方案，中文译为“混入”（mix in），意为在一个对象之中混入另外一个对象的方法。

请看下面的例子。

const Foo = {
      foo() { console.log('foo') }
    };
    
    class MyClass {}
    
    Object.assign(MyClass.prototype, Foo);
    
    let obj = new MyClass();
    obj.foo() // 'foo'

上面代码之中，对象Foo有一个foo方法，通过Object.assign方法，可以将foo方法“混入”MyClass类，导致MyClass的实例obj对象都具有foo方法。这就是“混入”模式的一个简单实现。

下面，我们部署一个通用脚本mixins.js，将mixin写成一个修饰器。

export function mixins(...list) { 
      return function (target) { 
        Object.assign(target.prototype, ...list);
      };
    }

然后，就可以使用上面这个修饰器，为类“混入”各种方法。

import { mixins } from './mixins';
    
    const Foo = {
      foo() { console.log('foo') }
    };
    
    @mixins(Foo)
    class MyClass {}
    
    let obj = new MyClass();
    obj.foo() // "foo"

通过mixins这个修饰器，实现了在MyClass类上面“混入”Foo对象的foo方法。

不过，上面的方法会改写MyClass类的prototype对象，如果不喜欢这一点，也可以通过类的继承实现mixin。

class MyClass extends MyBaseClass { 
      /* ... */
    }

上面代码中，MyClass继承了MyBaseClass。如果我们想在MyClass里面“混入”一个foo方法，一个办法是在MyClass和MyBaseClass之间插入一个混入类，这个类具有foo方法，并且继承了MyBaseClass的所有方法，然后MyClass再继承这个类。

let MyMixin = (superclass) => class extends superclass { 
      foo() {
        console.log('foo from MyMixin');
      }
    };

上面代码中，MyMixin是一个混入类生成器，接受superclass作为参数，然后返回一个继承superclass的子类，该子类包含一个foo方法。

接着，目标类再去继承这个混入类，就达到了“混入”foo方法的目的。

class MyClass extends MyMixin(MyBaseClass) { 
      /* ... */
    }
    
    let c = new MyClass();
    c.foo(); // "foo from MyMixin"

如果需要“混入”多个方法，就生成多个混入类。

class MyClass extends Mixin1(Mixin2(MyBaseClass)) { 
      /* ... */
    }

这种写法的一个好处，是可以调用super，因此可以避免在“混入”过程中覆盖父类的同名方法。

## Trait ##

Trait也是一种修饰器，效果与Mixin类似，但是提供更多功能，比如防止同名方法的冲突、排除混入某些方法、为混入的方法起别名等等。

traits-decorator这个第三方模块可以提供的traits修饰器，不仅可以接受对象，还可以接受ES6类作为参数。

## Babel转码器的支持 ##

目前，Babel转码器已经支持Decorator。

Babel的官方网站提供一个在线转码器，只要勾选Experimental，就能支持Decorator的在线转码。

在线转码器地址：  
[https://babeljs.io/repl/\#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&code=][https_babeljs.io_repl_babili_false_evaluate_true_lineWrap_false_presets_es2015_2Creact_2Cstage-2_code]

[https_babeljs.io_repl_babili_false_evaluate_true_lineWrap_false_presets_es2015_2Creact_2Cstage-2_code]: https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&code=