定义

Decorator是一种结构型设计模式，旨在促进代码复用；

装饰者模式可以动态的给一个对象增加其他职责；就扩展功能来说，装饰者模式比生成子类更为灵活。

角色

• 抽象构件角色（AbstractComponent）：定义对象的接口，可以给这些对象动态增加职责；
• 抽象装饰角色（AbstractDecorator）：维护一个指向Component实例的引用，并且定义了与Component一致的接口；
• 具体构件角色（ConcreteComponent）：定义具体的对象，Decorator可以给它增加额外的职责；
• 具体装饰角色（ConcreteDecorator）：具体的装饰对象，给内部持有的具体被装饰对象增加具体的职责；

---

从网上找到的类图

适用场景

• 当需要修改现有的系统，希望在系统中为对象添加额外的功* 能，而不需要大量修改它们的底层代码；
• 包含了需要大量不同类型对象的功能；

例子

比如咖啡和调味品，包括很多种类的咖啡，调味品叶同样分为炼乳，巧克力，糖，牛奶等不同种类；其中咖啡和调味品都是需要单独收费的，这时候，咖啡作为基类，也就是装饰者模式中的抽象构件角色，不同种类的咖啡则继承自咖啡，其为具体构件角色，而在调味品中，调味品（同样继承咖啡，是咖啡的一部分）作为抽象装饰角色，不同的种类的调味品则作为具体具体装饰角色；

---

实现代码

• 代码一

//衣服function WhiteClothes(){};WhiteClothes.prototype = {    getPrice : function()    {        return 1000;    }};function YellowClothes(){};YellowClothes.prototype = {    getPrice : function()    {        return 800;    }};//搭配function Hat(clothes){    this.clothes = clothes;};Hat.prototype ={    getPrice : function()    {        return this.clothes.getPrice() + 100;    }};function Tie(clothes){    this.clothes = clothes;};Tie.prototype ={    getPrice : function()    {        return this.clothes.getPrice() + 120;    }};var clothes = new WhiteClothes();//白衣服搭配帽子var hat = new Hat(clothes);console.log(hat.getPrice());//白衣服搭配领带var tie = new Tie(clothes);console.log(tie.getPrice());//白衣服搭配帽子和领带var hattie = new Tie(hat);console.log(hattie.getPrice());

实现结果为

• 代码二

//抽象组件者var MacbookPro = function () {};//具体组件者MacbookPro.prototype = {    addEngraving : function () {    },    addParallels : function () {    },    add4GBRam : function () {    },    add8GBRam : function () {    },    addCase : function () {    },    getPrice : function () {        return 900.00;    }};//继承函数function extend( subClass, superClass ){    var F = function(){};    F.prototype = superClass.prototype;    subClass.prototype = new F();    subClass.prototype.constructor = subClass;    // 此处指向superClass的prototype 比直接保存superClass使用更为方便    subClass.superclass = superClass.prototype;    if( superClass.prototype.constructor === Object.prototype.constructor ){        superClass.prototype.constructor = superClass;    }}//中间装饰者var MacbookDecorator = function (macbook) {    this.macbook = macbook;};MacbookDecorator.prototype = {    addEngraving : function () {        return this.macbook.addEngraving();    },    addParallels : function () {        return this.macbook.addParallels();    },    add4GBRam : function () {        return this.macbook.add4GBRam();    },    add8GBRam : function () {        return this.macbook.add8GBRam();    },    addCase : function () {        return this.macbook.addCase();    },    getPrice : function () {        return 900.00;    }};//具体装饰者var CaseDecorator = function (macbook) {    CaseDecorator.superclass.constructor.call(this,macbook);};//扩展超类extend(CaseDecorator, MacbookDecorator);CaseDecorator.prototype.addCase = function () {    return this.macbook.addCase() + "Adding case to macbook";};CaseDecorator.prototype.getPrice = function () {    return this.macbook.getPrice() + 45.00;};var pro = new MacbookPro();console.log(pro.getPrice());pro = new CaseDecorator(pro)console.log(pro.getPrice());

运行结果为：

---

优缺点

注意的是，如果管理不当，它会极大的复杂化应用程序结构，因为它向我们的命名空间引入了很多小型但类似的对象。