prototype

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.

 

모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다.

 

프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다.

이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다.

정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있습니다.

 

JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결(많은 브라우저들이 생성자의 prototype 속성에서 파생된 __proto__ 속성으로 객체 인스턴스에 구현하고 있습니다.)이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색합니다.

 

프로토타입 객체 이해하기

https://www.youtube.com/watch?v=yXnbvyl04V4

function Ultra() {}
Ultra.prototype.ultraProp = true;

function Super() {}
Super.prototype = new Ultra();

function Sub() {}
Sub.prototype = new Super();

var o = new Sub();
console.log(o.ultraProp);

 

생성자

생성자는 기본적으로 함수이며 함수를 호출할때 new를 붙이면 그 함수는 단순한 함수가 아니라 생성자함수가 되고 그렇게 실행되면 새로운 객체를 만들어서 객체를 리턴하기 떄문에 변수 o 는 생성자를 통해 만들어진 객체가 들어가게 된다.

 

생성자를 사용하는 이유는 객체를 만들때 가지고 있어야 하는 매소드나 프로퍼티 를 가지고 있을때 생성자를 사용한다.

 

 

prototype

우리가 얻고자하는 그 객체의 원형, 그 객체가 어떤 프로퍼티와 메소드들은 바로 prototype에 저장이 되어있다. sub는 prototype이라는 프로퍼티를 가지고있고 prototype에는 어떠한 객체가 저장되어있으니 new를 사용해서 생성자를 만들면 sub의 prototype 프로퍼티에 저장되어있는 객체를 꺼내서 리턴해줄수있다.

 

 

예시

따라서 맨 위의 코드는 prototypechain 이라고 할수있다.

function Ultra() {}
Ultra.prototype.ultraProp = true;

function Super() {}
Super.prototype = new Ultra();

function Sub() {}
Sub.prototype = new Super();

Sub.prototype.ultraProp = 2;

var o = new Sub();
console.log(o.ultraProp);   //2

o 생성자에 ultraProp라는 프로퍼티가 없으니 prototype을 뒤져서 찾아낸다.

 

 

응용

function Ultra() {}
Ultra.prototype.ultraProp = true;

function Super() {}
var t = new Ultra();
t.ultraProp = 4
Super.prototype = t;

function Sub() {}
var s = new Super();

Sub.prototype = s;

var o = new Sub();
console.log(o.ultraProp);   //4

 

 

출처

https://www.nextree.co.kr/p7323/

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes