[객체지향] prototype

 

 

생활코딩 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743)

---

 prototype 

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

객체는 프로퍼티를 가질 수 있는데, prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다.

 

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

 

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

---

내부적으로는 아래와 같은 일이 일어난다.

 

1. 객체 o에서 ultraProp를 찾는다.
2. 없다면 Sub.prototype.ultraProp를 찾는다.
3. 없다면 Super.prototype.ultraProp를 찾는다.
4. 없다면 Ultra.prototype.ultraProp를 찾는다.

prototype는 객체와 객체를 연결하는 체인의 역할을 하는 것이다.

이러한 관계를 prototype chain이라고 한다.

---

만약, 위 소스코드에서 Sub함수에 Sub.prototype.ultraProp=2;라는 명령어가 추가된다면 어떤 결과가 나올까?

그 결과를 알기 위해서 아래와 같이 수정해보았다.

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

 

해당 소스코드의 내부적으로는 아래와 같은 일이 일어난다.

 

1. 객체 o에서 ultraProp를 찾는다.
2. 없다면, Sub.prototype.ultraProp를 찾는다.

따라서, Sub.prototype.ultraProp의 값이 존재하기 때문에 2가 출력된 것이다.