js设计模式——装饰者模式

装饰者模式：根据个人理解，所谓装饰者模式就是在实例层面上重写方法……

摘自tom大叔博客:

装饰者提供比继承更有弹性的替代方案。 装饰者用用于包装同接口的对象，不仅允许你向方法添加行为，而且还可以将方法设置成原始对象调用（例如装饰者的构造函数）。

装饰者是一种实现继承的替代方案。当脚本运行时，在子类中增加行为会影响原有类所有的实例，而装饰者却不然。取而代之的是它能给不同对象各自添加新行为。

先看继承代码：

function Macbook(){
        this.cost = function(){return 997;};
        this.screenSize = function(){return 11.6;};
    }
    Memory.prototype = new Macbook();
    Insurance.prototype = new Macbook();
    //加内存版
    function Memory(){
        this.cost = function(){
            return 1072;
        };
    }
    //保险版
    function Insurance(){
        this.cost = function(){
            return 1247;
        };
    }
    var mb1 = new Memory();
    console.log(mb1.cost());    //1072
    var mb2 = new Insurance();
    console.log(mb2.cost());    //1247

(1)Memory和Insurance继承了Macbook，成为其子类。并在子类中重写了cost方法，分别给出了购买加内存和保险版的花费

(2)提出问题：如果现在我们要新增一款内存+保险都有的macbook，如果我们在其中的一个子类里面修改，那么曾经实例化的对象的值都会改变。因此，我们不得不重新写一个类。所以，看下面装饰者模式

再看装饰者模式代码：

装饰者是实现继承的替代方案，可以根据用户的需要进行装饰。

  //摘自javascript设计模式——购买不同版本的Mac需要多少钱
    function Macbook(){
        this.cost = function(){return 997;};
        this.screenSize = function(){return 11.6;};
    }
    //加内存版
    function Memory(macbook){
        this.memorySize = "8MB";
        var v = macbook.cost();
        macbook.cost = function(){
            return v + 75;
        };
    }
    //保险版
    function Insurance(macbook){
        var v = macbook.cost();
        macbook.cost = function(){
            return v + 250;
        };
    }

结果

    var mb1 = new Macbook();
    var mb2 = new Macbook();
    Memory(mb1);
    Insurance(mb1);
    console.log(mb1.cost());    //1322
    console.log(mb2.cost());    //997
    var mb3 = new Memory(new Macbook());
    console.log(mb3.memorySize);//8MB
    console.log(mb3.cost());    //mb3.cost is not a function

有什么好处？

(1)实例化mb1，给mb1同时装饰Memory和Insurance，而不影响其他实例的值。

(2)在我们不需要装饰的时候还可以把他当成一个类来看待。

还没理解透，还没写完

转载于:https://my.oschina.net/wyc1219/blog/830367