__proto__ : 프로토타입

자바스크립트에서 모든 객체는 프로토타입(prototype)이라는 객체를 가진다.

프로토타입은 해당 객체가 가지는 속성과 메서드를 정의하고, 모든 객체는 자신의 프로토타입을 상속받아서 해당 프로토타입이 가지는 속성과 메서드를 사용할 수 있다. 이를 프로토타입 상속(prototype inheritance)이라고 한다.

 

이러한 프로토타입 상속은 프로토타입 체인(prototype chain)이라는 연결고리를 통해 이뤄진다.

프로토타입 체인은 클래스에서 생성된 객체가 상위 프로토타입의 상속을 탐색하는 연결고리를 말한다.

더 정확하게 프로토타입 체인은 프로토타입이 가지는 속성과 메서드를 사용할 수 있도록 프로토타입 객체의 연결된 체인을 순차적으로 탐색하는 과정이다. 이 과정에서 객체가 원하는 속성이나 메서드를 찾을 때까지 체인을 탐색하고, 만약 해당 속성이나 메서드를 찾지 못하면, undefined를 반환한다.

 

인스턴스와 클래스, 프로토타입

1. 인스턴스 : 생성된 단위 객체
2. 클래스 : 객체를 생성하는 청사진
3. 프로토타입 : 클래스에서 정의된 속성과 메서드를 갖고 있다. 굳이 절차적 순서로 따진다면, 구체적인 객체가 생성되기 전에 생성되며 향후 단위 객체가 생성될 때 이 프로토타입의 속성과 메서드를 참조하게 된다. 만약, 프로토타입에서 속성과 메서드를 찾지 못한다면 undefined를 반환한다.

코드에서 살펴볼 수 있는 구체적인 과정은 다음과 같다.

// 1. 클래스(class)를 정의한다.
class Person {
  // 2. 클래스의 생성자(constructor) 함수를 정의한다.
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // 3. 클래스의 메서드를 정의한다.
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

// 4. 클래스를 이용하여 객체(인스턴스)를 생성한다.
// john은 Person 클래스의 인스턴스. 
// 생성자 함수에 전달된 인자("John", 30)를 이용하여 john 객체를 초기화할 때
// John 객체는 Person.prototype 객체를 상속받아서 해당 프로토타입이 가지는 속성과 메서드를 사용할 수 있게 된다.
const john = new Person("John", 30);

 

프로토타입과 DOM

DOM(Document Object Model)은 HTML 문서를 객체 모델로 변환한 것이다.

HTML 문서에서 각 태그들은 해당하는 객체로 변환되는데, 이 객체들은 프로토타입 체인을 이용하여 다른 객체의 속성과 메서드를 상속받는다. 즉, 여러 JS DOM의 메서드는 사실 그 자체의 메서드도 있겠으나, 브라우저 혹은 HTML 메서드를 상속 및 활용하는 경우도 많다는 것이다.

 

예를 들어, HtmlDivElement는 HTMLElement를 상속받으며, HTMLElement는 Element를 상속받고. Element는 Node를 상속받으며, Node는 EventTarget를 상속받는다. 따라서 HtmlDivElement에서 사용할 수 있는 메서드들은 HTMLElement, Element, Node, EventTarget 등의 프로토타입에서 정의되게 된다.

 

구체적인 코드는 다음과 같다.

const div = document.createElement("div");
console.log(div);

// HtmlDivElement의 프로토타입 체인을 출력
console.log(Object.getPrototypeOf(div)); // HTMLElement
console.log(Object.getPrototypeOf(Object.getPrototypeOf(div))); // Element
console.log(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(div)))); // Node
console.log(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(div)))) // EventTarget