JavaScript - prototype & prototype chaining

prototype

 

 

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가 출력된다.

 

변수 o는 Sub객체를 저장한다.

 

Sub는 Super 객체를 상속받음

 

Super는 Ultra객체를 상속받음

 

Ultra의 prototype 속성의 ultraProp 속성에 true를 할당해놓았으므로 true가 출력되는것.

 

위 처럼 prototype이 꼬리에 꼬리를 물고 연결되는 구조를 prototype chaining이라고 부른다.

 

 

prototype chaining

 

특정 속성을 찾기 위해 상위 프로토타입을 계속해서 타고 올라가는 과정이 프로토타입 체이닝

 

 

그러면 아래 코드의 마지막 줄 console.log는 뭘 출력할까?

 

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

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

function Sub(){}
var t = new Super()
t.ultraProp = 2
Sub.prototype = t;

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

 

2를 출력한다.

 

Sub -> Super -> Ultra 순으로 ultraProp의 값을 탐색한다.

 

 

출처

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