[JavaScript] 프로토타입 쉽게 이해하기

서동경·2023년 1월 29일
1
post-thumbnail

🧬 프로토타입(Prototype)이란?

자바스크립트는 클래스 기반 언어가 아닌 프로토타입 기반 언어이다. 프로토타입을 통해 클래스가 없는 언어에서 상속을 구현한다. ES6에서 자바스크립트에도 클래스가 추가됐지만 여전히 프로토타입 언어임은 변함이 없고 클래스도 마찬가지로 프로토타입을 통해 상속을 구현한다.

프로토타입이란 "유전자"라는 뜻으로, 모든 객체에는 [Prototype]이라는 프로토타입 객체가 존재한다. 이 프로토타입 객체는 어떤 객체가 생성될 때 자바스크립트 내부에서 자동으로 생성되는 놈으로, 그냥 1+1 이라고 생각하면 된다. 이 프로토타입 객체에는 자체적으로 프로퍼티, 메서드 등이 정의되어 있기 때문에 우리가 정의한 적도 없는 프로퍼티나 메서드를 사용할 수 있는 것이고, 프로토타입 체인을 통한 상속으로 인해 상위 객체의 프로퍼티나 메서드도 사용할 수 있는 것이다.

🔒 프로토타입 객체 (Prototype Object)

프로토타입 객체에 들어가 있는 것들이다. 자체적으로 내장된 프로피티와 메서드가 들어있는데, constructor__proto__를 주의깊게 봐야한다.

🔑 constuctor

우선 constructor 프로퍼티는, 생성한 객체(프로토타입 객체 말고.)에 존재하는 prototype 프로퍼티와 함께 이해해야한다.

Array 객체를 생성했다고 가정해보자. Array 객체는 prototype이라는 프로퍼티를 통해 Array.prototype 객체를 참조하고, Array.prototype 객체는 constuctor프로퍼티를 통해 Array 객체를 참조한다. 즉 두 객체는 상호 참조한다.

👉여기서 더 이상 궁금해하지말고 "상호 참조하니까 두 객체는 세트다"만 기억하자.

🔑 __proto__

한편 모든 객체는 "프로토타입 링크"라고 불리는 __proto__ 프로퍼티를 가진다. 이 프로파티는 생성된 객체에서 부모 객체로 이어주는 링크 역할을 한다. 여러 부모 객체를 가지고 있더라도 이 링크를 타고 최상위 부모 객체까지 참조할 수 있다.

이번엔 Array 객체를 만들어 arr 변수에 할당했다고 가정하자. __proto__ 프로퍼티는 ‘부모 객체인 Array의 prototype 프로퍼티가 참조하고 있는 곳’을 참조한다. 즉 Array.prototype을 참조한다.

👉얘도 "상위 객체를 참조할 수 있다"를 기억하자.

🔗 프로토타입 체인 (Prototype Chain)

만약 arr에서 부모객체에 있는 어떤 프로퍼티 또는 메서드를 사용하려고 한다면, 일단 __proto__를 통해서 Array.prototype 객체를 찾아본다. 없다? 그럼 상호 참조하고있는 Array 객체에서 찾아본다. 또 없다? 다시 __proto__를 타고 Object.prototype과 Object를 찾아본다. 이런 방식으로 객체간의 연결이 이뤄지고 이것을 "프로토타입 체인"이라고 표현한다. 이 프로토타입 체인은 null 을 프로토타입으로 가지는 Object에서 끝난다. 자식은 부모로부터 상속을 받는 동시에 본인만의 새로운 기능을 추가할 수 있기 때문에 상속 대신 확장이라고 표현하기도 한다.

위 모든 내용들을 사진으로 표현하자면 다음과 같다 !

profile
개발 공부💪🏼

0개의 댓글