프로토타입

인스턴스의 [[prototype]] 과 생성자의 prototype은 같은 객체를 바라봅니다. 하지만 인스턴스의 내부슬롯 [[prototype]] 은 접근가능한 것이 아니라 정보를 보여주기만 할 뿐입니다.

우선 배열을 하나 선언했다고 가정하겠습니다.

리터럴 배열([1, 2, 3])의 생성자(Constructor)는 Array이고, Array의 프로퍼티 중 prototype라는 프로퍼티가 존재합니다. Array.prototype가 리터럴 배열([1, 2, 3])의 [[prptotype]] 에 연결되어 있는 것 입니다.
prototype은 **객체**이고 이 객체에는 concat, filter, map, push, .. 등 이 담겨있습니다.

원시값(기본형)들은 객체가 아니므로 [[prototype]]이 존재하지 않는데 원시 값들에 메서드를 사용하면 사용이됩니다.

이유는 자바스크립트가 임의로 원시값 타입에 맞는 생성자 함수의 인스턴스를 만들고 프로토타입에 있는 메서드를 적용해서 결과를 얻게한 다음 인스턴스를 제거하는 방식으로 동작합니다.

배열이든 함수든 모두 메서드에 접근하고자할 때 데이터 자신은 메서드가 없지만 [[prototype]] 라는 연결 통로를 통해서 생성자의 prototype을 마치 자신의 것처럼 쓸 수 있게됩니다. null, undefined 를 제외한 모든 데이터타입에는 생성자 함수가 존재하고, 각 데이터 타입에만 해당 하는 전용메서드들이 정의되어있다.

[[prototype]]은 접근이 불가하여 프로토타입에 접근하는 방식은 instance.__proto__ , Object.getPrototypeof(instance) 로 접근하는 방법이 있는데 후자를 지향한다. 기존 브라우저들이 마음대로 제공하고 있는 기능을 호환성 차원에서 하는 수 없이 문서화 해준 것 일 뿐이기 때문에 공식방법을 사용하는게 좋습니다.

메소드 상속 및 동작 원리

인스턴스마다 완전히 동일한 동작을 하는 메서드가 있을 수 있다.
생성자 prototype을 사용하여 정의해두면 인스턴스 객체들은 전부 공통으로 사용할 수 있어 중복된 메서드를 생성하여 발생하는 불필요한 메모리 낭비를 줄일 수 있습니다.

DRY(Don’t Repeat Yourself): 매번 직접 반복하지말고 , 복붙하지 말고, 최대한 반복을 줄여라 → 메모리 사용 효율을 상당히 끌어올릴 수 있다. (메모리 용량 최적화)

function Person (name, age) {
	this.name = name;
	this.age = age;
}
const bigOne = new Person('대원', 27);
const bigTwo = new Person('대투', 28);

bigOne.setOlder = function () {
	this.age += 1;
}
bigTwo.setOlder = function () {
	this.age += 1;
}
Person.prototype.setOlder = function () { this.age += 1; }

프로토타입 체이닝

이처럼 대각선의 빨간선을 따라서 연결되어있는 프로토타입들을 일컬어 프로토타입 체인 이라고 부릅니다.

instance 변수의 [[prototype]] 은 생성자의 prototype 입니다. 그런데 prototype 은 객체입니다. 그럼 객체의 프로토타입이 있겠죠? 생성자는 객체의 [[prototype]]을 가지고 있습니다. 이런식으로 체인 형식으로 이루어져있는 것을 프로토타입 체인이라 부르고 스코프체인과 굉장히 유사합니다.

Object만의 전용? 메서드가 Object.메서드명() 이런식으로 이유는 Object의 prototype으로 정의를하자니 다른 타입에서 전부 이용이 가능하게 됩니다. 고유한 Object만으 ㅣ전용 메서드가 아니게 되어버리는 셈이죠

그래서 객체 생성자 함수에 직접 메서드를 정의하는 방법밖에 없었다고 합니다