🧐 Prototype chain이란?
Prototype chain은 _ _ proto _ _를 타고 자신의 프로토타입이 되는 다른 객체를 가르킨다. 그 객체의 프로토타입에 또 프로토타입이 되는 객체를 가르키고 그렇게 반복되어 올라가다보면 null을 프로토타입으로 가지는 오브젝트에서 끝난다. 이런 과정을 Prototype chain이라고 한다.
이렇게 글로만 보면 프로토타입이 프로토타입이 된다는 것이 어떤것인지 한글인데 외계어같이 느껴진다. 아래 이미지를 보자.
우리가 프로그래밍을 하다보면 Object가 아닌 Array나 String을 구현하는 과정에서 Object의 prototype의 메소드를 사용했던 경험을 쉽게 경험한다. 하지만 Object에서는 Array의 prototype의 메소드인 map, filter 등을 사용할 수 없어서 다른 방법을 찾아서 구현했다. 이것도 알고보니 Prototype chain의 일부였다. 이처럼 모든 객체는 Object를 상속받는다.
이처럼 다른 prototype들은 Object.prototype의 메소드를 사용할 수 있지만 Object는 공유받는 메소드가 없다. 그래서 Object에서만 가용가능한 함수를 생성자함수에 따로 지정되어 있다. 예를 들면 아래에 나오는 create를 포함해서 freeze, assign, keys등이 있다.
Object.create()란?
첫번째 인자로 들어가는 prototype 객체를 바탕으로 prototype을 만든다.
예를들어 Human생성자에 sleep의 메소드를 새로운 생성자인 Student에서 사용하고 싶은 경우에 이용한다. Object.create(Human.prototype)으로 입력해서 Student.prototype에 Human.prototype을 복사해서 Student에서 사용가능하도록 해준다.
하지만 큰 단점이 있다. 이렇게 Object.create를 이용한 경우 Student.prototype이 constructor와 연결이 끊어지게 된다. 이 경우 Student.prototype.constructor를 Student를 재할당해서 연결을 재확인해야한다.
ES6 class 키워드 및 super 키워드
prototype chain의 단점을 보안하기 위해 class키워드가 나왔다. 작성되는 코드의 양이 줄고 constructor을 재연결하는 과정도 불필요해졌다.
class를 선언하고 내부에 construtor를 작성한다. Student와 Human을 연결은 extends를 이용해서 간단하게 prototype chain을 연결하고 Student와 Human의 constructor가 동인한 경우 Student에서 생략이 가능하고 Human의 this를 연결하는 과정은 super키워드로 간단하게 만들 수 있다.
마무리하며...
이해하는 시간이 많이 필요했지만 그래도 단어나 과정을 상세하게 나누어서 생각하고 다시 정리하면서 공부를 하니 이해를 했다. 아직 다른 이에게 설명을 해줄 수 있다고 확신할 수 없으니 저녁을 먹고 다시 공부를 하고 코드를 직접 입력하면서 이 과정을 직접 구현해보면서 익히는 시간을 가져야겠다.
