JavaScript 装饰者模式(this运用)

时间:2022-03-21 20:02:49

例:

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();

JavaScript 装饰者模式(this运用)

这个里面最难理解的就是

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>

JavaScript 装饰者模式(this运用)

这个很绕人的,估计也不怎么用的到,就是看看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对象

JavaScript 装饰者模式(this运用)

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

分析:

旧tree对象本身就有BlueBalls方法

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

很饶人

JavaScript 装饰者模式(this运用)

this  新tree对象

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

this.BlueBails  就是旧tree对象

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

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

JavaScript 装饰者模式(this运用)的更多相关文章

  1. 轻松掌握:JavaScript装饰者模式

    装饰者模式 在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但继承的方式会带来问题:当父类改变时,他的所有子类都将随之改变. 当JavaScript脚本运行时,在一个对象中(或他的原型上)增 ...

  2. javascript装饰器模式

    装饰器模式 什么是装饰器 原名decorator 被翻译为装饰器 可以理解为装饰 修饰 包装等意 现实中的作用 一间房子通过装饰可以变得更华丽,功能更多 类似一部手机可以单独使用 但是很多人都愿意家个 ...

  3. JavaScript——装饰者模式

    今天打算开始系统的学习设计模式,虽然之前有看过<大话设计模式>但是没能够静下心来写学习笔记导致很多内容都只是有一个概念而不会去应用.这次要记下学习的过程.接下来进入主题. 何为设计模式?设 ...

  4. JavaScript装饰者模式

    这里我们通过需求逐渐引出装饰者模式. 下面是一个关于几代汽车的不同逐渐体现装饰者模式的. 首先,我们先引入一个接口文件----目的为检验实现类是否完全实现接口中的方法,代码如下, //定义一个静态方法 ...

  5. Javascript设计模式之装饰者模式详解篇

    一.前言: 装饰者模式(Decorator Pattern):在不改变原类和继承的情况下动态扩展对象功能,通过包装一个对象来实现一个新的具有原对象相同接口的新的对象. 装饰者模式的特点: 1. 在不改 ...

  6. 【读书笔记】读《JavaScript设计模式》之装饰者模式

    一.定义 装饰者模式可用来透明地把对象包装在具有同样接口的另一个对象之中.这样一来,你可以给一个方法添加一些行为,然后将方法调用传递给原始对象.相对于创建子类来说,使用装饰者对象是一种更灵活的选择(装 ...

  7. javascript设计模式学习之十五——装饰者模式

    一.装饰者模式定义 装饰者模式可以动态地给某个对象添加一些额外的职责,而不会影响从这个类中派生的其他对象.这种为对象动态添加职责的方式就称为装饰者模式.装饰者对象和它所装饰的对象拥有一致的接口,对于用 ...

  8. JavaScript高级---装饰者模式设计

    一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...

  9. 再起航,我的学习笔记之JavaScript设计模式13&lpar;装饰者模式&rpar;

    装饰者模式 装饰者模式(Decorator): 在不改变原对象的基础上,通过对其进行过包装拓展(添加属性高或者方法)使原有对象可以满足用户的更复杂需求. 如果现在我们有个需求,需要做一个提交表单,当我 ...

随机推荐

  1. &lbrack;ACM训练&rsqb; 算法初级 之 基本算法 之 枚举&lpar;POJ 1753&plus;2965&rpar;

    先列出题目: 1.POJ 1753 POJ 1753  Flip Game:http://poj.org/problem?id=1753 Sample Input bwwb bbwb bwwb bww ...

  2. java 平台 权限管理

    最近在做公司内部的物流业务平台的权限管理,感触颇多.记录一下 权限管理分两部分:数据权限和操作权限. 数据权限: 这个是和用户相关的. 因为平台是多机构的,所以再考虑数据权限的时候,是按照机构来管理的 ...

  3. hibernate HQL和Criteria

    package com.test; import java.util.Date; import java.util.List; import org.hibernate.Query; import o ...

  4. hadoop学习日志

    Hadoop思想之源:Google 面对的数据和计算难题 ——大量的网页怎么存储 ——搜索算法 带给我们的关键技术和思想 ——GFS ——Map-Reduce ——Bigtable Hadoop创始人 ...

  5. Git客户单for Windows

    1.GItHub for Windows  可参考:http://www.ihref.com/read-16514.html

  6. SSI指令使用详解(转)

    什么是 SHTML使用SSI(Server Side Include)的html文件扩展名,SSI(Server Side Include),通常称为“服务器端嵌入”或者叫“服务器端包含”,是一种类似 ...

  7. 【转】Java删除文件夹和文件

    原文网址:http://kxjhlele.iteye.com/blog/323657 以前在javaeye看到过关于Java操作文件的一篇文章,写的很好,但找了半天也没找到,就把找到底几篇文章整理一下 ...

  8. gridview的高级使用

      后台数据 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

  9. Executor以及线程池

    在应用程序中,总是会出现大量的任务,包括相同类型的和不同类型的.要快速处理这些任务,常见方法就是利用多线程,但是也不可能为每个任务都创建一个线程,这样内存也不够,并且线程的创建销毁开销很大.最好是少量 ...

  10. 16 python 初学(生成器)

     列表生成器(列表生成式): 使用此种方式生成的列表会放在内存中占用内存 a = [x*2 for x in range(1, 11)] print(a) # >>> [2, 4, ...