ES7中的decorator的用法及原理

最近在工作中用到了装饰器，部分代码片段如下：

const {invokeComp} = decorators;

@invokeComp('@pns-title-tab')
class BindingList extends ListPage {
		// code
}

用到了@这样的装饰器。我习惯把它称为注解，不过貌似装饰器这样的说法更为准确。

Decorator 的写法与 Java 里的注解（Annotation）非常类似，但是一定不要把 JS 中的装饰器叫做是“注解”，因为这两者的原理和实现的功能还是有所区别的，在 Java 中，注解主要是对某个对象进行标注，然后在运行时或者编译时，可以通过例如反射这样的机制拿到被标注的对象，对其进行一些逻辑包装。而 Decorator 的原理和作用则更为简单，就是包装对象，然后返回一个新的对象描述（descriptor），其作用也非常单一简单，基本上就是获取包装对象的宿主、键值几个有限的信息。

作者：小芋头君链接：https://juejin.im/post/59f1c484f265da431c6f8940

来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

装饰器的用法主要有两个，一种用于方法和属性，另一种用于类。对于不同的用途，实现的原理也不一样。

方法、属性

在应用于方法的装饰器中，第一个参数target是方法的原型，第二个参数是key值，即属性名，第三个参数就是该属性的属性描述符，方法最后返回一个新的描述符对象。

在应用于类中属性的装饰器中，第一个参数target是指的是当前class本身，不是实例也不是prototype。其他参数同上。

// decorator.js
export function test(target, key, descriptor) {
    return descriptor;
}

// test.js
import {test} from './decorator'

@test
function log() {};

有了装饰器之后，我们就可以很方便的给一些属性或者方法进行公共逻辑的包裹，或者注入某些属性及方法进去。

类

在应用于类的装饰器中，只接受一个参数target，指的是当前class本身，不是实例也不是prototype，并且不需要返回结果。因为传进来的是对象，是引用类型，直接修改功能就好。

可以猜测invokeComp这个装饰器大概的实现代码如下：

// decorator.js
const Components = {/*...*/}; // 组件实例
export function invokeComp(componentName) {
    return function(target) {
        //给当前类添加组件
        target.component[componentName] = Components[componentName];
    };
}

// test.js
@invokeComp('@Link')
class BindingList extends Component {
		// code
}

通过闭包可以让装饰器支持参数，在真正的实现函数中通过操作target对象或者target.prototype或者target.contructor来实现一些有意思的“注解”。也就是说，可以利用这样的操作来实现Java中的一些很有用的注解