[js] 프로토타입

 

Object prototypes - Web 개발 학습하기 | MDN

 

자바스크립트는 프로토타입 기반 언어이다

 

ECMA6 이전의 자바스크립트에서 클래스가 없었다.

객체 지향언어에서 클래스는 빠질 수 없는 개념이기 때문에 JS에서 클래스의 역할을 대신 흉내낼 수 있는 장치들이 필요했다.

프로토타입은 JS가 객체 지향에서 클래스가 해내는 ‘상속’을 흉내내는 방식으로 사용하게 된다.

 

영어사전

prototype

• 원형(原型), 원본

자바스크립트에서는 객체의 원형인 프로토타입을 이용한 클로닝(Cloning: 복사)과 객체 특성을 확장,연결해 나가는 방식을 통해 새로운 객체를 생성해 낸다.

 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다
자바스크립트의 모든 객체는 자신을 생성한 객체 원형에 대한 숨겨진 연결을 갖는다.
이때 자기 자신을 생성하기 위해 사용된 객체원형을 프로토타입이란 한다. 
프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고
그 상위 프로토타입 객체도 마찬가지
이를 프로토타입 체인(prototype chain)이라 부르며
다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간
정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라
객체의 생성자의 prototype이라는 속성에 정의되어 있다.

1

 

2

 

 

 

1.  [[Prototype]]

 

 

 

모든 객체는 내부에 숨겨진 [[Prototype]]:Object 를 가지고 있다.

객체에서 공통적으로 쓰인느 함수들을 Object라는 프로토타입에 만들어둠으로써

손쉽게 객체 간 상속을 할 수 있는 것이다.

 

 

함수 객체의 예를 들자면,

함수를 정의하면 함수만 생성되는 것이 아니라 Prototype Object도 같이 생성된다.

 

 

 

생성된 함수는 prototype이라는 속성을 통해, (위 캡처에서 Foo.prototype)

기본적인 속성으로 constructor와 prototype 속성을 가지고 있는 Prototype Object에 접근할 수 있다.

constructor은 같이 생성되었던 함수 자신을 가리키고 있다.

 

 

 

프로미스 객체 내부에 숨겨진 내부에 숨겨진 [[Prototype]] : Object

 

객체 내부에 숨겨진 [[Prototype]] : Object(속내용 상동)

 

 

2.   prototype

 

 

[[Prototype]]은 외부에서 직접 접근이 불가하기 때문에,

__proto__ 나 prototype 으로 접근해야한다.

모든 함수 객체의 Constructor는 prototype 프로퍼티를 가지고 있다.

 

 

 

 

 

3.   __proto__

 

__proto__ 는 객체를 만들어내기 위해 사용된 객체원형에 대한 숨겨진 연결이다.

 

 

즉, mimi 클래스의 인스턴스인 미미를 통해 콘솔창에서

미미.__proto__ === mimi.prototype을 치면

true로 평가된다.

 

 

 

한 눈에 보기 좋게 표시

 

 

 

Foo()로써 만들어진 모든 객체(f1, f2)는

결국 Foo.prototype 객체와 내부적으로 [[Prototype]]링크로 연결된다.
결국 f1 ,f2 와 Foo 는 상호 연결된 두개의 객체가 된다.

 

 

 

 

 

최종