Subclassing - understanding prototype chain (Object.create()의 활용법)

출처 : 코드스테이츠

 

내가 볼려고 기록해놓는 블로그

 

 

이 포스팅은 ES6의 Class가 어떻게 작동하는지 그 원리를 알아보는 포스팅이다.
ES6가 나오기 전에는 이런 방식으로 상속관계를 만들어줬다.
먼저
1. 부모-자식 상속관계에 대해서 자세히 알아보고
2. 이것을 HTML에서 활용하는 방법
3. Object.create()를 활용해 상속관계를 만드는 방법을 알아볼 것이다.

 

1. 부모-자식 상속관계

 

먼저 부모자식 상속관계에 대해서는 이 2장의 슬라이드로 한 눈에 볼 수 있다.

 

즉, Human.prototype 과 steve.__proto__가 같은 것이다.

 

__proto__들은 자신의 부모의 특성을 상속받는다.

 

그런데 모든 객체는 Object 이다!

 

그래서 객체들은 Object의 특성들을 상속받는 것이다.

 

Object의 특성, method들에는

 

바로 요런 것들이 있다.

이거 말고도 훨씬 많다!

 

그래서 steve.toString()을 하면 오류가 뜨지 않는다.

steve는 결국 Object의 자식이기 때문이다.

 

 

 

2. HTML 에서의 부모자식관계

이것을 HTML에서 알아보자.

 

 

 

 

 

3. Object.Create()의 활용법

case1)

만약 1번 객체와 2번 객체를 각각 만들었다. 이 둘은 상속 관계가 아닌 각각의 분리된 객체인데!

이 때 2번 객체에서 1번 객체의 특성을 가지고 오고 싶다면? 

Object.create()를 활용할 수 있다.

Object.create() Object.create() : 첫번째 인자로 들어가는 프로토타입 객체를 바탕으로 프로토타입을 만든다. 즉, 첫번째 인자로 들어가는 prototype을 COPY 하는 것이다.

 

그래서 2번 객체의 prototype에 1번 객체의 prototype을 할당해준다!

2번객체.prototype = Object.create(1번객체.prototype);

 

 

새로운 예시를 콘솔창에서 확인해보자.

 

 

그럼 Object.create()를 활용해서 다시 작성을 해보자!

 

 

---

이 때 주의해야할 점은

Object.create를 해주고 난 후 2번 객체에 메소드를 할당해야 제대로 작동한다는 것

 

미리 Human과 Student의 메소드를 둘 다 할당해놓고 Object.create()를 했더니

Student의 속성이 Human으로 바뀌어 버려서 이유를 찾느라 고생했다ㅜㅜ

---

 

 

 

더 명확하게 OOP를 만들어주기 위해서는

위의 슬라이드 처럼

Human.call(this, name)

으로 this를 할당해주고

 

Student.prototype.constructor = Student;

로 constructor를 설정해줘야 하는데....

개념 이해가 너무 복잡하니

위 코드를 레퍼런스로 따라서 코딩하도록 하자.