어린왕자와 여우

자바스크립트에 대해 OOP언어라는 말들을 많이 들으면서 한번 OOP개념을 정리해보려고 한다.
웹페이지 작업 시 부수적인 언어로 생각했을 때는 체계적으로 공부하지 않고, 그저 부수적인 언어로 생각했으나 요즘 생각이 많이 변하고 있다.


Using Object Oriented Javascript

1) Object 객체를 이용한 커스텀객체 생성

자바스크립트의 가장 상위개념의 객체는 (Object object)이다.
기본적으로 Object객체를 이용하여 커스텀객체 (Custom object)를 하나 생성할 수 있다.

var obj1 = new Object();
obj1.max = 10;
obj1.min = 5;

또는

var obj2 = {};
obj2.max = 20;
obj2.min = 10;

2) 생성자함수를 이용한 커스템객체 생성

먼저 생성자함수 (Cunstructor Function)를 하나 만들고 이를 통해 커스텀객체를 하나 생성한다.

function TestObject(name) {
    this.name = name;
}

var obj3 = new TestObject();
var obj4 = new TestObject("hello");

obj3의 name에는 null이 들어갈 것이고, obj4의 name에는 hello가 들어갈 것이다.


3) 생성자함수에 Method추가

여기에 추가로 생성자함수에 property (this.name)외에 method를 하나 추가해보자.

function TestObject(name) {
    this.name = name;
    this.show = displayName;
}

function displayName() {
    alert(this.name);
}

var obj4 = new TestObject("hello");
obj4.show();

obj4.show()를 호출할 때 hello alert창이 나타내게 될 것이다.


4) 인스턴스에 property 제거/추가

3)에서 예제로 든 소스 중에서 obj4.show(); 후에 아래의 코드를 추가해보자.

delete obj4.name;

obj4.first = 15;

추가된 코드 이후로는 obj4에서 name이라는 property가 없어졌고, first라는 property가 생성됨을 확인할 수 있다.
그러나 이것은 obj4에서만 property가 사라지고 추가된 것이며, obj3에서도 사라지고 새로운 property가 추가된 것이 아니다.

<즉, 인스턴스에 적용되는 사항이다>


5) 생성자함수 내에 property 추가

4)에서 인스턴스마다 제거를 하거나 추가를 하는 것은 참조된 인스턴스가 많은 경우에는 큰 작업이다.
이럴때 생성자함수에 property를 추가하여 인스턴스들에 모두 적용하고 싶다면 어떻게 해야 할까?

<답은 prototype이다>

TestObject.prototype.second = 20;

이미 생성되어 있던 obj3, obj4에 second라는 property가 추가된 것을 알 수 있다.
사실 prototype은 많이 쓰고 있는 개념으로 이전에 썼던 trim기능구현에서도 사용되었다.


6) property를 이용한 객체 상속

새로운 생성자함수를 만들어 위에서 만든 TestObject로 상속해보자.

function AddObject(age) {
    this.age = age;
}

TestObject.prototype = new AddObject(34);
var obj5 = new TestObject("world");

생성된 obj5 인스턴스는 TestObject의 name, AddObject의 age property 모두를 사용할 수 있다.
이로써 성공적인 상속이 구현되었다.

test.html_

추가) 2012.07.03

GosselinJavaScriptV5Ch6.pdf