프로토타입 체인(Prototype Chain)
- 자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근시 객체 자신의 것뿐 아니라 __proto__가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 접근할 수 있다.
- 즉, 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 바로 프로토타입 체인이다.
- 모든 프로토타입 체이닝의 종점은 Object.prototype 이다.
- 하위 객체는 상위 객체의 프로퍼티나 메소드를 상속받는 것이 아니라 공유한다.
- 해당 객체에 없는 프로퍼티나 메소드를 접근할 때 프로토타입 체이닝이 일어난다.
DOM과 프로토타입
브라우저에서 DOM을 이용하면, document.createElement('div')로 새로운 div 엘리먼트를 만들 수 있습니다. 이렇게 생성된 div 엘리먼트는, HTMLDivElement라는 클래스의 인스턴스입니다.
DOM 엘리먼트는 예를 들어 innerHTML과 같은 속성, 또는 append()와 같은 메서드가 있습니다. 각각의 엘리먼트가 해당 메서드나 속성이 있다는 것을 통해, Element라는 공통의 부모가 있음을 알 수 있습니다.

화살표 방향은 부모를 가리킵니다. EventTarget 의 부모로는, 모든 클래스의 조상인 Object 가 존재합니다.
'코드스테이츠' 카테고리의 다른 글
[Figma] - Figma 클론 (0) | 2023.04.17 |
---|---|
[Figma] - Figma 개념 / Figma 컴포넌트 구현해보기! (0) | 2023.04.15 |
[JavaScript Koans] (0) | 2023.03.06 |
[3주차] 💻🏃♂️ - 원시자료형과 참조자료형 (0) | 2023.03.05 |
[2주차] 💻🏃♂️ - Linux/Git 기초 (짝수생성기) (0) | 2023.02.24 |
프로토타입 체인(Prototype Chain)
- 자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근시 객체 자신의 것뿐 아니라 __proto__가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 접근할 수 있다.
- 즉, 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 바로 프로토타입 체인이다.
- 모든 프로토타입 체이닝의 종점은 Object.prototype 이다.
- 하위 객체는 상위 객체의 프로퍼티나 메소드를 상속받는 것이 아니라 공유한다.
- 해당 객체에 없는 프로퍼티나 메소드를 접근할 때 프로토타입 체이닝이 일어난다.
DOM과 프로토타입
브라우저에서 DOM을 이용하면, document.createElement('div')로 새로운 div 엘리먼트를 만들 수 있습니다. 이렇게 생성된 div 엘리먼트는, HTMLDivElement라는 클래스의 인스턴스입니다.
DOM 엘리먼트는 예를 들어 innerHTML과 같은 속성, 또는 append()와 같은 메서드가 있습니다. 각각의 엘리먼트가 해당 메서드나 속성이 있다는 것을 통해, Element라는 공통의 부모가 있음을 알 수 있습니다.

화살표 방향은 부모를 가리킵니다. EventTarget 의 부모로는, 모든 클래스의 조상인 Object 가 존재합니다.
'코드스테이츠' 카테고리의 다른 글
[Figma] - Figma 클론 (0) | 2023.04.17 |
---|---|
[Figma] - Figma 개념 / Figma 컴포넌트 구현해보기! (0) | 2023.04.15 |
[JavaScript Koans] (0) | 2023.03.06 |
[3주차] 💻🏃♂️ - 원시자료형과 참조자료형 (0) | 2023.03.05 |
[2주차] 💻🏃♂️ - Linux/Git 기초 (짝수생성기) (0) | 2023.02.24 |