[JAVA SCRIPT] PROTOTYPE

1. PROTOTYPE 이란?

• JAVA나 C++과 같은 프로그래밍 언어는 클래스 기반 객체지향 언어이다. 이와 달리 JAVA SCRIPT는 프로토타입 기반 객체지향 프로그래밍 언어다.
• 그렇기 때문에 자바스크립트의 동작 원리를 이해하기 위해서는 PROTOTYPE 개념을 잘 알고 있어야 한다.
• 클래스 기반 객체지향 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성한다. 하지만 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이(Class-less)도 객체를 생성 할 수 있다.

2. JAVA SCRIPT 에서의 객체 생성 방법

• 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티(멤버) 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입) 이라고 한다.
• Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다.

var student = {
    name : 'IM', 
    score : 90
};

// student에는 hasOwnProperty 메소드가 없지만 아래 구문은 동작한다.
console.log(student.hasOwnProperty('name'));    // true

console.dir(student);

var student = {
    name : 'IM', 
    score : 90
};

console.log(student.__proto__ === Object.prototype);

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

3. [[Prototype]] vs prototype 프로퍼티

• 모든 객체는 자신의 프로토타입 객체를 가리키는 [[Prototype]] 인터널 슬롯(internal slot)을 갖으며 상속을 위해 사용된다.
• 함수도 객체이므로 [[Prototype]] 인터널 슬롯을 갖는다. 그런데 함수 객체는 일반 객체와는 달리 prototype 프로퍼티도 소유하게 된다.

주의해야 할 것은 prototype 프로퍼티는 프로토타입 객체를 가리는 [[Prototype]] 인터널 슬롯은 다르다는 것이다. prototype 프로퍼티와 [[Prototype]]은 모두 프로토타입 객체를 가리키지만 관점의 차이가 있다.

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

var foo = new Person('Lee');

console.dir(Person);    // prototype 프로퍼티가 있다.
console.dir(foo);       // prototype 프로퍼티가 없다.

가. [[Prototype]]

• 함수를 포함한 모든 객체가 가지고 있는 인터넛 슬롯이다.
• 객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리키며 함수 객체의 경우 Function.prototype을 가리킨다. 

console.log(Person.__proto__ === Function.prototype);

나. prototype 프로퍼티

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

console.log(Person.prototype === foo.__proto__);

4. constructor 프로퍼티

• 프로토타입 객체는 constructor 프로퍼티를 갖는다. 이 constructor 프로퍼티 객체의 입장에서 자신을 생성한 객체를 가리킨다.
• 예를 들어, Person() 생성자 함수에 의해 생성된 객체를 foo라고 하자. 이 foo 객체를 생성한 객체는 Person() 생성자 함수이다. 이때 foo 객체 입장에서 자신을 생성한 객체는 Perdon() 생성자 함수이며, foo 객체의 프로토타입 객체는 Person.prototype이다. 따라서 프로토타입 객체 Person.prototype의 constructor 프로퍼티는 Person() 생성자 함수를 가리킨다.

function Person(name) {
    this.name = name;
  }
  
  var foo = new Person('Lee');
  
  // Person() 생성자 함수에 의해 생성된 객체를 생성한 객체는 Person() 생성자 함수이다.
  console.log(Person.prototype.constructor === Person);
  
  // foo 객체를 생성한 객체는 Person() 생성자 함수이다.
  console.log(foo.constructor === Person);
  
  // Person() 생성자 함수를 생성한 객체는 Function() 생성자 함수이다.
  console.log(Person.constructor === Function);