JavaScript의 OOP가 생소하신가요?

근래에 들어서 ASP.NET AJAX도 나왔고 본격적으로 Visual Studio 2008이나 Visual Web Developer 2008을 통해서 Java Script 인텔리센스도 사용할 수 있게 되면서 참 좋아졌습니다. 하지만 JavaScript에서도 OOP가 가능하다는 사실을 모르는 분들도 많고 알고 난 뒤의 당황스러움 또한 말로 표현하기 어려우실 겁니다. 🙂


JavaScript의 OOP는 기존의 OOP 프로그래밍 언어에서 최소한의 내용만을 가져왔고 복합적인 형태를 띕니다. 아래의 연속된 박스들을 보면서 어떻게 OOP가 완성되는지 살펴보도록 하겠습니다.


function myClass()
{
    // 보통은 이곳에 함수의 내용을 프로그래밍하는 것으로 알고 있고 그렇게 합니다.
}

function myClass()
{
    // 그러나, this라는 키워드가 있습니다. 그리고 this라는 키워드에 임의의 변수를 새로 정의하는 것이 가능합니다.
    this.something = ‘Hello World!’;
}

function myClass()
{
    // 한걸음 더 나아가서, something의 내용을 브라우저의 메시지 박스로 띄워주는 함수도 만들어볼까요?
    this.something = ‘Hello World!’;
    this.showSomething = function() {
        alert(this.something);
    }
}

var test = new myClass();
test.showSomething();

위의 연속된 박스들을 보면서 몇 가지 특징을 한꺼번에 설명해보겠습니다.


우선 myClass라는 함수이자 클래스는 보통의 함수로 사용되면 의미가 없습니다. 반드시 new 연산자에 의해 생성될 필요가 있습니다. 이 때, myClass 안에 들어있는 선언부 외의 모든 일반적인 코드들은 myClass의 생성자와 같은 일을 합니다.


그리고 따로 선언한 적이 없는 변수나 함수가 this 키워드에 이름을 지정하는 것 만으로 생성이 되는 것을 알 수 있는데, 이렇게 생성된 변수나 함수 모두 액세스 한정자가 public인 멤버로 볼 수 있습니다. 만약 로컬 변수를 사용하고 싶어서 var 키워드를 써서 변수를 정의했다면 로컬 변수로도 취급됩니다. var 키워드의 경우 브라우저의 해석 방법에 따라서는 private 액세스 한정자 멤버로 취급될 수 있는것도 같습니다만 정확한 것은 아닙니다.


이와 같이 JavaScript OOP를 이용하여 새로운 형식을 만든다는 것은 어려울 것이 없는 단순명료한 작업입니다. 여기에 기존의 브라우저들이 제공해왔던 다양한 형태의 API와 XMLHttpRequest와 같은 서비스를 결합시킨다면 유용할 것입니다. ASP.NET AJAX를 비롯하여 여러 JavaScript 고급 서비스들은 JSON (Java Script Object Notation)을 통하여 직렬화와 역직렬화 서비스를 구현하고 있으며 이를 통하여 클래스에 영속성을 부여하기도 합니다.


JavaScript OOP를 성공적으로 활용하는 사례는 도처에 널려있습니다. ASP.NET AJAX의 XML 웹 서비스 연동 기능, 자바스크립트 객체 영속성을 위한 JSON, 자바스크립트 코드 검증 및 분석 도구인 JSLINT 등이 있습니다.



ASP.NET AJAX를 통하여 새로운 기능을 배우는 것도 좋지만 JavaScript의 OOP 능력도 시험해보고 좀 더 낳은 코드를 제작할 수 있도록 아이디어를 찾아보는 시도 또한 중요할듯 싶습니다.

JavaScript의 OOP가 생소하신가요?”에 대한 2개의 생각

  1. 훌쩍… 트랙백이 안되네요. http://gongdosoft.com/193
    IE7에서는 클래스에서 var로 선언한 변수가 클래스의 멤버로 취급되지 않는 것 같아요.
    Gongdosoft = function() {
    var member=’공공도’;
    }
    Gongdosoft.prototype.func = function() {
    alert(this.member);
    }

    이런식으로는 안되더군요. 그래서 전 private으로 쓸 녀석들은 접두어를 붙여서 쓰고 있어요.
    private문제야 보고도 못본척 할 수 있지만 자동 set/get 처리가 이루어지는 property 구현이 불가능하다는 점이 가장 귀찮은 것 같아요. 🙂

    • 아무래도 시간내서 백업한 다음에 다시 태터툴즈 정판으로 옮겨야 겠습니다. 문제가 많네요. -_-;;

      개인적으로 JavaScript의 언어 사양에서 많이 아쉬움이 남는 부분이 공도님께서 말씀해 주신 private 멤버와 getter/setter Property쪽입니다. 이런 사양들은 JScript .NET 같은 확장 기술을 통해서만 가능하다는게 많이 아쉽네요.

      혹시 나중에 나올 IE 8.0이나 지금 개발 중인 Firefox 3.0이라면 ECMA JavaScript 최신 표준을 확장할 수도 있지 않을까 하는 기대도 살짝 해봅니다.

댓글 남기기