lecture Home > .NET > JavaScript OOP

JavaScript OOP Programming

   강좌 최초 작성일 : 2007년 10월 03일
   강좌 최종 수정일 : 2007년 10월 16일

   강좌 읽음 수 : 회

   작성자 : 히딩크(정 석모)
   편집자 : Taeyo(김 태영)

   강좌 제목 : JavaScript OOP 코어 자바스크립트 객체와 prototype를 사용한 객체 확장

강좌 전 필자의 잡담>

이번 강좌는 태오닷넷에서 활동 중인 Micosoft MVP 인 정석모님의 강좌입니다.
정석모님은 최근 Ajax Design Patterns란 책을 번역하여 출간하기도 하셨구요.
태오 사이트의 Talk 게시판 시삽이기도 하십니다.
특유의 개그적인 문체가 특허출원 중인 이 친구의 재미난 강좌에 한번 빠져보세요~

이 강좌의 순서

객체지향 자바스크립트 프로그래밍
    (1) 스트레칭
    (2) 코어 자바스크립트 객체와 prototype을 사용한 객체 확장
    (3) 사용자 정의 객체. 그리고 상속과 재사용
    (4) 나만의 프레임워크 만들기
강좌 시작전 1분 스피치

매우 안녕하십니다! 히딩크 입니다!
염통이 쪼그라들만한 추위가 다가오는 와중에도 코딩에 여념이 없는 손가락 관절은 안녕들 하십니까!

개발자의 땀내는 명품 채널5번 향수보다 향기롭다고 누군가가 말했었습니다.
가장 매력적인 땀내의 소유자가 누구인지를 찾아내는 재귀함수는 아직도 꼬리를 물고 수행 중 입니다.

지난번 스트레칭 강좌는 잘들 보셨나요? 강좌 업데이트가 너무 늦어서 다 까 잡수셨다구요? ㅜㅜ
죄송합니다. 나름대로 바쁜 척 하느라 많이 늦었습니다. 한번만 봐주시면 사랑해 드립니다.

자! 이번 시간부터 본격적인 OOP 강좌에 들어 갑니다.
귀를 쫑~~끗 세우고 눈을 깜~빡 깜~빡 거리면서 강좌를 읽어 주시기 바랍니다.

자!! 큰 박수 주세요!!

코어 자바스크립트 객체

자바스크립트는 몇 가지 내장 객체를 가지고 있습니다. 지금부터 자바스크립트가 가지고 있는 대표적인 내장 객체들을 간단하게 시식해 보도록 하겠습니다.

1. Object 객체

Object 객체는 가장 상위 수준(top-level)의 전역(Global) 객체이며 비어있는(empty) 껍데기 객체 입니다.

스파르타 왕국에 살던 Object씨(19세)는 "난 아무짝에도 쓸모가 없는 객체야.." 하며 자괴감과 한숨으로 여러 날을 보내고 있었습니다. 시간은 흘러 흘러! Object씨는 prototype이란 아름답고 매력적이고 관대한 프로퍼티를 신부로 맞아 들여서 결혼을 했습니다. 그녀는 Object에게 자신감과 희망을 안겨 주었고, 자식들을 순풍순풍 많이 낳고 행복하게 살았습니다. 그 중 사람들에게 가장 알려진 자식들의 이름은 "제임스 String", "마가렛 Number", "샬럿 Date", "마이클 빅 Math", "윌리엄 Array" 입니다.

뭔 얘기냐고요? 그렇습니다! 자바스크립트의 모든 객체는 최상위 수준의 전역 객체인 Object로 부터 파생되어 확장 된 것입니다. 그것이 여러분이 직접 만든 사용자 정의 객체라도 말이죠.

몇 가지 대표적인 프로퍼티와 메서드는 다음과 같습니다.

- 프로퍼티
1. constructor : 생성자 메서드를 명시 합니다.
2. prototype : 추가적인 메서드와 프로퍼티를 명시할 수 있는 매력 만점의 프로퍼티 입니다.

- 메서드
1. hasOwnProperty( s ) : 해당 프로퍼티가 존재 하는지를 불리언 형식으로 반환 합니다.
2. toString() : 객체의 상태를 문자열 형식으로 반환 합니다.
3. isPrototypeOf( o ) : 다른 객체로부터 확장 되었는지를 불리언 형식으로 반환 합니다.
이렇듯 Object 객체는 객체를 확장하기 위한 프로퍼티와 메서드들을 가지고 있습니다. 나머지 객체들은 모두가 잘 알고 있는 내용이니 간단한 설명과 명세 링크로 대신 하겠습니다.

2. String 객체

String 객체는 문자열(연속적인 문자들의 연속) 형식의 데이터를 다루는 객체입니다.

   String 객체의 명세 보기

3. Number 객체

Number 객체는 숫자 형식의 데이터를 다루는 객체입니다.

   Number 객체의 명세 보기

4. Math 객체

Math 객체는 수학적인 계산을 다루는 객체입니다.

   Math 객체의 명세 보기

5. Array 객체

Array 객체는 객체의 연속적인 배열을 다루는 객체입니다.

   Array 객체의 명세 보기

6. Date 객체

Date 객체는 날짜 형식의 데이터를 다루는 객체입니다.

   Date 객체의 명세 보기


자바스크립트 객체 인스턴스 생성

자!! 지금까지 코어 객체들을 알아보았습니다. 위에서 살펴본 객체 명세에 따라 객체 인스턴스를 생성해 보자구요~ 실습에 필요한 준비물은 "new" 키워드 입니다.

객체의 인스턴스를 생성은 다음과 같이 new 키워드와 생성자 메서드를 명시함으로써 생성할 수 있습니다. 당연한 이야기이지만 객체의 이름과 생성자 메서드의 이름은 동일 합니다. 아주 간단한 예제를 살펴 보도록 하겠습니다. Simple is best!

