一、装饰者模式的作用


为函数或者对象的方法添加一些行为。
 
 
二、装饰者模式的原理


装饰者模式不是直接修改对象,而是以要修改的对象为基础,新建一个对象。不过这个新建的对象看起来就像在原对象的基础上增添了一些行为而已。

1、在对象中使用装饰者模式:就是把对象作为参数传入另一个构造函数中,然后这个构造函数里面就利用这个对象,创造出一个新的附加了一些行为的对象。

2、在函数中使用装饰者模式:把函数传入另一个函数中,然后返回一个以参数函数为基础的函数。
 
 
三、装饰者模式的简单例子


需求一:

我们要创建一个游戏,里面的人物可以装备一些剑盾等道具。
实现一:
        function Person(personName) {
this.name = personName;
} Person.prototype.showEquipment = function() {
return '';//由于一开始人物是没有装备的。所以是空
}; //一个装饰者类,可以用来装备剑
function equipSword(person) {
this.person = person;
this.name = person.name;
}
equipSword.prototype.showEquipment = function() {
return this.person.showEquipment() + 'sword;';
}; //一个装饰者类,可以用来装备盾
function equipShield(person) {
this.person = person;
this.name = person.name;
}
equipShield.prototype.showEquipment = function() {
return this.person.showEquipment() + 'shield;';
};
        //使用
var person = new Person('guoqinglinag');
alert(person.showEquipment());//一开始什么都没有装备
person = new equipSword(person);
alert(person.showEquipment());//装备了sword之后,会显示sword
person = new equipShield(person);
alert(person.showEquipment());
 
需求二:
我们有一个函数,调用它会输出一串字符串。我们现在要求这个函数输出的都是大写。
实现二:
        //一个输出一串字符串的函数
function echoStr() {
return 'this is a string';
} //一个装饰者函数
function toUpperCase(func) {
return function() {
return func().toUpperCase();
}
} //使用
alert(echoStr());
echoStr = toUpperCase(echoStr);
alert(echoStr());
 
 
 
 
 
 
 
 
 

《javascript设计模式》笔记之第十二章:装饰者模式的更多相关文章

  1. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十二章:四元数(QUATERNIONS)

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十二章:四元数(QUATERNIONS) 学习目标 回顾复数,以及 ...

  2. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十二章:几何着色器(The Geometry Shader)

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十二章:几何着色器(The Geometry Shader) 代码工 ...

  3. JavaScript DOM编程艺术-学习笔记(第十二章)

    第十二章 1.本章是综合前面章节的所有东西的,一个综合实例 2.流程:①项目简介:a.获取原始资料(包括文本.图片.音视频等) b.站点结构(文件目录结构) c.页面(文件)结构 ②设计(切图) ③c ...

  4. 《深入理解java虚拟机》读书笔记十一——第十二章

    第十二章  Java内存模型与线程 1.硬件效率与一致性 由于计算机的存储设备与处理器的运算速度有几个数量级的差距,所以现代计算机系统都不得不加入一层读写速度尽可能接近处理器运算速度的高速缓存(Cac ...

  5. Linux内核设计与实现 总结笔记(第十二章)内存管理

    内核里的内存分配不像其他地方分配内存那么容易,内核的内存分配不能简单便捷的使用,分配机制也不能太复杂. 一.页 内核把页作为内存管理的基本单位,尽管处理器最小寻址坑是是字或者字节.但是内存管理单元MM ...

  6. JavaScript高级程序设计:第十二章

    DOM1级主要定义的是HTML和XML文档的底层结构.DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力,也支持了更高级的XML特性.为此DOM2和DOM3级分为许多模块,这些模块如下: D ...

  7. apue学习笔记(第十二章 线程控制)

    本章将讲解控制线程行为方面的详细内容,而前面的章节中使用的都是它们的默认行为 线程属性 pthread接口允许我们通过设置每个对象关联的不同属性来细调线程和同步对象的行为.管理这些属性的函数都遵循相同 ...

  8. 流畅python学习笔记:第十二章:子类化内置类型

    子类化内置类型 在python2.2之后,内置类型都可以子类化,但是有一个注意事项:内置类型不会调用用户定义的类覆盖的特殊方法.这个说起来比较绕口,什么意思呢.我们来看下下面的代码: class Do ...

  9. Javascript设计模式笔记

    Javascript是越来越厉害了,一统前后端开发.于是最近把设计模式又看了一遍,顺便做了个笔记,以方便自己和他人共同学习. 笔记连载详见:http://www.meteorcn.net/wordpr ...

随机推荐

  1. 基于 bi-LSTM和CRF的中文命名实体识别

    follow: https://github.com/zjy-ucas/ChineseNER  这里边主要识别的实体如图所示,其实也就主要识别人名PER,机构ORG和地点LOC: B表示开始的字节,I ...

  2. 从CWnd::GetSafeHwnd实现得到的知识

    在看MFC源码的过程中,有个地方一直不解,看如下代码 BOOL CFrameWnd::Create(LPCTSTR lpszClassName, LPCTSTR lpszWindowName, DWO ...

  3. Money Systems

    链接 分析:来看看背包九讲里面的一段话: 对于一个给定了背包容量.物品费用.物品间相互关系(分组.依赖等) 的背包问题,除了再给定每个物品的价值后求可得到的最大价值外,还可以得 到装满背包或将背包装至 ...

  4. C#支持从自定义日期时间格式到DateTime类型

            /// <summary>         ///         /// </summary>         /// <param name=&quo ...

  5. jQuery之简单的表单验证

    html部分: <body> <form method="post" action=""> <div class="in ...

  6. Vijos:P1234口袋的天空

    背景 小杉坐在教室里,透过口袋一样的窗户看口袋一样的天空. 有很多云飘在那里,看起来很漂亮,小杉想摘下那样美的几朵云,做成棉花糖. 描述 给你云朵的个数N,再给你M个关系,表示哪些云朵可以连在一起. ...

  7. POJ2253(djkstra求最长最短边)

    Frogger Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 32257   Accepted: 10396 Descrip ...

  8. python基础知识-列表,元组,字典

    列表(list) 赋值方法: l = [11,45,67,34,89,23] l = list() 列表的方法: #!/usr/bin/env python class list(object): & ...

  9. debian 7上源码编译MongoDB 3.4版本

    此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 要想精通一个数据库,除了知道该数据库的功能特性.使用方法等,还需要能够看懂数据库源码,能够使用gdb工具对其 ...

  10. SpringMVC 静态资源处理

    <!-- 不处理静态内容 --><mvc:default-servlet-handler/><!--前端控制器,哪些静态资源不拦截--><mvc:resour ...