프로토타입

프로토타입이란?

자바스크립트는 프로토타입 기반 언어입니다.

클래스 기반의 언어에 있는 상속과 다르게 객체 하나를 원형(prototype)으로 삼아 이를 복제하는 방식으로 상속을 흉내냅니다.

  *복제한 객체를 다시 복제해서 사용할 수 있습니다.

이처럼, 상속되는 정보를 제공하는 객체를 ‘프로토타입’이라고 합니다.

프로토타입의 사용

어떤 생성자 함수를 new 키워드와 함께 호출하면 생성자(부모)에서 정의된 내용을 바탕으로 새로운 인스턴스(자녀)가 생성됩니다.

function parent(name, age){
  this._name = name;
  this._age = age;
}
var child = new parent('Kim', 15);
// parent에서 정의된 내용을 child가 그대로 쓸 수 있음
console.log(child._name); // Kim
console.log(child._age); // 15

 

인스턴스가 생성될 때 __proto__라는 프로퍼티가 자동으로 부여됩니다.
이는 생성자의 prototype이라는 프로퍼티를 참조합니다.

  *parent.prototype === child.__proto__입니다.

function parent(name) {
  this._name = name;
}
// 생성자 프로토타입에 메소드를 추가해 보겠습니다.
// 생성자 내에서 this._getName = function () {...}과 달리 prototype에 저장됩니다.
parent.prototype.getName = function () {
  return this._name;
};
var child = new parent("Kim");
// getName 함수는 parent의 prototype에 들어있기 때문에
// child.__proto__.getName으로 호출해야 맞지만, 생략이 가능합니다.
console.log(child.getName()); // Kim

 

prototype 객체 내부의 constructor 프로퍼티

• 생성자 함수의 prototype 객체에는 constructor라는 자기 자신을 참조하는 프로퍼티가 있습니다.
• 이것은 인스턴스와의 관계를 나타내기 위한 정보입니다.
  *즉 인스턴스의 원형을 알 수 있습니다.

const array = [1, 2];
// Array 자기 자신을 참조함을 확인합니다.
Array.prototype.constructor === Array; // true
// array의 부모는 Array라는 것을 확인합니다.
array.__proto__.constructor === Array; // true
// __proto__는 생략 가능합니다.
array.constructor === Array; // true

// new Array()를 이렇게도 표현할 수 있겠군요.
const array2 = new array.constructor(3, 4);
console.log(array2); // [3, 4]

 

 

 

 

 

 

 

 

 

 

[참고자료]

[시리즈 - 코어 자바스크립트] 자바스크립트 프로토타입