[ Javascript ] 자바스크립트 기본 문법 | prototype & prototype chain

이미지 출처 :  https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

 

상속의 구체적인 수단인 prototype에 대해서 자세히 알아보는 포스팅이 될 것 같습니다.

 

 

 

 

 

자바스크립트 기본 문법  ::  prototype

 

 

 

prototype은 한국어로는 원형 정도로 번역됩니다.

 

prototype은 말 그대로 객체의 원형이라고 할 수 있습니다.

 

함수는 객체입니다.

 

그러므로 생성자로 사용될 함수도 객체입니다.

 

 

객체는 프로퍼티를 가질 수 있는데,

prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티입니다.

 

prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다고 보면 됩니다.

 

 

 

 

자바 스크립트 기본 문법  :: prototype chain

 

 

 

 

prototype chain 의 개념은 예제와 같이 설명하도록 하겠습니다.

 

 

 

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

 

 

 

 

 

생성자 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의 객체에는 영향을 주지 않게됩니다.