1、面向对象模式装饰者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象—Decorator装饰者模式</title>
<script type="text/javascript">
//给实例对象(注：不影响类)动态添加职责的方式叫做Decorator装饰者模式，较继承，此方法更为灵活。
//先声明一个原始飞机类
var Plane = function(){};
Plane.prototype.fire = function(){
console.log('发射子弹');
}
//接下来声明两个装饰类,他们之间靠this所指向的实例对象连接
var MissleDecorator = function(plane){//发射导弹装饰类
this.plane = plane;
}
MissleDecorator.prototype.fire = function(){
this.plane.fire();
console.log('发射导弹');
}
var AtomDecorator = function(plane){//发射原子弹装饰类
this.plane = plane;
}
AtomDecorator.prototype.fire = function(){
this.plane.fire();
console.log('发射原子弹');
}
//测试用例
var plane = new Plane();
plane = new MissleDecorator(plane);//技巧在于这里的实例传参，起到纽带作用
plane = new AtomDecorator(plane);
plane.fire();
//本例已经通过验证
</script>
</head>
<body>
</body>
</html>
2、函数式编程实现装饰者效果——其实是职责链模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>函数式编程实现装饰者效果——其实是职责链模式</title>
</head>
<body>
</body>
<script type="text/javascript">
var plane = { //声明单体对象plane
fire:function(){
console.log('发射子弹');
}
}
var missleDecortor = function(){ //声明“发射导弹”功能函数
console.log('发射导弹');
}
var atomDecortor = function(){ //声明“发射原子弹”功能函数
console.log('发射原子弹');
}
//缓存原plane对象的fire模块
var fire1 = plane.fire;
//重写，拓展plane.fire
plane.fire = function(){
fire1();
missleDecortor(); //拓展发射导弹功能
}
//再次缓存，再次重写
var fire2 = plane.fire;
plane.fire = function(){
fire2();
atomDecortor();
}
plane.fire();
</script>
</html>