Decorator 浅析与实践

在面向对象（OOP）的 设计模式 中，Decorator 被称为装饰模式。OOP 的装饰模式需要通过继承和组合来实现。

通过装饰器动态地给一个对象添加一些额外的职责，就增加功能来说，装饰器模式比生成子类更为灵活；它允许向一个现有的对象添加新的功能，同时又不改变其结构。

Javascript 中的 Decorator 源于 python 之类的语言。

A Python decorator is a function that takes another function, extending the behavior of the latter function without explicitly modifying it.

def decorator(func):

    print "i am decorator"
    return func

def foo():
    print('i am foo')

foo = decorator(foo)  
foo()                  

# 语法糖

@decorator
def foo():
    print("i am foo")

foo()

复制代码

这里的 @decorator 就是装饰器，利用装饰器给目标方法执行前打印出 "i am decorator" ，并且并没有对原方法做任何的修改。

Javascript 中的 Decorator

Class

es6 中的 class 其实是 Object.defineProperty 的语法糖，代码如下：

class Shopee {
    isWho() {
        console.log('One of the largest e-commerce companies in Southeast Asia')
    }
}


function Shopee() {}
Object.defineProperty(Shopee.prototype, "isWho", {
    value: function() { console.log("One of the largest e-commerce companies in Southeast Asia"); },
    enumerable: false,
    configurable: true,
    writable: true
});
复制代码

Decorator

在 es6 中的 Decorator 可以用来装饰 类 || 类方法 || 类属性 。

修饰类

function isAnimal(target) {
    target.isAnimal = true;
  	return target;
}

@isAnimal
class Cat {
    ...
}

console.log(Cat.isAnimal);    // true

复制代码

其实以上代码和 Cat = isAnimal(function Cat() { ... }); 基本等同。

那么当一个类有多个装饰器是怎么样的呢？

function dec_1() {
  console.log(1);
}
function dec_2() {
  console.log(2);
}
@dec_1
@dec_2
class Target {}

// 2 1
复制代码

执行顺序是 dec_2 -> dec_1

修饰类属性 || 类方法

我们利用修饰器使该方法不可读

function readonly(target, name, descriptor) {
    discriptor.writable = false;
    return discriptor;
}

class dog {
    @readonly
    say() {
        console.log("wang,wang,wang ~");
    }
}

var honey = new dog();

honey.say = function() {
    console.log("miao,miao,miao ~");
}

honey.say()    // wang,wang,wang ~
复制代码

代码中 readonly 的形参和 Object.defineProperty 的属性值一致

Object.defineProperty(object, propertyname, descriptor)
复制代码

descriptor 对象具有以下属性：

一个完整的 Decorator 具备以下特质

/**
 * 装饰者
 * @param  {Object} 类为实例化的工厂类对象
 * @param  {String} name   修饰的属性名
 * @param  {Object} desc   描述对象
 * @return {descr}        返回一个新的描述对象
 */
function decorator(target,name,desc){
}
复制代码

Decorators make it possible to annotate and modify classes and properties at design time.

装饰器允许在类和方法定义的时候去注释或者修改它。

装饰器是一个作用于函数的表达式，

它接收三个参数 target、 name 和 descriptor ，

然后可选性的返回被装饰之后的 descriptor 对象。