자바스크립트 상속

Posted in 모바일/Javascript // Posted at 2013. 7. 12. 18:02
728x90

객체 지향 언어의 면모를 여실히 보여주는 자바스크립트 상속! 다형성!

좋구먼~ ㅎㅎㅎ


넌 너무 유연해~~


var Polygon = function(){

    var self = this;

    self.type = "Polygon";    

    self.commonDo = function(){

        console.log("commonDoing...");

    };

    self.draw = function(){

        console.log("draw " + self.type);

    };

};


var Square = function(){

  var self = this;

  self.type = "Square";

  self.draw = function(){                              //오버라이딩

      console.log("draw " + self.type); 

  };

  self.squareDoing = function(){

    console.log("squareleDoing...");  

  }

};

Square.prototype = new Polygon();         //상속



var Triangle = function(){

  var self = this;

  self.type = "Triangle";

  self.draw = function(){                              //오버라이딩         

      console.log("draw " + self.type);

  };

  self.triangleDoing = function(){

    console.log("triangleDoing...");  

  }

};

Triangle.prototype = new Polygon();       //상속


....


var obj1 = new Square();

obj1.commonDo();

obj1.draw();     

obj1.squareDoing();       

var obj2 = new Triangle();

obj2.commonDo();

obj2.draw();

obj2.triangleDoing();          

console.log(obj1 instanceof Polygon);

console.log(obj2 instanceof Polygon);



prototype.js를 이용하면 보다 가독성 높은 상속 코드를 구현할 수 있다. 아래 코드는 prototype.js를 사용해서 이전 코드와 동일한 클래스 및 상속 구조를 구현한다

var Polygon = Class.create({

    initialize: function(){

        this.type = "Polygon";

    },  

    commonDo : function(){

        console.log("commonDoing...");

    },

    draw : function(){

        console.log("draw " + this.type);

    }

});


var Square = Class.create(Polygon,{

  initialize: function(){

        this.type = "Square";

  },  

  draw : function(){               

      console.log("draw " + this.type); 

  },

  squareDoing : function(){

    console.log("squareleDoing...");  

  }

});



var Triangle = Class.create(Polygon,{

  initialize: function(){

        this.type = "Triangle";

  },

  draw : function(){               

      console.log("draw " + this.type); 

  },

  triangleDoing : function(){

    console.log("triangleDoing...");  

  }

});



'모바일 > Javascript' 카테고리의 다른 글

Pie.js  (0) 2013.07.16
Zepto.js  (0) 2013.07.15
ProcessingJS, 자바스크립트 Canvas 라이브러리  (0) 2013.07.12
평점에서 별표 마킹  (0) 2012.11.16
자주 쓰는 jQuery 기능 - 이벤트 편  (0) 2011.08.04