[JavaScript] 프로토타입

프로토타입

JavaScript는 프로토타입 기반 언어이다. JavaScript에서 프로토타입은 객체를 상속하기 위해 사용한다.

프로토타입은 인스턴스를 만들 때 쓰는 원형 객체(original form)이다.

JavaScript는 모든 객체들이 메서드와 속성을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메서드와 속성을 상속 받을 수 있고 그 상위 프로토타입 객체도 마찬가지이다. 이를 프로토타입 체인이라 부르며, 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이다.

상속되는 속성과 메서드는 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다.

JavaScript에서는 인스턴스 객체와 프로토타입 간의 연결이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메서드를 탐색한다.

생성자 속성

모든 생성자 함수는 constructor 속성을 지닌 객체를 프로토타입 객체로 가지고 있다. 이 constructor 속성은 원본 생성자 함수 자신을 가리킨다.

.__proto__

__proto__의 사용은 권장하지 않는다. 아직 몇몇 브라우저는 __proto__를 지원하지만, 웹 표준에서는 이미 제거되었다.

Object.prototype의 __proto__ 속성은 접근하고자 하는 객체의 내부 속성인 [[prototype]]을 노출하는 접근자 속성(getter 및 setter 함수)이다. 즉 인스턴스는 __proto__ 속성을 통해 자신의 프로토타입을 가리킨다. 예를 들어 Human이라는 클래스 생성자를 선언하고 steve라는 인스턴스를 생성했을 때, steve.__proto__ === Human.prototype이다. 이때, Human.prototype.__proto__ === Object.prototype인데, Human 클래스의 프로토타입은 자바스크립트의 객체의 인스턴스이기 때문이다.

.__proto__는 표준 방법이 아니다. 원래 특정 객체의 프로토타입 객체에 바로 접근하는 공식적인 방법이 없어서 몇몇 브라우저가 제공한 .__proto__를 이용했었다. ECMASciprt 2015부터는 Object.getPrototypeOf(obj) 메서드가 추가되어 바로 인스턴스의 프로토타입 객체에 접근할 수 있게 되었다.

클래스, 인스턴스, 프로토타입의 관계

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

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

let steve = new Human('steve', 30);

Human.prototype.constructor === Human; // true
Human.prototype === steve.__proto__; // true
Human.prototype.sleep === steve.sleep; // true

Object.prototype === Human.prototype.__proto__ ; // true

클래스 Human과 인스턴스 steve, 프로토타입의 관계
(출처: 코드스테이츠 유어클래스)

프로토타입 체이닝

메서드 또는 속성을 호출하면, 프로토타입 체이닝을 통해 그 메서드 또는 속성을 찾게 된다. 먼저 인스턴스(steve)에서 찾고, 없으면 인스턴스의 프로토타입 객체(Human.prototype)에서 다시 찾는다. 그곳에도 없다면 프로토타입 객체(Human.prototype)의 프로토타입 객체(Object.prototype)에서 메서드 또는 속성을 찾는다. 이처럼 상위 프로토타입 객체로 올라가며 메서드 또는 속성을 찾는 것을 프로토타입 체이닝이라 한다.

참고문헌

• 코드스테이츠 유어클래스
• MDN - Object prototypes
• MDN - Object.prototype.__proto__