컴포지트 패턴(Composite pattern) javascript 구현

/*
  * 컴포지트 패턴(Composite pattern)이란 객체들의 관계를 트리 구조로 구성하여 부분-전체 계층을 표현하는 패턴으로, 사용자가 단일 객체와 복합 객체 모두 동일하게 다루도록 한다.
  * 컴포넌트 : 컴포넌트란 더 큰 프로그램이나 구조물에서 식별 가능한 "일부분"이다, 컴포넌트는 특정 기능이나 관련된 기능들의 조합을 제공한다.
  // 보통 트리구조
  // 현재 기본 구조 { figure : [rect,line,circle], group: figurelist[] }
  // 바꿀 구조 { figure : [rect,line,circle,group]}
 */
 function Figure(){
  this.shape = "none";
 }
 Figure.prototype= {
  draw : function(){
   console.log(this.shape);
  }
 };
 var figure = new Figure();
  
 function Rectangle(){
  this.shape = "Rectangle_shape";
 };
 Rectangle.prototype = figure;

 function Circle(){
  this.shape = "Circle_shape";
 };
 Circle.prototype = figure;

 function Line(){
  this.shape = "Line_shape";
 };
 Line.prototype = figure;

 var rectangle = new Rectangle;
 var line = new Line;
 var circle = new Circle;

// rectangle.draw();

 
 //각각의 figure를 통합하여 전체 그리기 시도시 이렇게 따로 구현 해야됨
 function Group(){
  var arr = [];
  this.add = function(figure){
   arr.push(figure);
  };
  this.totalDraw = function(){
   arr.forEach(function(me, i){
    me.draw();
   })
  };


 }
// 상속받는 기능 들에 대해서도 모두 따로 구현해줘야되는 부분을 
/* var group = new Group;
  group.add(rectangle);
  group.add(line);
  group.totalDraw();
*/

//구성 공유
 function Figure(){
  this.shape = "none";
  this.arr = [];  //배열에 부분들 추가 
 }

 Figure.prototype.add = function(figure){
   this.arr.push(figure);
 };

 function Group(){
  this.draw = function(){
   this.arr.forEach(function(me, i){
    me.draw();
   })
  };
 }

//같은 figure상속
 Group.prototype = figure;


 var group = new Group;
  group.add(rectangle);
  group.add(line);
//group 이어도 똑같은 draw메소드
  group.draw();

 var rectangle = new Rectangle;
//다른 draw도 정상적인 기능
  circle.draw();

// 객체와 객체 그룹간 동일한 인터페이스로 사용 가능