Prototype

객체의 특성을 다른 객체로 상속하는 것을 가능하게 하는 메커니즘

객체를 생성할 때 prototype이라는 속성이 자동으로 생성됨.

프로토타입의 존재 이유

class Person {
	constructor() {
		this.eyes = 2;
		this.nose = 1;
	}
}

const sangbin = new Person();
const dahyun = new Person();

console.log(sangbin.eyes) // 2
console.log(sangbin.nose) // 1

console.log(dahyun.eyes) // 2
console.log(dahyun.nose) // 1

위의 경우 메모리에는 eyes와 nose가 두 개씩 총 4개 할당.

객체를 100개 만들면 200개의 변수가 메모리가 할당됨.

class Person {}

Person.prototype.eyes = 2;
Person.prototype.nose = 1;

const sangbin = new Person();
const dahyun = new Person();

console.log(sangbin.eyes) // 2
console.log(sangbin.nose) // 1

console.log(dahyun.eyes) // 2
console.log(dahyun.nose) // 1

위와 같이 프로토타입을 사용하면 Person.prototype 이라는 빈 Object가 어딘가에 존재하고,

new Person()으로 생성된 객체(sangbin, dahyun)들은 어딘가에 존재하는 값을 갖다쓸 수 있음

즉 prototype을 통해 eyes, nose를 저장해 놓고 sangbin, dahyun이 공유해서 사용함.

_._proto __

class Person {
	constructor() {
		this.eyes = 2;
		this.nose = 1;
	}
}

const sangbin = new Person();
const dahyun = new Person();

sangbin, dahyun이라는 새로운 객체를 생성하면,

--proto-- 라는 속성이 같이 생성됨.

이때 생성된 --proto-- 속성은 sangbin이라는 객체를 생성한 Person 객체의 prototype을 가리킴

따라서

Person.prototype === sangbin.__proto__ // true

프로토타입 체인

--proto-- 는 부모 객체의 prototype을 가리킴.

이러한 특징을 이용하여, 부모객체의 프로퍼티나 메서드를 차례로 검색하는 것을 의미함.

let div = document.createElement('div');

div.__proto__ // HTMLDivElement
div.__proto__.__proto__ // HTMLElement
div.__proto__.__proto__.__proto__ // Element
div.__proto__.__proto__.__proto__.__proto__ // Node
div.__proto__.__proto__.__proto__.__proto__.__proto__ // EventTarget
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ // Object
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ // null

// 프로토타입의 종착지는 null

이러한 체인의 특징으로 현재 객체에 특정 속성이나 메서드가 없더라도,

체인으로 연결된 부모 객체에 있는 속성이나 메서드를 사용할 수 있음.

class Person {}
const sangbin = new Person()

// Person 객체 안에 메서드가 없더라도 부모 객체에 있는 메서드를 사용할 수 있음.
sangbin.toLocaleString();
sangbin.valueOf();