JavaScript 装饰者模式（this运用）

例：

function ConcreteClass() {
    this.performTask = function () {
        this.preTask();
        console.log('doing something');
        this.postTask();
    };
}

function AbstractDecorator(decorated) {
    this.performTask = function () {
        decorated.performTask();
    };
}

function ConcreteDecoratorClass(decorated) {
    this.base = AbstractDecorator;
    this.base(decorated);

    decorated.preTask = function () {
        console.log('pre-calling..');
    };

    decorated.postTask = function () {
        console.log('post-calling..');
    };
}

var concrete = new ConcreteClass();

console.dir(concrete);

var decorator1 = new ConcreteDecoratorClass(concrete); 

console.dir(decorator1);console.dir(concrete);

var decorator2 = new ConcreteDecoratorClass(decorator1); 

console.dir(decorator2);console.dir(decorator1);

decorator2.performTask();

这个里面最难理解的就是

this.base=AbstractDecorator;

this.base(decorated);

开始还以为有base这个属性呢，其实base没有特殊的意思，换成其他的也一样，只是一个function

这两句要连接在一起运用。

 

2.

    <script type="text/javascript">
 
        var tree = {};
        tree.decorate = function () {
            console.log('Make sure the tree won\'t fall');
        };

        tree.getDecorator = function (deco) {
            tree[deco].prototype = this;
            return new tree[deco];
        };

        tree.RedBalls = function () {
            this.decorate = function () {
                this.RedBalls.prototype.decorate(); // 第7步：先执行原型（这时候是Angel了）的decorate方法
                console.log('Put on some red balls'); // 第8步 再输出 red
                // 将这2步作为RedBalls的decorate方法
            }
        };

        tree.BlueBalls = function () {
            this.decorate = function () {
                this.BlueBalls.prototype.decorate(); // 第1步：先执行原型的decorate方法，也就是tree.decorate()
                console.log('Add blue balls'); // 第2步 再输出blue
                // 将这2步作为BlueBalls的decorate方法
            }
        };

        tree.Angel = function () {
            this.decorate = function () {
                this.Angel.prototype.decorate(); // 第4步：先执行原型（这时候是BlueBalls了）的decorate方法
                console.log('An angel on the top'); // 第5步 再输出angel
                // 将这2步作为Angel的decorate方法
            }
        };
        console.dir(tree);
        tree = tree.getDecorator('BlueBalls');console.dir(tree); // 第3步：将BlueBalls对象赋给tree，这时候父原型里的getDecorator依然可用
        tree = tree.getDecorator('Angel'); console.dir(tree); // 第6步：将Angel对象赋给tree，这时候父原型的父原型里的getDecorator依然可用
        tree = tree.getDecorator('RedBalls'); console.dir(tree); // 第9步：将RedBalls对象赋给tree

                tree.decorate(); // 第10步：执行RedBalls对象的decorate方法
    </script>

 这个很绕人的，估计也不怎么用的到，就是看看this的用法

 大体的过程就是

1.有一个tree对象，有好多的方法

2.

 tree.getDecorator = function (deco) {
            tree[deco].prototype = this;
            return new tree[deco];
        };
这句话就是返回一个对象，该对象是deco的实例，deco是tree的方法中的一个，且最重要的该对象的prototype是旧tree对象，就是说该对象继承了旧tree对象，并由deco对它进行扩展。

3.例如上一步的deco就是BlueBalls

 tree.BlueBalls = function () {
            this.decorate = function () {
                this.BlueBalls.prototype.decorate(); // 第1步：先执行原型的decorate方法，也就是tree.decorate()
                console.log('Add blue balls'); // 第2步 再输出blue
                // 将这2步作为BlueBalls的decorate方法
            }
        };

这一步就是对上一步对象的扩展

这个里面没有扩展，只有对旧方法的覆盖

this.BlueBalls.prototype.decorate();

这里的this.BlueBalls.prototype就是旧的tree对象

 

图就是上面的this对象，像个死循环，哦，本来就是个死循环

分析：

旧tree对象本身就有BlueBalls方法

新tree对象是旧tree中BlueBalls的实例，且旧tree中的BlueBalls的prototype就是个旧tree对象

很饶人

this  新tree对象

this.BlueBalls 新tree对象所对应的prototype(旧tree对象)中的BlueBails方法，也是新tree的constructor

this.BlueBails  就是旧tree对象

所有的就是这样一层一层套起来的

http://www.cnblogs.com/TomXu/archive/2012/02/24/2353434.html