如何使用javascript中的装饰模式-创新互联

这篇文章主要讲解了如何使用javascript中的装饰模式，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

介绍：装饰模式可以在不改变一个对象本身功能的基础上给对象增加额外的新行为。在现实生活中，这种情况也到处存在，例如一张照片，可以不改变照片本身，通过增加一个相框，使其具有防潮的功能。装饰模式是一种用于替代继承的技术，它使用对象之间的关联关系来取代继承关系。

定义：动态的给一个对象增加一些额外的职责，就增加对象功能来说，装饰模式比生成子类实现更为灵活。装饰模式是一种对象结构模型。

场景：我们现有一个Circle类用来画一个圆，新的需求要求画一个红色的圆，又一个新的需求要求我们画一个半径20的圆，又一个新的需求要求我们画一个红色的，半径20的圆。
如何设计才能让我们的代码来兼容这样的需求呢？我们首先给Circle类包装一个颜色的相框，这个相框用来改变圆的颜色。再给Circle类包装一个大小的相框，这个相框用来改变圆的大小。通过不同的相框组合来达到想要的效果。

示例：

var Circle = function(){
  this.draw = function(){
    console.log('画圆');
  };
}
 
var ColorDecorator = function(circle){
  this.circle = circle;
  this.draw = function(){
    this.circle.draw();
    setColor();
    return this.circle;
  }
  function setColor(){
    console.log('红色');
  }
}
 
var RadiusDecorator = function(circle){
  this.circle = circle;
  this.draw = function(){
    this.circle.draw();
    setRadius();
  }
  function setRadius(){
    console.log('半径：20px')
  }
}
 
var circle = new Circle();
 
var redCricle = new ColorDecorator(circle);
 
var radiusCricle = new RadiusDecorator(circle);
 
var radiusRedCircle = new RadiusDecorator(new ColorDecorator(circle));
 
//输出：
circle.draw();  //画圆
 
redCricle.draw(); //画圆 红色
 
radiusCricle.draw(); //画圆 半径：20px
 
radiusRedCircle.draw(); //画圆 红色 半径：20px