Object Oriented JavaScript (2)

EnRichClient 개발팀

Introduction

Object Oriented JavaScript(1) 에서 살펴본 바와 같이 JavaScript는 객체지향 프로그래밍에 필요한 필수적인 요소들을 대부분 수용하고 있다. 이 글에서는 JavaScript의 상속과 가변인자, Static구현과 같은 추가적인 고급 기능들에 대해 살펴본다.

상속(Inheritance)

상속성(Inheritance)이란 클래스들간에 함수나 데이터를 공유하게 하는 것을 말한다. 하나의 클래스가 가지고 있는 멤버를 다른 클래스가 물려 받는 것이라고 할 수 있다. 상속은 기존의 객체(혹은 클래스)가 가지고 있는 멤버를 그대로 사용하면서 확장할 수 있는 방법을 제공하기 때문에 객체지향 프로그래밍에서 매우 중요한 기능중의 하나이다.

위 그림은 Circle이 Shape을 상속하는 것을 나타낸다. (UML에서 상속을 나타내는 화살표는 방향을 나타내는 것이 아니라, IS-A 관계를 표현한다. 즉, 상속을 상속을 나타내는 화살표는 ‘Circle IS-A Shape’을 표현하고 있다)

JavaScript는 prototype기반의 상속을 제공한다. (Java의 extends와 같이 상속을 위한 키워드가 따로 존재 하지 않는다).

function Shape() // Shape 클래스
{
  this.x = 10;
  this.y = 10;
  this.draw = function() 
  {
    alert("draw Shape (" + this.x + "," + this.y + ")");  
  }
}

function Circle() // Circle 클래스
{
}


Circle.prototype = new Shape();  // Shape, Circle 상속

var circle = new Circle();

circle.x = 30;
circle.y = 40;
circle.draw();  // "draw Shape (30,40)"

위의 예는 Shape에서 Circle로 상속하는 방법을 보여준다. 다음과 같이 객체의 prototype에 상속받고자 하는 부모 객체를 할당함으로써 상속을 할 수 있다.

Circle.prototype = new Shape();

기존의 Jscript 객체인 String, Number, Error등도 자유롭게 확장이 가능하다.

가변길이 인자(variable length argument)

가변길이 인자는 함수를 호출할 때 인자의 뒷부분을 생략 할 수 있는 기능을 말한다. 예를 들어 다음과 같은 코드에서 Shape 클래스는 하나만 존재하지만, 인자를 1~3개까지 지정해 주고 싶은 만큼 지정해 주고 있다.

var sh1 = new Shape(10);              // 객체생성
var sh2 = new Shape(30, 40);          // 객체생성
var sh3 = new Shape(50, 60, 'hello'); // 객체생성

이것을 구현하기 위해 JavaScript에서는 arguments라는 프로퍼티를 사용한다. arguments는 함수에 넘기는 인자를 가지고 있는 배열이다.

function Shape()
{
  this.x    = Shape.arguments[0] || 0;
  this.y    = Shape.arguments[1] || 0;
  this.text = Shape.arguments[2] || "default";
  
  this.drawText = drawText;
  
  function drawText()
  {
    alert(this.text + "(" + this.x + ","+ this.y + ")");
  }
}
 
var sh1 = new Shape(10);              // 객체생성 
var sh2 = new Shape(30, 40);          // 객체생성 
var sh3 = new Shape(50, 60, 'hello'); // 객체생성 

sh1.drawText();                       // "default(10,0)"
sh2.drawText();                       // "default(30,40)"
sh3.drawText();                       // "hello(50,60)"

위 코드 중 다음 내용은,

this.text = Shape.arguments[2] || "default";

Shape 함수로 넘어온 인자(arguments)배열의 세번째 인자(arguments[2])가 undefined가 아니면 넘어온 값을 사용하고, 그렇지 않으면 "default"라는 문자열을 text란 멤버함수에 할당하는 코드이다.

Static 멤버

function 객체 자체에도 추가할 수 있다. 클래스(function)에 staticMember를 추가하는 예제를 살펴보자.

function MyClass() {  
  this.instMember = 10;  // instance memeber  
}

MyClass.staticMember = 20;     // static memeber 

var a = new MyClass();
var b = new MyClass();

alert(MyClass.staticMember);

이렇게 사용하면, 마치 Java나 C#의 클래스 변수(class variable)와 같은 사용이 가능하다.

결론

JavaScript에서는 모든 것이 객체이다. 다른 객체지향 언어들과 달리 class를 가지고 있지 않다. JavaScript는 prototype 기반의 상속을 제공하며 arguments등 다양한 부가적인 기능들을 가지고 있다. 이러한 기능들을 충분히 활용하면 재사용성인 높은 프레임워크를 구축할 수 있다.

History

Reference

Title:       Object Oriented JavaScript (2)
Author:      EnRichClient Development Team
Email:       support@enrichclient.com 
Environment: EnRichClient
Keywords:    Object Oriented, Inheritance, variable length argument, Static
Level:       Advanced

© 2004,2005 eLasticWare Corp. All right reserved.