안녕하세요 켁큇입니다.

이번글에서는 자바스크립트의 객체지향의 핵심이라고 할수있는 prototype 속성에 대해서 알아볼꼐요.

먼저 클래스를 하나 만들죠.

function myClass(){
    this.name = \"켁큇\";
    this.height = \"177\";
}
전 글에서도 말씀 드렸다시피, 이 클래스에 함수를 할당하는 방법은 블락내에 직접 this.함수명
한후 정의할수 있습니다. 하지만 이번글에서는 다르게 넣어볼께요.

myClass.prototype.myFunction = function(){
    alert(\"뿌우~~\");
}

new myClass().myFunction();

잘 작동하는것을 확인할수 있을거에요.

그럼 이건 어떨까요?

myClass.myFunction2 = function(){
    alert(\"우왕ㅋ굳ㅋ\");
}
new myClass().myFunction2();

해보시면 알겠지만, 작동하지 않습니다. 즉 \"우왕ㅋ굳ㅋ\"이라고 창이 뜨지 않는다는 말이지요.

처음에

function myClass(){
    this.name = \"켁큇\";
    this.height = 177;
}

함으로써 이미 myClass의 정의는 끝나버린 상태입니다.
클래스 정의가  앞에서 끝나버렸기때문에 myFunction2 라는 멤버메서드를 추가할 수 없는것이죠.

그럼 클래스를 정의한후에는 원하는 함수나, 속성 또는 특정객체를 그 클래스의 멤버로 추가할순 없는것일까요?

이때 prototype 이 필요한 것입니다.

myClass.prototype.myFuntion = function(){...}
new myClass().myFunction(); // \"뿌우~~\";
myClass.prototype.weight = 75;
new myClass().weight // 75

이때 우리는 \"myClass 클래스는 myFuntion 메서드,weight 속성을 상속받았다\" 라고 표현합니다.
자바를 해보신분이라면 알겠지만, 상속은 클래스단위로 밖에 할수없습니다. 하지만 자바스크립트에서는 이렇게 함수 단위로도 상속이 가능한거죠.

만약에 myClass에 weight 가 존재하고 있었다면 어땠을까요?

function myClass(){
   ....
   this.weight = 70;
}

myClass.prototype.weight = 75;

alert(new myClass().weight);

과연 어떤값이 출력될까요?
자바를 해보신분이라면 아실겁니다.

바로 70 이 출력됩니다.
\"자식 클래스와 부모클래스에 같은 속성이 존재한다면 자식클래스의 속성을 따른다\"
이 법칙은 자바, c++ 어떤 객체지향 언어에서든 지켜지는것 같네요.

지금 보여드린 코드는 함수,변수 단위로 상속을 한것이죠?
이번에는 클래스 단위로 상속을 해볼께요.

function parentClass(){
   this.name = \"부모\";
   this.age = 45;
   this.job = \"designer\";
}

myClass.prototype = new parentClass();
new myClass().name // \"켁큇\";
new myClass().age //20;
new myClss().job // \"designer\"

여기서 헷갈리는 분들이 있으실듯 한데,

myClass.parentClass 이런식으로 접근은 불가능합니다. parentClass 라는 이름은 뭐가되든 상관없고 단지 parentClass의 멤버들만 상속이 되는거죠. 이것이 자바스크립트에서의 클래스상속입니다.
parentClass 라는 식별자가 필요하다면

myClass.prototype.parentClass = new parentClass();
new myClass().parentClass.job // \"designer\"

이렇게 하시면 되겠죠. 하지만 이코드는 클래스간 상속이라기 보다는 그냥 변수 단위의 상속이라고 보는게 옳습니다.

한가지 중요한 사실이 있습니다.
prototype은 객체를 생성하기 전에 할당해야 한다는것이죠. 어찌보면 당연한 얘기입니다.

자바나 c++ 등의 객체지향 언어를 다뤄보신분이라면 이글이 쉽게 이해가 가실것입니다.
하지만 c 같은 절차지향 언어만을 다뤄오신분께서는 생소하게 느껴지실수 있을텐데요.
어쨌든 전 이 글을 통해 자바스크립트의 객체지향에 대해 조금이나마 알리고 싶었습니다.
저 또한 개념을 정리하는 계기가 되었구요.
앞으로도 자바스크립트에 관한 강좌는 프갤,그리고 제 블로그에 정기적으로 올리도록하겠습니다.
웹 2.0에서 자바스크립트는 선택이 아니라 필수인것. 아시죠?

그럼 다음글에서 뵙죠. 켁큇이었습니다.