jh.nrtv

JS 객체 지향 프로그래밍- Prototype Chain 본문

javascript

JS 객체 지향 프로그래밍- Prototype Chain

wlgus3 2022. 11. 21. 16:49

프로토타입 체인 

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

 

Object prototypes - Web 개발 학습하기 | MDN

Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 본 문서에서는 프로토타입 체인이 동작하는 방식을 설명하고 이미 존재하는 생성자에 메소드를 추가하기 위해 프

developer.mozilla.org

 -> JavaScript는 흔히 **프로토타입 기반 언어(prototype-based language)**라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 **프로토타입 객체(prototype object)**를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 **프로토타입 체인(prototype chain)**이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다.

 정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있습니다.

JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결(많은 브라우저들이 생성자의 prototype 속성에서 파생된 __proto__ 속성으로 객체 인스턴스에 구현하고 있습니다.)이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색합니다.

 

 

 

프로토타입 체인이란 자바스크립트에서 상위에서 하위 프로토타입으로 메소드와 속성 등을 상속받는 구조를 뜻한다. 

 

 

 

.constructor는  프로토타입을 파생시킨 조상인 클래스를 나타낸다. 

.prototype 은 클래스의 하위 프로토타입을 나타낸다. 

.__proto__는 부모 클래스의 prototype이 뭔지 나타낸다. 

 

다음 이미지는 DOM에서 document.createElement('div')로 새로운 div 엘리먼트를 만든 후 .__proto__를 통해 상위 부모로 접근한 것을 나타낸 것이다. 

EventTarget 의  .__proto__를 조회하면 모든 클래스의 조상인 Object가 존재한다.