1
2		 
 var o1 = new String("Hello My Girl"); //String 객체	
 var o2 = new Number(1024);            //Number 객체

이쯤에서 예상되는 질문이 있습니다.

김덕배 : 김덕배 입니다. var o = "Hello My Girl"; 처럼 선언을 해도 String 객체가 선언되지 않나요?

좋은 질문입니다. 그러한 선언으로는 객체의 인스턴스가 생성되지 않으며, 그것은 단지 기본 데이터(Primitive Data)일 뿐입니다. 위의 예제처럼 new 키워드를 사용해서 String 객체의 인스턴스가 생성 된 후 그 인스턴스의 포인터를 변수에 할당하고 사용할 수 있어야만 비로소 객체가 되는 것 입니다.

말씀 드리는 순간 김덕배씨가 또 손을 들어 주셨네요. 또 다른 질문이 있으신가 봅니다. 다 같이 들어보도록 하죠.

김덕배 : 김덕배 입니다. 그렇다면 객체 인스턴스의 사용이 끝난 다음의 메모리 해제는 어떻게 하나요?

정말 정말 좋은 질문입니다. 객체 인스턴스 포인터를 담고 있는 변수에 null을 할당 하기만 하면 됩니다. 다음과 같이 말이죠..

1
2		 
 var o1 = new String("Hello My Girl"); //String 객체	
 o2 = null;

사실 자바스크립트에도 가비지 컬렉터(garbage collector)라는 쓰레기차가 있습니다만 100%의 신뢰도를 가지고 있지 않습니다. 쓰레기차가 찾아내지 못한 쓰레기가 메모리 어딘가에 숨어있을 수 있기 때문이죠(대표적으로 Ajax에서 자주 쓰게 되는 익명함수-closure function-가 그러 합니다). 기대하지 못했던 메모리 낭비가 계속해서 누적되면 브라우저의 메모리 점유율이 현저히 증가하게 되며, 그 결과 우리의 웹 어플리케이션은 산소가 부족하여 헥헥 거리게 될 것입니다.

이러한 메모리 낭비를 줄이기 위해서 우리 개발자들이 아주 약간의 수고를 해야 합니다. 반드시 사용이 끝난 객체는 null로 초기화를 시켜 주어서 인스턴스를 사뿐히 쓰레기통에 담는 아주 간단한 수고로 우리는 행복해질 수 있습니다.

한 줄 요약 : 인스턴스 생성과 메모리 해제는 매우 쉽다.
또 한 줄 요약 : 자바스크립트 가비지 컬렉터가 궁금하신 분은 요오오오기 클릭!!


prototype!! 자바스크립트 객체를 튜닝해서 상큼한 날개를 달자!!

자~ 이제 매력적인 prototype을 사용해 봅시다. 일단 예제부터 보자구요~ 아주 쉽고 간단하답니다~

1
2
3
4
5
6
7
8
9
10
11		 
 String.prototype.myComment;
 String.prototype.getLength = function(){ return this.length; }
 String.prototype.toString    = function(){ return "김덕배님의 말 : " + this.valueOf(); }

 var o = new String("Hello My Girl");
 
 o.myComment = "This is Object";

 alert( o.myComment ); //"This is Object"
 alert( o.getLength() );   //13
 alert( o );                    //"김덕배님의 말 : Hello My Girl"

자~ 제가 무슨 짓을 저질러 놓았을까요? 일단 차근차근 짚어 보겠습니다.

1) String.prototype.myComment;
String 객체에 myComment라는 프로퍼티를 추가 했습니다.

2) String.prototype.getLength = function(){ return this.length; }
String 객체에 문자열의 길이를 반환하는 메서드를 추가 했습니다.

3) String.prototype.toString = function(){ return "김덕배님의 말 : " + this.valueOf(); }
이것은 String 객체의 상태(문자열)을 반환하는 toString() 메서드를 오버라이딩(Overriding)한 것입니다(오버라이딩은 상속받은 객체의 메서드를 다시 정의하는 것 입니다). toString() 메서드는 객체 상태의 문자열 표현을 반환하는 Object 객체의 메서드 이며, 이를 상속받은 코어 객체에 오버라이딩 되어 미리 구현이 되어 있습니다. 하지만 toString()이 구현되지 않은 Object 객체와 HTML 객체들, 그리고 사용자 정의 객체에서는 "[Object]"라는 문자열이 반환 됩니다. 여러분이 직접 만드신 사용자 정의 객체의 상태를 문자열로 표현하고 싶다면 위의 예제처럼 toString() 메서드를 직접 구현해야 합니다.

우리는 위의 예제를 통해 기본적인 String 객체에 1개의 프로퍼티와 1개의 메서드 추가, 그리고 1개의 메서드 오버라이딩을 구현 했습니다. 단지 prototype 프로퍼티 하나로 말이죠. 추가적인 프로퍼티/메서드의 사용법은 위의 예제처럼 아주 쉽게 할 수 있습니다. 오버로딩(Overloading)도 궁금하다고요? 아쉽게도 오버로딩은 지원되지 않습니다만 몇 가지 꼼수를 사용해서 제한적으로 구현할 수 있습니다. 오버로딩에 대해서는 4번째 시간에 다뤄 보도록 하겠습니다.


세줄 요약

1. 인스턴스가 메모리에 자리 잡아야 진정한 객체다.
2. prototype은 원더걸스보다 예쁘다.
3. 자바스크립트에서도 오버라이딩이 가능하다. prototype이 있으니까!

그럼 다음 시간에 뵙겠습니다! 채널 고정!

강좌 목록으로..