프로토타입과 프로토 타입 체인은 알자!

프로토타입 기반 객체지향 프로그래밍

Java, C++과 같은 클래스 기반 객체지향 프로그래밍 언어와 달리
"자바스크립트"는 프로토타입 기반 객체지향 프로그래밍 언어이다.
따라서 자바스크립트의 동작 원리를 이해하기 위해서는 프로토타입의 개념을 잘 이해하고 있어야 한다.

클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의, 이를 통해 객체(인스턴스)를 생성한다.
프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이(Class-less)도 객체를 생성할 수 있다.

[중요 요약]
자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다.
그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다.
이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다.

https://poiemaweb.com/js-prototype  참조요약

Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다.

let student = {
  name: 'Lee JUNG GU',
  score: 90
};

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

console.dir(student);

Google chrome에서 student 객체 출력

[[Prototype]] vs prototype 프로퍼티

자바 스크립트의 모든 객체(함수 포함)는 [[Prototype]] = 인터널 슬롯을 가진다. 이걸로 상속을 위해 사용된다.
그런데, 함수는 prototype 프로퍼티도 가진다.

객체 - [[Prototype]] = 인터널 슬롯
함수 - [[Prototype]] = 인터널 슬롯 + prototype 프로퍼티

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

var foo = new Person('Lee Jung Gu');

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

[[Prototype]]
자신의 부모 역할 = 프로토타입 객체를 가리키며, 함수 객체의 경우 Function.prototype을 가리킨다.

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

prototype 프로퍼티
함수만 가짐, 함수 객체가 생성자로 사용될 때, 이 함수를 통해 생성될 객체의 프로토타입 객체를 가리킨다.

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

이름이 비슷해서 같은 용도로 착각 할수 있지만, 다르다!

constructor 프로퍼티

프로토타입 객체는 constructor 프로퍼티를 갖는다.
이 constructor 프로퍼티는 객체의 입장에서 자신을 생성한 객체를 가리킨다.

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);

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