javascript class 상속

javaacript class를 만들고 상속하는 방법을 책에서 찾았는데 내가 이해한데로 정리한다. 

먼저 javascript의 Object 클래스를 살펴본다. 

자바스크립트에서는 객체를 만들면 객체들은 항상 하나의 prototype을 참조하고 있다. 

이해가 안되도 같이 보쟈. 

자바스크립트 콘솔에서 아래와 같이 Object.prototype이라고 치면 Object의 prototype객체를 return한다. 

그러니까 class가 정의된 순간부터 prototype이라는 변수(property)에 이미 객체를 생성해서 가지고 있는 것이다. 

진짜인지 아닌지 보자. 

property가 상속되는 것을 보기 위해 sum이라는 함수를 하나 추가했다. 

class를 선언하기만 했는데 MyObj클래스의 내부에는 이미 prototype객체가 마련되어 있다. 

그러니까 사실 MyObj.prototype (클래스.prototype)은 클래스 선언시 이미 생성되어 있다. 그리고 추가해준 sum 함수에 대한 것도 알려준다. 

이 객체는 오직 하나만 존재하며 MyObj클래스의 인스턴스를 생성할 때마다 모든 객체가 이 prototype 객체를 똑같이 가리키기 때문에 이 부분을 static 영역처럼 사용할 수 있다. (이 내용은 나중에 다뤄야겠다.)

그렇다면 MyObj를 구현했을 때는 저절로 Object를 자동으로 상속했는데, MyObj를 상속받아 MySubObj라는 클래스를 만드려면 어떻게 하면 되는가? 

새로운 클래스의 생성자를 아래와 같이 작성한다. 

function MySubObj(a,b,c,d) { MyObj.call(this,a,b); this.c=c; this.d=d; }

new로 MySubObj를 호출하면 MyObj의 생성자를 호출하고 추가된 c,d를 변수에 추가한다. 

MyObj생성자가 super생성자가 되는 것이다. 

그럼 MySubObj의 prototype을 살펴보자. 

 

실망스럽게도 MyObj을 상속받았다는 증거를 어디서도 볼 수 없다. 당연하겠지만;;; 

prototype에도 아까 추가한 sum함수도 없다. 

하지만 아래와 같이 MyObj객체를 추가해주면 이제 sum property를 상속할 수 있다. 

MySubObj.prototype = new MyObj();

그럼 실제 해보고 살펴보자 

1번은 이전이고 2번은 MySubObj의 property에 MyObj 객체를 할당하고 나서이다. 

보면 __proto__부분에 MyObj의 prototype을 상속하고 있는 것을 볼 수 있다. 

우리가 원하던 sum 함수도 들어와 있고, 내부적으로 다시 Object prototype을 상속하고 있다. 

MySubObj 객체를 생성하고 sum함수를 호출하면 javascript는 MySubObj 클래스에 sum함수가 구현되어 있는지 확인한다. 

우리가 구현하지 않았을 것이므로 그 다음에는 MySubObj.prototype에 선언되어 있는지 확인한다. 여기도 없다면 Object.prototype에 있는지 확인해본다. 

여기서는 MySubObj.prototype에서 찾을 수 있기 때문에 새로운 객체들은 모두 sum함수를 사용할 수 있게되었다. 

하지만 constuctor부분이 좀 이상한다. 

거기 생성자가 우리가 원하는 MySubObj의 생성자가 아니다. MyObj의 생성자를 가지고 있다 그러므로 생성시에 제대로된 MySubObj생성자를 호출 할 수 있도록 변경해 주자 

MySubObj.prototype.constructor = MySubObj;

MySubObj를 constructor에 추가해주고 나니 MySubObj.prototype의 constructor가 올바르게 설정된 것을 볼 수 있다. 

이제 MySubObj 객체를 생성하면 

1. MySubObj 생성자를 호출하고 그 안에서 MyObj를 호출하여 a,b,c,d 변수를 모두 this에 잘 할당될 것이다. 

2. prototype에 설정된대로 sum함수도 실행할 수 있을 것이다. 

끗~!