[JavaScript] prototype

prototype

한국어로 원형이다. 자바스크립트는 prototype를 통해 상속 기능을 제공한다.

1. prototype

그럼 prototype이란 무엇인가? 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. 

function Ultra(){}

Ultra.prototype.ultraProp = true;

 

function Super(){}

Super.prototype = new Ultra();

  

function Sub(){}

Sub.prototype = new Super();// Super 생성자가 만든 객체가 new Super()에 리턴된다.

var o = new Sub();

console.log(o.ultraProp);//ultraProp이라는 값은 Sub의 조부모인 Ultra가 가지고 있다.

결과) 

true

생성자는 기본적으로 함수이다. new를 붙이면 일반함수에서 생성자로 바뀐다.

var o = new Sub();에서 새로운 객체를 만들어서

o가 리턴값이다.--> o라는 변수안에 생성자를 통해 만들어진 객체가 만들어 진다. 

cf.) new를 통해 객체를 만드는 이유

객체를 생성하고 나서 그 객체가 가지고 있는 메소드, 프로퍼티를 가지고 쥐어주기 때문이다.

우리가 얻고자하는 객체의 원형, 즉, 객체가 어떠한 객체 있고 어떠한 메소드와 프로터티를 가지고 있다는 그 객체의 원형은 어딘가에 저장되어 있는데 그 위치는 prototype이라고 하는 프로퍼티에 저장되어 있다.

즉, Sub라고 하는 함수는 객체이기 때문에 프로퍼티를 가질 수 있다. 그 프로퍼티가 prototype가 있어서 그 prototype이라는 프로퍼티에는 객체가 정의되어 있다.(Sub.prototype= new Super();)

그 protpype이라는 프로퍼티에는 어떠한 객체가 들어가 있다. 나중에 var o = new Sub();를 통해 생성자를 호출하게 되면 자바스크립트는 생성자 함수의 prototype의 프로퍼티에 저장되어 있는 객체(Sub.prototype)를 꺼내서 그것을 리턴해 준다.

function Ultra(){}

Ultra.prototype.ultraProp = true;

 

function Super(){}

Super.prototype = new Ultra();

 

function Sub(){}

Sub.prototype = new Super();

 

var o = new Sub();

o.ultraProp = 1;// 정의한 바 있으면 이 값을 찍는다.

console.log(o.ultraProp);

결과) 

1

function Ultra(){}

Ultra.prototype.ultraProp = true;

 

function Super(){}

Super.prototype = new Ultra();

 

function Sub(){}

Sub.prototype = new Super();

Aub.prototype.ultraProp = 2;

var o = new Sub();// Sub 생성자를 호출해서 그 객체에 prototype를 찾아서 있다면 그 값을 준다.

console.log(o.ultraProp);

결과)

2

function Ultra(){}

Ultra.prototype.ultraProp = true;

 

function Super(){}

var t = new Ultra();

t.ultraProp = 4;// 이 문장을 주석하면 결과는 true이다.

Super.prototype = t;// 

function Sub(){}

Sub.prototype = new Super();

 

var o = new Sub();

console.log(o.ultraProp);

결과)

4

생성자 Sub를 통해서 만들어진 객체 o가 Ultra의 프로퍼티 ultraProp에 접근 가능한 것은 prototype 체인으로 Sub와 Ultra가 연결되어 있기 때문이다. 내부적으로는 아래와 같은 일이 일어난다.

1 객체 o에서 ultraProp를 찾는다.

2 없다면 Sub.prototype.ultraProp를 찾는다.

3 없다면 Super.prototype.ultraProp를 찾는다.

4 없다면 Ultra.prototype.ultraProp를 찾는다.

prototype는 객체와 객체를 연결하는 체인의 역할을 하는 것이다. 이러한 관계를 prototype chain이라고 한다.

Super.prototype = Ultra.prototype 으로하면 안된다. 이렇게하면 Super.prototype의 값을 변경하면 그것이 Ultra.prototype도 변경하기 때문이다. (부모 객체에 영향을 준다.--> 자식에게 반영된 일들이 부모에게 영향을 주는 꼴이된다.)

Super.prototype = new Ultra();는 Ultra.prototype의 원형으로 하는 객체가 생성되기 때문에 new Ultra()를 통해서 만들어진 객체에 변화가 생겨도 Ultra.prototype의 객체에는 영향을 주지 않는다.

출처: https://devbox.tistory.com/entry/JavaScript-prototype?category=574556 [장인개발자를 꿈꾸는 :: 기록하는 공간]