#11. Prototype(3)

Prototype(3)

지난 포스트에서 마무리하면서 언급했듯이 이번 포스트에서는

Function(함수) → Array(생성자 함수이면서 자식 객체) → arr(자식 객체)

이 상황에서 프로토타입 관계를 다뤄보도록 하겠다.

상황을 코드로 나타내면 아래와 같다.

const Array = new Function(...)

const arr  = new Array()

이 경우에 prototype과 proto 관계를 분석해보면

Array.__proto__ === Function.prototype // true
arr.__proto__ === Array.prototype // true
arr.prototype === undefined // true

중간에 단계가 하나 더 생겼을 뿐, proto는 부모의 prototype을 가리키는 것은 변함 없다.

---

추가로 Object와 Function의 prototype 관계도 살펴보겠다.
여기서부터는 조금 헷갈릴 수 있다.

Function.__proto__ === Function.prototype // true
Object.__proto__ === Function.prototype // true

Function.prototype.__proto__ === Object.prototype // true
Object.prototype.__proto__ === null // true. Object.prototype이 프로토타입 체인의 최상위 객체이다.
Array.prototype.__proto__ === Objcet.prototype // true

함수의 proto는 Function.prototype이고, prototype의 proto는 Object.prototype이다.

Function.prototype.__proto__ === Object.prototype // 함수의 prototype의 proto가 객체이므로, 함수도 객체다.

arr.__proto__ === Array.prototype
Array.prototype.__proto__ === Object.prototype // 따라서, arr도 객체가 된다.

prototype 체인을 타고 올라가면 결국 모든 것들이 Object.prototype에 귀결된다.
그래서 자바스크립트에는 모든 것들이 객체라는 것이다.

Array와 같이 기본적으로 제공하는 생성자 함수말고 아래와 같은 커스텀 생성자 함수(ES6 클래스)에도
이와 같은 프로토타입 관계는 동일하게 적용된다.

const fn = function(a, b) {
  this.a =a;
  this.b =b;
}

class Abc {
  constructor() {
  	...
  }
}

이 것을 끝으로 프로토타입을 마무리하고, 커스텀 생성자 함수에서 프로토타입 관계는 다음 포스트부터 시작할 OOP 시리즈에서 소개하겠다.