D-23

🔍 프로토타입 체인이란?

객체 지향 프로래밍 특성 중 상속을 구현할 때 프로토타입 체인을 사용한다.
어제 OOP 상속에서 살펴본 예시를 가져왔다.

class = Human
properties = name, sex, age
methods = sleep(), eat()

↓↓ 상속 ↓↓

class = Student
properties = name, sex, age, learning subject
methods = sleep(), eat(), learn()

이처럼 Student는 Human의 특징을 그대로 물려받는다. 이렇게 속성과 메서드를 물려주는 클래스를 부모 클래스(예시 Human) 물려받는 클래스를 자식클래스(예시 Student)라 하며
이 과정을 상속이라 한다.

---

🔍 DOM과 프로토타입

브라우저에서 DOM을 이용하면, 새로운 div엘리먼트를 만들 수 있다.
이렇게 만든 div엘리먼트는 HTMLDivElement 클래스의 인스턴스이다.

HTMLDivElement -> HTMLElement -> Element -> Node -> EventTarget
화살표 방향으로 부모를 가리킨다.

아래 __proto__를 이용해 div 엘리먼트의 상속 관계를 확인해보자.

__proto__를 이용하면 부모 클래스의 프로토타입, 혹은 '부모의 부모 클래스'의 프로토타입을 탐색할 수 있다.

이렇게 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 프로토타입 체인이다.

---

🔍 프로토타입 체이닝

이 사진 내용을 코드로 확인하자.

let kimcoding = new Human("김코딩", 20) = 김코딩 인스턴스 생성
kimcoding.name .age = 속성들은 바로확인이 가능하다.
kinmcoding.sleep(); ->프로토타입 체이닝으로 찾을 수 있다.

---

🔍 Object()

Object()는 생성자 함수이다.
함수 객체인 Object()는 prototype 프로퍼티가 있다.
이는 함수 개체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체이다.

let Person = {
  firstName: "Jeong",
  age: 26,
};

console.log(Person.__proto__ === Object.prototype); // true
console.log(Object.prototype.constructor === Object); // true
console.log(Object.__proto__ === Function.prototype); // true
console.log(Function.prototype.__proto__ === Object.prototype); // true

생성된 객체의 proto 프로퍼티는 자신의 부모역할을 하는 객체(프로토타입 객체)를 가리킨다.