Prototype

자바스크립트의 모든 Object(객체)는 자신의 부모 역할을 하는 개체와 연결되어있다. 그리고 이는 마치 객체지향의 상속 개념과 같이 부모 객체의 프로퍼티를 자신의 것처럼 쓸 수 있는 특징이 있다. 이렇게 자바스크립트에서 객체간의 상속 관계를 나타낸 것을 Prototype(프로토타입) 이라고 한다.

주요 동작 방식

프로토타입의 주요 특징과 동작 방식에 대해 알아보자.

• __proto__ 프로퍼티
  모든 객체는 __proto__라는 내부 프로퍼티를 가지고 있다. 이 프로퍼티는 해당 객체의 프로토타입을 가리킨다.

• prototype 프로퍼티
  function(함수)는 prototype이라는 프로퍼티를 가진다. 이 프로퍼티에는 새로운 객체 인스턴스를 생성할 때 해당 객체의 프로토타입이 될 객체가 저장된다.

• 프로토타입 체인
  객체의 프로토타입은 체인 형태로 연결된다. 객체에서 어떤 프로퍼티나 메서드를 찾을 때 해당 객체에 없으면 __proto__를 따라 상위 프로토타입으로 이동하여 찾는다. 이 과정이 계속되며 최상위 프로토타입에 도달할 때까지 진행된다.

• constructor 프로퍼티
  프로토타입 객체는 일반적으로 constructor(생성자)라는 프로퍼티를 가진다. 이 프로퍼티는 해당 프로토타입을 만든 함수를 가리킨다.

• 함수와 프로토타입
  함수를 정의할 때, 그 함수의 prototype 프로퍼티를 이용하여 해당 함수로 생성된 객체들이 공유할 프로퍼티와 메서드를 정의할 수 있다.

예시를 통해 살펴보자.

// 생성자 함수
function Person(name) {
    this.name = name;
}

// 프로토타입에 메서드 추가
Person.prototype.sayHello = function() {
    console.log("Hello, " + this.name + "!");
};

// 객체 생성
var person1 = new Person("John");

// 프로토타입 체인을 통해 메서드 호출
person1.sayHello(); // 출력: Hello, John!

이 예제에서 Person 함수가 객체를 생성하면, 그 객체는 Person.prototype을 프로토타입으로 가지게 됩니다. 따라서 person1 객체는 sayHello 메서드에 접근할 수 있다. 이와 같은 방식으로 프로토타입을 사용하면 코드를 더 효율적으로 관리하고 재사용할 수 있다.

ECMAScript 명세서에서는 자바스크립트의 모든 객체는 자신의 프로토타입을 가리키는 [[prototype]]라는 숨겨진 프로퍼티를 가진다고 설명한다. 크롬에서는 __proto__ 가 이러한 프로토타입을 의미한다. 즉 person1 객체는 자신의 부모 객체를 __proto__ 라는 내부 프로퍼티로 연결하고 있는 것이다.