대망의 프로토타입. 이 강의를 처음 기획하게 된 계기가 프로토타입이었다고 한다. 프로토타입을 이해하는데 6개월이 걸렸고, 찰나의 깨우침 같은 순간이 있은 후에 이해가 되었지만, 이해하고 난 다음에는 약간 “겨우 이게 프로토타입이었던 건가?” 하고 허무함이 있었다고 한다. 그래서 이런 강의를 기획하게 되었다고.
요 그림이 중요하다고 한다
constructor)가 있을때, new연산자로 instance를 만들면, 그 instance에는 constructor의 ‘prototype’이라고 하는 프로퍼티의 내용이 [[Prototype]]라고 하는 프로퍼티로 참조를 전달하게 된다고 한다.Constructor.prototype과 instance[[Prototype]] 이 같은 객체를 바라보게 된다는 것이다.
그런데 [[Prototype]]는 접근 가능한 것이 아니라 정보를 보여주기만 할 뿐으로, 실제 동작상으로는 instance와 동일시가 된다고 한다.
이 내용을 함축한 그림이 위의 직각삼각형인 것이다.
따라스 앞으로 위 직각삼각형 그림을 보면, 왼쪽위에는 생성자(constructor), 오른쪽 위에는 생성자의 프로토타입(prototype), 그리고 아래에는 인스턴스(instance)를 떠올리면 된다고 한다.
파란색 선은 Constructor 안에 prototype객체가 있음을 의미하고, 노란색 화살표는 new 키워드를 통해 Constructor가 instance를 생성할 수 있음을 의미하는 것이고, 붉은색 화살표는 인스턴스가 [[Prototype]] 프로퍼티를 통해 Constructor의 prototype안의 메소드에 접근할 수 있음을 나타낸다.
![직각삼각형을 확인하자. 왼쪽 위 가 Constructor 함수, 오른쪽 위에는 객체가 있고, 왼쪽 아래에는 배열 instance인 [ 1, 2, 3 ] 이 있으며, 에 연결됨이 표시된 모습도 확인할 수 있다.](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1b2e4767-bfec-4624-a473-800853646dc5/Untitled.png)
직각삼각형을 확인하자. 왼쪽 위 Array가 Constructor 함수, 오른쪽 위에는 prototype 객체가 있고, 왼쪽 아래에는 배열 instance인 [ 1, 2, 3 ] 이 있으며, [[Prototype]] 에 연결됨이 표시된 모습도 확인할 수 있다.
Array 생성자 함수로 생성하든, 내부 구조는 모두 Array 생성자 함수로 생성한 것과 결국 동일하게 동작한다.Array 생성자 함수에 여러 property들이 있는 것을 볼 수 있다. from(), isArray(), … 등.
prototype라는 객체가 있다는 것이고, 얘가 배열 리터럴의 [[Prototype]] 로 연결이 되어 있다는 것이다.prototype 객체 안에는 우리가 잘 아는 배열의 메소드들이 들어있는 것을 확인할 수 있다. concat(), filter(), … 등
prototype은 해당 인스턴스가 사용할 수 있는 전용 메소드들을 담아놓은 클래스/생성자 함수가 가지고 있는 객체라고 볼 수 있고, 이를 인스턴스가 사용할때는 [[Prototype]]을 통해 간접적으로 사용한다는 것이 핵심이다.prototype 안에는 constructor프로퍼티가 있고 거기에 생성자 함수가 담겨 있다는 것이다.
[[Prototype]]의 내용과 생성자 함수의 prototype의 내용이 실제로 같은 객체라는 것을 확인할 수 있다.[[Prototype]] 프로퍼티가 있을 수 없다.Number 생성자 함수의 인스턴스를 만들어서 그 프로토타입에 있는 메소드를 적용해서 원하는 결과를 얻게 한 다음에 다시 인스턴스를 제거하는 식으로 동작을 한다고 한다.
