자바스크립트 상속

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

좋구먼~ ㅎㅎㅎ

넌 너무 유연해~~

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...");  

  }

});