[JavaScript] 상속, Prototype, 함수 및 생성자 (3)

목차

1. 개요

2. __proto__

3. 정리

---

1. 개요

prototype에 대한 내용이 생각보다 많아 내용을 정리해나가며 공부를 하고 있다.

지금까지의 내용을 다시 정리하면

 

 1) 함수가 정의되면 prototype을 참조 가능한 prototype 프로퍼티, __proto__ 메서드가 생성된다.

 2) prototype은 constructor(생성자)를 참조 가능하다.

 3) 함수의 생성자로 생성되는 객체들이 prototype 객체를 상속받는다.

 4) prototype의 내용을 변경하면 생성자로 생성된 객체는 변경된 내용을 상속받게 된다. (당연한 얘기)

 5) prototype 객체를 참조하는 것은 생성한 객체의 __proto__ 메서드이다.

 

function - __proto__ - prototype 간의 관계

 

 그렇다면 __proto__에 대해 알아보도록 하자.

---

2. __proto__

 __proto__란 prototype link라고 불리며 객체가 생성될 때 조상이었던 함수의 prototype 객체를 가리킨다.

 

간단한 실험을 통해 알아보자

 

 1) function a(){} - 함수를 생성한다.

 2) a.prototype.a_val = 1; - 해당 함수의 prototype 객체에 a_val = 1이라는 값을 추가한다.

 3) b = new a(); - 생성자를 통해 b라는 객체를 생성한다.

 4) b.__proto__를 확인한다!

 5) __proto__에는 조상 함수의 prototype 객체인 a.prototype을 나타낸다.

 6) 이러한 관계를 b가 a를 상속받았다고 한다. 왜냐고? b.a_val를 출력하면 1이 나오니까!

b.__proto__ 객체

 

b를 출력하면 알 수 있겠지만 b객체 자체는 a_val를 가지고 있지 않는다.

__proto__ 객체밖에 없다. 바로 이 객체가 a_val 속성을 찾을 때까지 조상 prototype을 참조해나간다!

b 객체

최상위인 Object의 prototype 객체까지 찾지 못했을 경우 undefined를 리턴한다.

이렇게 __proto__ 속성을 통해 상위 프로토타입과 연결되어있는 형태를 prototype Chain이라고 한다.

---

3. 정리

 1) 함수가 정의되면 메모리에 함수와 생성자를 생성할 수 있는 prototype 객체가 생성된다.

 

 

 2) 함수에는 prototype 객체를 참조 가능한 prototype 프로퍼티와 __proto__ 객체가 생성된다. 

 

 3) 1)에서 생성된 prototype 객체 안에는 constructor 프로퍼티가 있고 이는 자신을 생성한 생성자 함수를 가리킨다.

 

 4) 함수의 생성자(new)로 생성되는 객체들은 __proto__ 객체를 상속받는다.

 

 5) __proto__ 객체는 자신의 조상 prototype 객체를 가리킨다.

 

 6) 상속된다.

 

 이 정리가 이해가 가지 않는다면 __proto__ 실험 과정과 맨 위의 그림을 번갈아가며 과정을 따라가다 보면 prototype, 즉 상속의 원리와 과정을 이해할 수 있을 것이다. 

 

 이로써 prototype을 마무리하도록 하겠다.