JS设计模式--装饰者模式

欢迎关注我的公众号睿Talk，获取我最新的文章：

一、前言

所谓装饰者模式，就是动态的给类或对象增加职责的设计模式。它能在不改变类或对象自身的基础上，在程序的运行期间动态的添加职责。这种设计模式非常符合敏捷开发的设计思想：先提炼出产品的MVP（Minimum Viable Product，最小可用产品），再通过快速迭代的方式添加功能。

二、传统面向对象语言的实现方式

var Car = function() {}
Car.prototype.drive = function() {
    console.log('乞丐版');
}

var AutopilotDecorator = function(car) {
    this.car = car;
}
AutopilotDecorator.prototype.drive = function() {
    this.car.drive();
    console.log('启动自动驾驶模式');
}

var car = new Car();
car = new AutopilotDecorator(car);
car.drive();    //乞丐版；启动自动驾驶模式；

这种方式的实现要点是装饰器类要维护目标对象的一个引用，同时要实现目标类的所有接口（这个例子里的drive方法，如果还有其它方法，比如brake，AutopilotDecorator也要实现）。调用方法时，先执行目标对象原有的方法，再执行自行添加的特性。

当接口比较多，装饰器也比较多时，可以独立抽取一个装饰器父类，实现目标类的所有接口，再创建真正的装饰器来继承这个父类。

var Car = function() {}
Car.prototype.drive = function() {
    console.log('乞丐版');
}
/* 多了一个刹车方法 */
Car.prototype.brake = function() {
    console.log('刹车');
}

/* 实现所有接口的装饰器父类 */
var CarDecorator = function(car) {
    this.car = car;
}
CarDecorator.prototype = {
    drive: function() {
        this.car.drive();
    },
    brake: function() {
        this.car.brake();
    }
}

/* 真正的装饰器 */
var AutopilotDecorator = function(car) {
    CarDecorator.call(this, car);
}
AutopilotDecorator.prototype = new CarDecorator();
AutopilotDecorator.prototype.drive = function() {
    this.car.drive();
    console.log('启动自动驾驶模式');
}

/* 真正的装饰器 */
var HybridDecorator = function(car) {
    CarDecorator.call(this, car);
}
HybridDecorator.prototype = new CarDecorator();
HybridDecorator.prototype.brake = function() {
    this.car.brake();
    console.log('启动充电模式');
}

var car = new Car();
car = new AutopilotDecorator(car);
car = new HybridDecorator(car);
car.drive();    //乞丐版；启动自动驾驶模式；
car.brake();    //刹车；启动充电模式；

三、JS基于对象的实现方式

var car = {
    drive: function() {
        console.log('乞丐版');
    }
}

var driveBasic = car.drive;

var autopilotDecorator = function() {
    console.log('启动自动驾驶模式');
}

var carToDecorate = Object.create(car);

carToDecorate.drive = function() {
    driveBasic();
    autopilotDecorator();
}

carToDecorate.drive();    //乞丐版；启动自动驾驶模式；

这种实现方式完全是基于JS自身的语言特点做考量。定义类的目的是实现代码的封装和复用，而JS这门语言是没有类的概念的。它只有2种数据类型：基本类型和对象类型。实现逻辑的封装和代码的重用只需要通过对象来组织代码，然后利用原生提供的克隆机制（Object.create）来达到目的。

从代码的角度看，如果想扩展drive方法，只需要用一个变量来保存原函数的引用，然后再重写drive方法就可以了。在重写的方法里面，只要记得调用方法原有的行为就行。

另外，我们可以通过以下的工具函数，达到装饰函数的目的：

Function.prototype.after = function(afterfn) {
    var _self = this;
    return function() {
        var ret = _self.apply(this, arguments);
        afterfn.apply(this, arguments);
        return ret;
    }
}

var car = {
    drive: function() {
        console.log('乞丐版');
    }
}

var autopilotDecorator = function() {
    console.log('启动自动驾驶模式');
}

var carToDecorate = Object.create(car);

carToDecorate.drive = car.drive.after(autopilotDecorator);

carToDecorate.drive();    //乞丐版；启动自动驾驶模式；

通过在Function的原型链上定义after函数，给所有的函数都赋予了被扩展的功能，当然也可以根据需要定义一个before的函数，在函数执行前去做一些操作。这种实现方式借鉴了AOP（Aspect Oriented Programming，面向切面编程）的思想。

四、ES7的实现方式

ES7提供了一种类似的Java注解的语法糖decorator，来实现装饰者模式。使用起来非常简洁：

function autopilotDecorator(target, key, descriptor) {
    const method = descriptor.value;
    
    descriptor.value = () => {
        method.apply(target);
        console.log('启动自动驾驶模式');
    }
    
    return descriptor;
}

class Car {
    @autopilotDecorator
    drive() {
        console.log('乞丐版');
    }
}

let car = new Car();
car.drive();    //乞丐版；启动自动驾驶模式；

decorator的实现依赖于ES5的Object.defineProperty方法。defineProperty所做的事情是为一个对象增加新的属性，或者更改某个已存在的属性。调用方式是Object.defineProperty(obj, prop, descriptor)。

var o = {}; // 创建一个新对象

// 在对象中添加一个属性
Object.defineProperty(o, "name", {
  value : "Dickens",
  writable : true,
  enumerable : true,
  configurable : true
});

// 在对象中添加一个方法
Object.defineProperty(o, "sayHello", {
  value : function() {
        console.log('Hello, my name is: ', this.name)
  },
  writable : true,
  enumerable : true,
  configurable : true
});

o.sayHello()    //Hello, my name is:  Dickens

decorator的参数跟defineProperty是完全一样的，含义也类似，通过修改descripter，就能达到扩展功能的目的。

五、总结

本文介绍了装饰者模式的基本概念，并通过不同的实现方式来介绍使用方法。对于不同的使用方法，也作了比较透彻的解释，让大家不但知其然，还知其所以然。

装饰者模式是一种十分常用且功能强大的模式，利用ES7的语法糖，我们能用非常简洁的方式来表达装饰的意图，推荐大家在实际项目中用起来。