ES6에 추가된 class문법에 대해 알아본다.

기존에 자바스크립트의 상속 문법들은

 

생성자와 프로토타입을 함께 정의해줄 수 없었다.

 

생성자 함수를 정의하고 프로토타입을 따로 정의하였는데,

 

다시 정리해본다면 방법은...

 

1) 생성자명.prototype.변수 or 함수명 = 변수 or 함수;

   (이 방법은 생성자를 정의한 후 생성자에 prototype을 부여한다.)

 

2) 인스턴스.__proto__ = 상속할 부모 객체;

   (이 방법은 이미 만들어진 인스턴스 객체 또는 그냥 객체에 따로 부모 prototype를 연결한다.)

 

3) const child = Object.create(상속할 부모 객체);

   (방법2와 동일)

 

이런식으로 prototype을 생성자와 별개로 지정해주는 방법뿐이었다.

 

참고로 prototype도 염연한 객체이기때문에,

 

이런식으로 원본 객체를 건드려주면 상속받는 자식 객체들 모두 영향을 받는다.

여기서도 주소값 참조가 이루어지기때문이다.

 

어쨋든 ES6부터는

 

class를 사용해 생성자와 prototype을 함께 구현해줄 수 있다.

 

자바랑 역시 비슷하다.

부모라는 class를 만들고 생성자 함수에 들어가 직접적으로 물려줄 변수나 함수들은,

constructor()안에 넣어주고 this를 붙이면 끝이다.

 

constructor는 생성자라는 뜻이고 function 생성자명() { }; 이런 형식을 가진 생성자 함수와 똑같은 역할을 한다.

 

거기에 직접적으로 물려줘서, 생성된 각 인스턴스 고유의 프로퍼티가 될 변수들은,

역시 인스턴스 고유의 데이터임을 뜻하는 this를 표기해야한다.

 

그리고 prototype으로 빼서 인스턴스들이 참조하게 하고싶은 변수와 함수는

 

그냥 constructor() 밖에 적으면 된다.

 

위 사진에서 constructor() 밖에 있는 함수들은...

 

부모.prototype.sayHi = function(){ ~~~ };

 

로 정의된것과 일치한다. 

 

위 사진에 정의된 부모 class로 생성되는 인스턴스들은 고유의 name과 age를 가지게되고,

 

sayHi와 sayHello라는 함수를 부모 클래스의 prototype에서 빌려쓸 수 있게되는것이다.

 

어렵지않다.