JavaScipt는 프로토타입 기반 언어

• 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가짐
• 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자(constructor)의 prototype이라는 속성에 정의되어 있음

프로토타입과 클래스

간단한 예제를 통해 살펴보자.

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let dyract = new Human('Dyract', 30);

Human.prototype.constructor === Human; //true, Human 클래스의 생성자 함수는 Human
Human.prototype === dyract.__proto__; //true, Human 클래스의 프로토타입은 Human 클래스의 인스턴스인 dyract의 __proto__
Human.prototype.sleep === kimcoding.sleep; //true
// Human 클래스의 sleep 메서드는 프로토타입에 있으며, Human 클래스의 인스턴스인 dyract에서 dyract.sleep으로 사용할 수 있음

Human이라는 클래스의 생성자(constructor)에 name, age 속성을 정의하고, Human 클래스 안에 sleep() 메서드를 정의해주었다.

이를 기반으로 dyract라는 개별 객체(인스턴스)를 생성했다.

Human 클래스와 인스턴스, 그리고 프로토타입의 관계를 한눈에 보기 쉽게 그림으로 정리하면 다음과 같다.

이를 기반으로 각 용어를 정리하면 다음과 같다.

.constructor	생성자의 속성 중 하나인 객체 초기화 함수, 객체의 생성 시 호출됨
.prototype	생성자의 속성 중 하나로, 자녀가 사용할 수 있는 속성
.proto	생성자의 속성 중 하나로, 부모로부터 가져올 수 있는 속성을 의미
instantiation	특정한 클래스 또는 프로세스에 대하여 인스턴스를 만들어 내는 일

JavaScript 내장 클래스 중 이와 비슷한 예시로는 Object, Array, Date, Number 등이 있다.

이중 Array를 위와 같은 구조도로 나타내보았다. Array에 포함된 .push, .slice, .map 등을 우리가 단순히 배열 선언만을 통해서 사용할 수 있는 것도 이러한 이유이다.

프로토타입 체인

프로토타입은 객체지향의 특성 포스트에서 설명했던 상속(inheritance)의 개념과 유사하다.

상속 개념을 복습하자면 다음과 같다.

프로토타입 객체는 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속받을 수 있고, 그 상위 프로토타입 객체도 마찬가지이다.

이런 방식으로 프로토타입 객체가 상속으로 연결되어 있는 것을 프로토타입 체인이라고 한다.