자바스크립트 상속
객체 지향 언어의 면모를 여실히 보여주는 자바스크립트 상속! 다형성!
좋구먼~ ㅎㅎㅎ
넌 너무 유연해~~
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...");
}
});