프로토타입(prototype)

자바스트립트는 프로토타입 기반의 언어(prototype based language) 이다. 어떤 객체의 프로토타입에서 복제하여 참조함으로써 클래스 기반언어의 상속과 같은 효과를 낸다.

prototype

prototype은 객체이다. 인스턴스의 생성자의 원형 객체를 나타낸다.

function Person(name) {
  this.name = name;
}
Person.prototype.callName = function () {
  return "my name is " + this.name;
};

const julie = new Person("julie");
julie.callName = function () {
  return "call me " + this.name;
};
console.log(julie.callName()); // call me julie
const alice = new Person("alice");
console.log(alice.callName()); // my name is alice

생성자 함수에 직접 callName을 넣어줄 수도 있지만 이렇게 되면 인스턴스가 생성될 때마다 callName 함수도 만들어진다. 경제적인 측면에서 Person의 prototype에 함수를 지정해주면 Person 객체의 프로토타입에 함수가 저장이 되고 그 함수를 참조하여 인스턴스에서 호출이 가능한 것이다. juile의 callName 처럼 오버라이드해서 사용도 가능하다.

__proto__

인스턴스에는 __proto__ 가 부여되는데 이것은 Constructor의 prototype이라는 프로퍼티를 참조한다.

console.log(Person.prototype === julie.__proto__); // true

__proto__를 지원하기는 하나 Object.create(), Object.getPrototypeOf() 사용을 권장한다고 한다. 인스턴스에서는 __proto__ 를 통해서 prototype에 접근하게 되는 것이다. 이때 __proto__는 생략가능하게 설계되어 있으므로 명시적으로 언급하지 않아도 접근하게 된다.

자바스크립트는 프로퍼티에 접근할 때, 1. 객체가 속성값을 가지는지 확인하고, 객체가 속성값이 없다면 2. 생성자의 prototype에서 속성값을 가지는지 확인을 한다. (이 때, 생성자의 prototype에도 속성값이 없다면 계속 거슬러 올라가면서 탐색을 하고 없다면 에러를 출력할 것이다. 자바스크립트에서 거의 모든 객체는 Object의 인스턴스이므로 프로토타입은 거슬러 올라가면 Object.prototype이다.)

예를 들면, 배열의 push(), pop(), filter() 등의 함수도 Array.prototype의 프로퍼티이다. 배열을 선언하고 배열의 각종 메소드를 설정하지 않아도 자신의 메소드처럼 사용이 가능한 것이다.

 

정리

생성자는 prototype을 가진다. 인스턴스는 __proto__가 자동생성되고 이것은 생성자의 prototype을 가리키게 된다. 인스턴스를 통해 값이나 함수를 호출할 때는 자신이 그 속성값을 가지는지 확인하고 없다면, __proto__를 통해 생성자 prototype에서 속성값을 찾는다. 클래스 기반의 객체가 Objects의 자손인 것 처럼 JS에서는 대부분의 객체가 Object.prototype을 원형으로 한 인스턴스들이다. (JS에서는 함수 또한 객체이다.)

참고

생활코딩 prototype,
생활코딩 prototype과 __proto__,
코어자바스트립트(책),
mdn Object.prototype