잡다한 일상사 WebJoy.kr :: AJAX 강의 5-9장 - 자바스크립트 심화학습/객체지향

AJAX 강의 5-9장 - 자바스크립트 심화학습/객체지향

WEB/AJAX 2007/06/06 12:47 by 아쿠아바다

classicalInheritance-jinoxst.html

classicalInheritance-jinoxst.js

블로그 > Beyond Tomorrow

http://blog.naver.com/jinoxst/140022149160

5-7, 5-8장을 통해서 자바스크립트의 클래스간 상속과 은닉의 구현이 가능하다라는 것을 소개하였다. 하지만 상속의 경우 prototype 속성을 사용하였기 때문에 일반적인 oop 언어에서 상속을 구현할때와 비교해 봤을때 다소 어색함이 느껴질 것이다. 따라서 좀더 oop 에 가까워지기 위한 다른 편법을 모색해 보기로 한다.

넷스케이프 커뮤니케이션의 Bob Clay 는 부모 클래스의 메소드를 자식 클래스에 복사할 수 있는 아주 간단한 메소드를 소개하였다.

http://devedge-temp.mozilla.org/toolbox/examples/2003/inheritFrom/index_en.html

위 페이지에 가면 메소드에 대한 설명 및 샘플예제를 실행해 볼 수 있다.

function createInheritance(parent, child) {
var property;
for(property in parent) {
if(!child[property]) {
child[property] = parent[property];
}
}
}

밥이 소개한 메소드는 위와 같다. 부모 클래스의 모든 멤버 및 메소드가 자식클래스에도 존재하는지 체크하고 존재하지 않으면 복사해주는 아주 간단한 메소드이다.

주의해서 볼 것은 부모클래스의 멤버 및 메소드 중에서 private 형태(생성자안에서 var 로 선언/5-8장 참조)로 선언되면 자식 클래스로 복사되지 않는다는 것이다. 하지만 자식클래스에는 부모의 private 멤버들이 복사되지 않더라도 public 의 setter, getter 메소드가 복사될 것이므로 얼마든지 부모의 private 멤버에 접근할 수 있다.

위 메소드를 사용해서 부모클래스의 멤버까지 자식클래스로 복사되기를 원한다면 어쩔 수 없이 부모클래스의 private 타입을 public 으로 수정해 주어야 한다. public 으로 수정하려면 메소드 선언과 같은 방법인 this 키워드와 .(dot) 으로 선언해 주면된다.(예 : this.wheelCount = 10;)

위 메소드를 적용한 예제를 살펴보자.

function Vehicle() {
var wheelCount = 4;
var curbWeightInPounds = 4000;

this.getWheelCount = function() {
return wheelCount;
}

this.setWheelCount = function(count) {
wheelCount = count;
}

this.getCurbWeightInPounds = function() {
return curbWeightInPounds;
}

this.setCurbWeightInPounds = function(weight) {
curbWeightInPounds = weight;
}

this.refuel = function() {
return "Refueling Vehicle with regular 87 octane gasoline";
}

this.mainTasks = function() {
return "Driving to work, school, and the grocery store";
}
}

function SportsCar() {
this.refuel = function() {
return "Refueling SportsCar with premium 94 octane gasoline";
}

this.mainTasks = function() {
return "Spirited driving, looking good, driving to the beach";
}
}

function CementTruck() {
this.refuel = function() {
return "Refueling CementTruck with diesel fuel";
}

this.mainTasks = function() {
return "Arrive at construction site, extend boom, deliver cement";
}
}

<classicalInheritance.js 의 전체 소스코드>

부모인 Vehicle 클래스에는 wheelCount 및 curbWeightInPounds 멤버가 모두 private 으로 선언되어 있고 getter 및 setter 메소드는 public 으로 선언되어있다. 자식인 SportsCar 와 CementTruck 클래스에는 멤버가 전혀 존재하지 않으며 단지 refuel, mainTasks 메소드만 override 하고 있다.

위 클래스들을 기초로 다음과 같이 테스트 코드를 작성해 보자.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Classical Inheritance in JavaScript</title>

function createVehicle() {
var vehicle = new Vehicle();
describe(vehicle);
}

function createSportsCar() {
var sportsCar = new SportsCar();
createInheritance(new Vehicle(), sportsCar);
sportsCar.setCurbWeightInPounds(3000);
describe(sportsCar);
}

function createCementTruck() {
var cementTruck = new CementTruck();
createInheritance(new Vehicle(), cementTruck);
cementTruck.setWheelCount(10);
cementTruck.setCurbWeightInPounds(10000);
describe(cementTruck);
}
</script>
</head>

<body>
<h1>Examples of Classical Inheritance in JavaScript</h1>

<br/><br/>
<button onclick="createVehicle();">Create an instance of Vehicle</button>

<br/><br/>
<button onclick="createSportsCar();">Create an instance of SportsCar</button>

<br/><br/>
<button onclick="createCementTruck();">Create an instance of CementTruck</button>

</body>
</html>

<classicalInheritance.html 의 전체 소스 코드>

위 테스트 코드를 통해서 자바스크립트 객체의 prototype 속성을 사용하지 않고 상속을 어떻게 구현할 수 있는지와 은닉에 대해서 보다 자세하게 이해할 수 있을 것이다.

다음은 위 테스트 코드의 실행 결과이다.

classicalInheritance-jinoxst.html

classicalInheritance-jinoxst.js

<Vehicle 객체에 대한 멤버 및 메소드 실행결과>

<SportsCar 클래스의 멤버 및 메소드 실행결과>

<CementTruck 의 멤버 및 메소드 실행결과>

위 예제는 다운받아 테스트 해 볼 수 있다.

5장에서는 Ajax 와 직접적으로 관련있는 것은 아니지만 활용만 잘 한다면 Ajax Developer 로써 실전에서 좀 더 재미있고 유용하게 Ajax 를 사용할 수 있을 것이다.

이것으로 5장을 마무리 한다.

'WEB > AJAX' 카테고리의 다른 글

AJAX 강의 6-2장 - JsUnit 활용/테스트 메소드작성 (0)	2007/06/07
AJAX 강의 6-1장 - JsUnit 활용/시작하기 (0)	2007/06/07
AJAX 강의 5-9장 - 자바스크립트 심화학습/객체지향 (0)	2007/06/06
AJAX 강의 5-8장 - 자바스크립트 심화학습/객체지향 (0)	2007/06/06
AJAX 강의 5-7장 - 자바스크립트 심화학습/객체지향(상 (0)	2007/06/06
ASP.NET Spiced: AJAX (0)	2007/06/06