[프론트엔드] 프로토타입 상속의 동작 방식

프로토타입

: 자바스크립트에서 객체 간의 상속을 구현하는 메커니즘이다.

 

자바스크립트의 모든 객체는 기본적으로 [[Prototype]]이라는 숨김 프로퍼티를 가지고 있으며, 이 프로퍼티는 다른 객체를 참조하거나 null 값을 가집니다. 프로토타입 연결은 Object.create()나 함수 생성자의 prototype 프로퍼티를 통해 이루어진다.

 

-> 왜 프로토타입 상속이 필요할까?

개발을 하다 보면 기존에 있는 기능을 가져와 확장해야 하는 경우가 생긴다.

사람에 관한 프로퍼티와 메서드를 가진 user라는 객체가 있는데, user와 상당히 유사하지만 약간의 차이가 있는 admin과 guest 객체를 만들어야 한다고 가정했을 때

"user의 메서드를 복사하거나 다시 구현하지 않고 user에 약간의 기능을 얹어 admin과 guest 객체를 만들 수 있지 않을까?"라는 생각이 든다.

자바스크립트 언어의 고유 기능인 프로토타입 상속(prototypal inheritance) 을 이용하면 위와 같은 생각을 실현할 수 있다.

https://ko.javascript.info/prototype-inheritance

프로토타입 상속이 동작하는 방식은 프로토타입 체인을 기반으로 한다.

객체에서 어떤 프로퍼티를 접근하려고 할 때, 자바스크립트 엔진은 해당 객체에서 프로퍼티를 찾는다. 그리고 만약 찾을 수 없다면, 객체의 [[Prototype]]이 가리키는 프로토타입 객체에서 프로퍼티를 탐색한다. 만약 프로토타입 객체에서도 해당 프로퍼티를 찾지 못하면, 그 다음에는 프로토타입의 프로토타입을 탐색한다. 탐색 과정을 계속 반복하면서 결국 원하는 프로퍼티를 찾거나, 프로토타입이 null이 되는 단계에 도달할 때까지 프로토타입 체인을 타고 올라가는 방식으로 탐색한다. 이런 식으로 프로토타입이 꼬리에 꼬리를 물고 연결된 형태를 두고 프로토타입 체인이라고 부른다.

 

시간이 너무 오래 걸리지 않을까?, 비효율적인거 같은데,,

그래서 검색해보니 ES6의 class를 사용한 상속이 있음을 알게되었다.

 

추가로 알아보기

https://east-star.tistory.com/12

ES6 클래스 상속 이해하기