자바스크립트 문법 (12) 객체의 상속(프로토타입 체인)

(12) 객체의 상속(프로토타입 체인) 

자바스크립트의 꽃이 '함수'라면, 객체의 계승은 '열매'와 같다. 꽃은 열매를 위해 존재한다. 결국 유전자를 퍼뜨리고 생명을 이어가는 것은 열매 속의 씨앗이다. 생성한 객체를 계속 사용할 경우 메모리 낭비가 심하다. 이를 위해서 프로토타입의 인스턴스를 만들고, 이를 상속할 방법이 필요하다. class가 필요한 이유다. 

계승(클레스 상속개념)이 없었다면 객체지향 언어가 이렇게 발전하지 못했을 것이다. 다소 비약한다면, 4차 산업혁명이나 IT산업의 성장은 계승이라는 성격에 비롯된 것이라 말할 수도 있다.  

계승이란?

객체(클래스)의 기능을 상속받아서 새로운 클래스를 정의하는 기능이 '계승'이다. 마치 유전자가 DNA정보를 자식대에 전달하는 것과 같다. 계승을 잘 이용하면 '중복'이 사라지고, 깔끔하고 효율적인 프로그램을 만들 수 있다. 계승에 있어 시작점이 된 클래스를 '슈퍼 클래스(base class)'라 하고, 계승된 클래스를 '서브 클래스(상속)'라 한다.

1 『프로토타입 체인』

예제부터 살펴보자.

---

[예제]

var Car = function( ) { }     

Car.prototype = { 

start : function( ) {

console.log('부릉');

}

} 

var Avante = function( ){

Car.call( this );

}

Avante.prototype = new Car( );

Avante.prototype.stop = function( ){

console.log('끼이익');

}

var Accent = new Avante( );

Accent.start( );   // 결과: '부릉'

Accent.stop( );   // 결과: '끼이익'

---

먼저, Car( )라는 프로토타입 객체를 만들고, start( )메소드를 넣는다. 그리고 Avante 프로토타입 객체를 생성한다. 여기서 핵심은 Avante.prototype = new Car( ) 부분이다. 위의 코드에서는 생성한 프로토타입을 Car( ) 인스턴스로 만들었다.

Avante.prototype = new Car( )를 통해 Avante는 생성자가 되었다. 이어서 Accent 변수를 생성하고, Avante( )를 상속받는다. Accent는 Avante를 통해 Car( )를 계승받았다. 프로토타입 체인의 개념을 좀더 심화시킨 예제를 살펴보자.

---

var Car = function( ){ };

Car.prototype = {

         start:function( ){

                       console.log('부릉');

                            }

                     }

var Avante = function( ){  };

     Avante.prototype = new Car( );

     Avante.prototype.stop = function( ){

                                 console.log('끼이익');

                                }

var i30 = new Avante( );

i30.stop = function( ){

                           console.log('촤아악');

              }

var i40 = new Avante( );

i30.start( );     // 결과 : '부릉'

i30.stop( );     // 결과 : '촤아악'

i40.stop( );     // 결과 : '끼이익'

i40.start( );     // 결과 : '부릉'

---

위의 예제를 자세히 분석하면, 프로토타입 체인을 확실히 이해할 수 있는 코드다. i30와 i40는 Avante를 계승받아서 각자 자신만의 인스턴스를 생성했다. 따라서 i30와 i40에 메소드를 할당할 수 있다.

i30.stop = function( ) {   ...   }

반면, 계승해주는 입장이 된 Avante는 prototype을 통해서만 메소드를 넣을 수 있다. 또, 원본이기 때문에 자신만의 공간이 생기지 않는다. Avante를 계승받은 i40는 start( )와 stop( ) 매소드를 Avante 내의 메소드로 이용한다. 반대로 i30는 자체 stop( ) 메소드를 할당했다. (인스턴스이기 때문에)

2 『연습』

---

var Car = function( ){  };

     Car.prototype = {

               start:function( ){

               console.log('부르릉');

          },

         stop:function( ){

         console.log('끼이익');

          }

     }

// Car 프로토타입을 계승한 클래스별 자동차 엔진 모델 생성(Car 계승)

var C_class_engine = function( ){ };

    C_class_engine.prototype = new Car( );

    C_class_engine.prototype.torque = '34kg';

    C_class_engine.prototype.H_power = '215MP';

    C_class_engine.prototype.Max_Speed = '240km';

    C_class_engine.prototype.start_sound = function( ){

    alert('C 사운드');

}

var E_class_engine = function( ){ };

      E_class_engine.prototype = new Car( );

      E_class_engine.torque = '43kg';

      E_class_engine.H_power = '320MP';

      E_class_engine.Max_Speed = '260km';

      E_class_engine.start_sound = function( ){

      alert('E 사운드');

}

var S_class_engine = function( ){ };

     S_class_engine.prototype = new Car( );

     S_class_engine.torque = '51kg';

     S_class_engine.H_power = '450MP';

     S_class_engine.Max_Speed = '280km';

     S_class_engine.start_sound = function( ){

     alert('S 사운드');

}

// 자동차 모델별 클래스 상속

var cls220 = new C_class_engine( );

var e220d = new E_class_engine( );

var s350d = new S_class_engine( );

cls220.start_sound( );

console.log(cls220.torque);

cls220.stop_sound = (function( ){

alert('C 정지 사운드');

})( );

---

Car( )프로토타입을 각 C,E,S 클래스 엔진에 계승을 한다. 이후 c클래스, e클래스, s클래스의 세부모델 차량들의 특징을 C,E,S클래스 엔진(Car( )로부터 계승)으로부터 상속받는다.

상속받은 cls220모델은 prototype없이 프로퍼티를 넣어 인스턴스화 한 이후에 사용한다.