[코드스테이츠 44기 프론트엔드 블로깅] 프로토타입 체인에 대해

어제 프로토타입에 대해 공부했었다. 오늘 공부한 프로토타입 체인을 우리가 자주 사용하는 배열을 예로 설명해보겠다. 

 

프로토타입은 객체의 원형으라고 했다. 그래서 우리가 배열을 생성할 때 let arr = [] 이런식으로 배열을 생성해도 내부적으로는 new Array() 같이 생성자 함수로 선언되었다는 것을 알 수 있었다. 이렇게 생성된 인스턴스 arr 은 생성자 함수에게서 메소드를 상속받는다. 

arr 배열 객체의 원형은 Array 임을 알 수 있다. 

 

그럼 객체는 프로퍼티일까 ?

정확히는 아니라고 할 수 있다. 함수 객체가 가지는 프로토타입이라는 특수한 형태의 객체 프로퍼티를 통해 상속받는 것이다 ! 

따라서 Array.prototype 객체를 살펴보면 배열에서 사용한 메소드들을 찾아볼 수 있는 것이다. 

 

Arrray.prototype

Array 로 생성한 모든 배열 인스턴스는 해당 프로토타입에 있는 데이터, 메소드를 사용할 수 있다. 

Array.prototype 을 통해 새롭게 데이터를 만들 수도 있지만 이는 기존에 있는 메소드를 오염시킬 수 있고 이는 프로토타입 체인을 망가트릴 수있기 때문에 권장하지않는다.  

 

간단하게 prototype 과 __proto__ 를 설명해보자면 prototype 은 함수 객체만 가지고 있으며 생성자를 가지는 원형으로 선언가능하고  __proto__ 는 나의 원형을 가리키고 모든 객체가 가지고 있으며 하나의 링크라고 할 수 있다. 

 

프로토타입 체인

인스턴스 객체의 key에 접근 시 해당 객체에 key 가 없다면 그 다음으로 상위 프로토타입 속성에서 key 가 있는지 확인한다. 없다면 그것을 찾기 위해 더 상위의 프로토타입( 부모 ) 에서 찾는다. 이를 우리는 프로토타입 체인이라고 한다. 

그렇다면 Array 의 원형은 무엇일까 ? 바로 Object 이다. 

우선 Array 는 함수이고 함수는 객체이다. 함수 객체만 prototype 프로퍼티를 가질 수 있고 인스턴스 생성이 가능하다. 

 

상속 관점에서 자바스크립트의 유일한 생성자는 객체뿐이다. 각각의 객체는 [[Prototype]] 이라는 은닉 속성을 가지는데 자신의 프로토타입이 되는 다른 객체를 가리킨다. 그 객체의 프로토타입 또한 프로토타입을 가지고 있어 이것이 반복되다가 최상위로 가면 null 을 프로토타입으로 가지는 Object 에서 끝난다. null 은 더이상의 프로토타입이 없다고 정의되며 프로토타입 체인의 종점 역할을 한다. 

 

DOM 과 프로토타입

브라우저에서 DOM 을 이용하면 새로운 div 엘리먼트를 만들 수 있다. 

document.createElement('div')

이렇게 생성된 div 엘리먼트는 HTMLDivElement 라는 클래스의 인스턴스가 된다. 

 

DOM 엘리먼트는 예를 들어 innerHTML 과 같은 속성 , 또는 append() 와 같은 메서드가 있다. 

각각의 엘리먼트가 해당 메서드나 속성이 있다는 것을 통해 Element 라는 공통의 부모가 있음을 알 수 있다. 

HTMLDivElement -> HTMLElement -> Element-> Node -> EventTarget  ( 자식 -> 부모 ) 

화살표 방향은 부모를 가리킨다. EventTarget 의 부모로는 모든 클래스의 조상인 Object 가 존재한다. 

 

인스턴스의 __proto__ 를 이용하면 더 확실하게 확인 할 수 있다. __protp__ 를 이용하면 부모 클래스의 프로토타입 , 혹은 부모의 부모 클래스 ,, 부모의 부모의 부모 클래스 ... 등 프로토타입을 탐색할 수 있다. 이는 프로토타입 체인때문에 가능한 것이다. 

 

오늘은 이렇게 프로토타입 체인에 대해 공부해봤다. 

 

사실 이부분은 처음 공부해본 부분이었기 때문에 더 심화적인 학습이 필요할 것 같다. 

다음 포스트는 자바스크립트 상속에 관한 예제로 작성해보겠다 ! 

 

오늘도 열공