프로토타입

프로토타입이란?

뜻을 찾아 보면 일반 적인 의미로 원형 이라는 뜻을 가지고 있다

이걸 객체에 의미를 부여하자면 객체의 원형 즉 자신을 만들어낸 객체의 원형을 뜻 한다.

객체의 원형에서 만들어질 객체는 자신을 통해서 만들어질 객체의 원형의 뜻도 지닌다.

function Animal() {}
console.dir(Animal);

이 코드를 콘솔에 찍어보면

Prototype 속성과 proto 속성을 확인 할수있다

proto : 자신을 만들어낸 객체의 원형
Prtotype Link로 연결되어 자신을 만들어낸 객체를 연결시킨다

constructor: 생성자를 뜻하며 자신을 만들어낸 객체

Prototype Object로 연결되어 자신을 만들어낸 객체에 연결시킨다

prototype: 자신을 원형으로 만들어진 새로운 객체

Prototype Object로 연결되어 자신이 만들어 낸 새로운 객체에 연결 시킨다.

프로토타입 사용하는 이유

자바스크립트는 class 라는 개념이 존재하지 않는다.

최근에 class라는 키워드가 추가되어 클래스처럼 표현 할수 있지만

이것은 문법만 매핑 해준 것이고 동작 방법은 프로토타입을 활용하여 객체를 생성하는 것과 같다

따라서 프로토타입의 사용 이유는 자바스크립트는 class 라는 개념이 존재하지 않기 때문에

프로토타입 이라는 객체를 활용하여 이것을 class처럼 표현하기 위해 사용한다고 볼 수 있다.

프로토타입 체인

prototype 객체는 기본적인 속성으로 constructor와 proto 를 가지고 있다

이중 proto 에는 자식의 부모 prototype 객체를 가리키는 링크를 담고 있다

모든 프로토타입 체이닝의 종점은 Object.prototype이다.

Object는 가장 상위 객체이다. (모든 객체의 부모격)

__proto__를 이용하여 프로토타입 체인의 과정

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

div.__proto__
div.__proto__.__proto__
div.__proto__.__proto__.__proto__
div.__proto__.__proto__.__proto__.__proto__
div.__proto__.__proto__.__proto__.__proto__.__proto__
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__

프로토타입 종착지는 null

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

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