[Script] JavaScript Prototype 과 상속 제대로 이해하기

<References>

http://run2you.tistory.com/12

http://run2you.tistory.com/13

http://dev.naver.com/tech/ajaxui/ajaxui_3.php#a_3_1

http://blog.naver.com/jjoommnn/130125787219

 

JavaScript( 이하 JS )는 class 의 개념이 없고, class 개념은 function 으로 대체된다. Java 와 같은 classical OOP 는 아니지만 상속을 이용할 수 있다. 

var Drama = function( name ){
   this.name = name;

   this.getName() = function(){
      return this.name;
   }
} 

var goldenTimes = new Drama( '골든 타임즈' );
alert(  goldenTimes.getName() );

var whiteTower =  new Drama( '하얀 거탑' );
alert( whiteTower.getName() ); 

이렇게 정의할 경우, getName() 함수는 각 instance마다 할당되기 때문에 쓸데없이 메모리를 사용하는 꼴이 된다. 이런 동일한 역할을 하는 함수를 class에 function에 정의할 필요가 없다. 제대로 된 class 정의를 고려한다면 prototype 을 사용해야 한다.

var Drama = function( name ){
   this.name = name;
} 

Drama.prototype.getName = function(){
   return this.name;
} 

Prototype 을 이용한 상속을 사용하는 것은 prototype 의 기본특성을 이용하는 것으로, 특정 property에 접근을 할 때 instance 자체에 property가 없을 경우, prototype으로 명시된 instance 를 쫓아가며 property를 검색하여 access 하는 방식을 이용한 것이다. 이 prototype 은 기본적으로 constructor 라는 생성자를 가진다. 

제대로 된 상속은 prototype 의 constructor 를 이용해야 한다. 다음 예제와 다이어그램 한방이면 prototype 을 이용한 상속에 대한 이해가 직빵이다.

function Duck = function( weight ){
   this.weight = weight;
}
 
Duck.prototype = {
   swim : function(){
      alert( "swim!!" );
   }
}

var RedDuck = function(){
   Duck.apply( this, arguments );
}
RedDuck.prototype = new Duck(); 
RedDuck.prototype.constructor = RedDuck;

var MallardDuck = function(){
   Duck.apply( this, arguments );
}
MallardDuck.prototype = new Duck(); 
MallardDuck.prototype.constructor =  MallardDuck; 

이미지 출처 : http://dev.naver.com/tech/ajaxui/ajaxui_3.php#a_3_1

도움이 되셨다면 손가락 꾸욱~ ( 로그인 필요 x )