[자바스크립트] 함수의 prototype 프로퍼티

 

함수의 prototype 프로퍼티

let animal = {
  eats: true
};

function Rabbit(name) {
  this.name = name;
}

Rabbit.prototype = animal;

let rabbit = new Rabbit("White Rabbit"); //  rabbit.__proto__ == animal

alert( rabbit.eats ); // true

• Rabbit.prototype = animal은 "new Rabbit을 호출해 만든 새로운 객체의 [[Prototype]]을 animal로 설정하라."라는 것을 의미한다.

• 가로 화살표는 일반 프로퍼티인 "prototype"을, 세로 화살표는 [[Prototype]]을 나타낸다.
• 세로 화살표는 rabbit이 animal을 상속받았다는 것을 의미한다.

 

 

Object.prototype.constructor

• 인스턴스의 프로토타입을 만든 Object 함수를 참조를 반환한다.
• 이 속성 값은 함수 자체의 참조이다.
• 함수 이름을 포함하는 문자열이 아니라. 그 값은 1, true 및 "test"와 같은 원시(primitive) 값에 대해서만 읽기 전용이다.
• 모든 객체는 자신의 prototype으로부터 constructor 속성을 상속한다.

const o = {};
o.constructor === Object; // true

const o = new Object;
o.constructor === Object; // true

const a = [];
a.constructor === Array; // true

const a = new Array;
a.constructor === Array; // true

const n = new Number(3);
n.constructor === Number; // true

 

 

함수의 prototype 프로퍼티와 constructor 프로퍼티

• 모든 함수는 "prototype" 프로퍼티를 갖는다.
• 기본 프로퍼티인 "prototype"은 constructor 프로퍼티 하나만 있는 객체를 가리키는데, 이 constructor 프로퍼티는 함수 자신을 가리킨다.

function Rabbit() {}
// 기본 prototype:
// Rabbit.prototype = { constructor: Rabbit }

alert( Rabbit.prototype.constructor == Rabbit ); // true

 

• 특별한 조작을 가하지 않았다면 Rabbit을 구현한 객체 모두에서 [[Prototype]]을 거쳐 constructor 프로퍼티를 사용할 수 있다.

function Rabbit() {}
// 기본 prototype:
// Rabbit.prototype = { constructor: Rabbit }

let rabbit = new Rabbit(); // {constructor: Rabbit}을 상속받음

alert(rabbit.constructor == Rabbit); // true (프로토타입을 거쳐 접근함)

 

constructor 프로퍼티를 사용하면 기존에 있던 객체의 constructor를 사용해 새로운 객체를 만들 수 있다.

function Rabbit(name) {
  this.name = name;
  alert(name);
}

let rabbit = new Rabbit("White Rabbit");

let rabbit2 = new rabbit.constructor("Black Rabbit");

// 출력
// White Rabbit
// Black Rabbit

 

 

⚠️자바스크립트는 알맞은 constructor 값을 보장하지 않는다.

• 함수에 기본으로 prototype 값이 설정되긴 하지만 그게 전부이다.
• constructor에 벌어지는 모든 일은 전적으로 개발자에게 달려있다.

 

 

📌 참고

• 모던 JavaScript 튜토리얼
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor