코드스테이츠

[JavaScript] - 프로토타입 체인

2023. 3. 16. 10:44
목차
  1. 프로토타입 체인(Prototype Chain)
  2. DOM과 프로토타입

프로토타입 체인(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
  1. 프로토타입 체인(Prototype Chain)
  2. DOM과 프로토타입
'코드스테이츠' 카테고리의 다른 글
  • [Figma] - Figma 클론
  • [Figma] - Figma 개념 / Figma 컴포넌트 구현해보기!
  • [JavaScript Koans]
  • [3주차] 💻🏃‍♂️ - 원시자료형과 참조자료형
형일
형일
코딩일지형일 님의 블로그입니다.
형일
코딩일지
형일
전체
오늘
어제
  • 분류 전체보기 (53)
    • 코드스테이츠 (20)
    • JavaScript (8)
    • React (10)
    • WEB (5)
    • Git (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

최근 댓글

최근 글

hELLO · Designed By 정상우.
형일
[JavaScript] - 프로토타입 체인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.