Prototype

자바스크립트의 모든 객체는 자신의 부모 역활을 하는 객체와 연결되어 있다. 그리고 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용하는 것이 가능하다.  이러한 부모 객체를 Prototype 객체 또는 Prototype 이라고 한다. 

var foo = {
    name : "foo",
    age : 30
};

console.log(foo.toString()); // "[object object]"

foo에는 toString() 메서드가 없으므로 에러가 발생해야 하지만 제대로 출력되고 있다. 그 이유는 foo 객체의 프로토타입에 toString()메서드가 이미 정의되어 있기 때문이다. foo객체를 출력하여 확인 해보면 toString()메서드가 정의되어 있는 것을 확인할 수 있다.

 

ECMAScript 명세서에는 자바스크립트의 모든 객체는 자신의 프로토타입을가리키는 [[Prototype]]라는 숨겨진 프로퍼티를 가진다고 설명한다. 크롬 브라우저의 __proto__가 이 숨겨진 [[Prototype]] 프로퍼티를 의미한다. 

 

객체를 생성할 때  프로토타입은 결정이 되고 다른 임의의 객체로 변경할 수 있다. 이것은 부모 객체인 프로토타입을 변경할 수 있다는 것을 의미한다. 이러한 특징을 활용하여 객체의 상속을 구현할 수 있다. 

 

[[Prototype]] vs Prototype 

 prototype 프로퍼티와 [[Prototype]]은 모두 프로토타입 객체를 가리키지만 관점의 차이가 있다.

 

[[Prototype]]

• 함수를 포함한 모든 객체가 가지고 있다.

• 객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리키며 함수 객체의 경우 Function.prototype를 가리킨다.

prototype 프로퍼티

• 함수 객체만 가지고 있는 프로퍼티이다.
• 함수가 생성자로 사용될 때 이 함수를 통해 생성되는 자식 객체의 부모 역활을 하며 자식 객체의 프로토 타입은 부모 함수의 객체를 가리킨다.

프로토타입 객체는 constructor 프로퍼티를 가지고 이 프로퍼티는 자신을 생성한 객체를 가리킨다. 

function Parent(relation) {
	this.relation = relation;
}

var Nick = new Parent("Son");

// Parent() 생성자 함수에 의해 생성된 객체를 생성한 객체는 Person() 생성자 함수이다.
console.log(Parent.prototype.constructor === Parent); 

// Nick 객체를 생성한 객체는 Parent() 생성자 함수이다.
console.log(Nick.constructor === Parent);

// Parent() 생성자 함수를 생성한 객체는 Function 생성자 함수이다. 
console.log(Parent.constructor === Funtion);

 

Prototype chain

 

특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에  접근하려는 프로퍼티 또는 메소드가 없다면 [[Prototype]]이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색한다. 이것을 프로토타입 체인이라 한다.

 

function Parent(relation, Age) {
  this.relation = relation;
  this.Age = Age;
  this.sayAge = function(){
    console.log('Hi! my age is ' + this.Age);
  };
}

var Nick = new Person('Son', 18);

console.dir(Person);
console.dir(Nick);

console.log(Nick.__proto__ === Parent.prototype);                // 1 true
console.log(Parent.prototype.__proto__ === Object.prototype);   // 2 true
console.log(Parent.prototype.constructor === Parent);           // 3 true
console.log(Parent.__proto__ === Function.prototype);           // 4 true
console.log(Function.prototype.__proto__ === Object.prototype); // 5 true