Prototype

프로토타입을 통해서 자바스크립트는 상속이라고 하는 개념을 제공하고있다. 

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);

> true

sub를 통해 만들어진 객체 자체에는 ultraProp 라는 값을 가지고 있지 않다. 이 값은 sub의 부모 객체인 super의 부모 객체인 ultra가 ultraProp이라는 값을 가지고 있다. 서브는 슈퍼를 상속받고, 슈퍼는 울트라를 상속받고 있는 것이다. 그리고 울트라안에 ultraProp이라는 값이 true로 설정되어 있기때문에 true라는 값이 나오는것. sub의 ultraProp에 접근했을때 sub라는 객체에 이 값이 정의가 되어 있지 않기 때문에 자바스크립트는 내부적으로 super라는 객체가 ultraProp이라는 값을 가지고 있는지 확인하고, 그렇지 않으면 super의 부모객체인 ultra라고 하는 객체안에서 ultraProp라는 값을 찾게 된다. 그리하여 sub 객체에 정의되지 않은 ultraProp의 값을 사용할 수 있게 되는것이다. 이러한 것을 prototype chain이라고 한다.

비어있는 객체를 만드는거면 생성자는 별로 가치가 없다. 어떠한 객체를 만들때 그 객체가 가지고 있어야하는 메소드, 프로퍼티(데이터)를 가지고 있게할때 생성자를 사용하는 것인데, 얻고자하는 객체의 원형(객체가 가지고 있는 메소드나 프로퍼티 등)이 prototype이라고하는 프로퍼티에 저장되어있다. sub라고 하는 함수는 객체기 때문에 프로퍼티를 가지고 있을 수 있는데 그 프로퍼티중에 prototype이라고 하는 특수한 프로퍼티가 있어서 prototype이라고 하는 프로퍼티안에는 어떠한 객체가 정의가 되어있다. new를 이용해서 생성자를 호출하게 되면 생성자 함수의 prototype 프로퍼티에 저장되어 있는 객체를 생성자로 만든 객체에 리턴하게된다.

function Ultra(){}
Ultra.prototype.ultraProp = true;
 
function Super(){}
Super.prototype = new Ultra();
 
function Sub(){}
var s = new Super();
s.ultraProp = 3;
Sub.prototype = s;
 
var o = new Sub();
console.log(o.ultraProp);

> 3

생성자 sub를 통해 만들어진 객체 o가 ultra의 프로퍼티인 ultraProp에 접근 가능한 것은 prototype chain으로 sub와 ultra가 연결되어 있기 떄문이다. 

1. 객체 o에서 ultraProp를 찾는다.
2. 없다면 sub.prototype.ultraProp을 찾는다.
3. 없다면 super.prototype.ultraProp을 찾는다.
4. 없다면 ultra.prototype.ultraProp을 찾는다.
값을 찾을때까지 계속 부모객체로 올라가며 찾는다.

직접적으로 super.prototype = ultra.prototype라고 하면 super.prototype 값을 변경하면 ultra.prototype값도 같이 변경되기 떄문에 하면 안된다. super.prototype = new ultra();는 ultra.prototype의 원형으로 하는 객체가 생성되기 때문에 new ultra()로 만들어진 객체에 변화가 생겨도 ultra.prototype의 값에는 영향이 없다.