例:
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