[Tech-Talk] Prototype

⚠️ 해당 게시글은 모던애자일 팀원이 준비한 테크톡 내용입니다.

출처 : 모던애자일 3기 백승범

https://blog.naver.com/wer06099/222663683861

Prototype

 

JavaScript는 객체 지향 언어입니다.

객체 지향 언어를 생각하면 class가 자연스럽게 따라오는데, JavaScript는 ES6 때 class가 추가되었습니다.

그럼 JS는 class가 나오기 전까지 상속기능을 어떻게 구현 했을까요?

​

JS는 prototype이라는 속성을 통해 상속기능을 구현해 왔습니다.

​

밑에 예시를 통해 prototype이 뭔지 알아보겠습니다.

 

첫번째 코드는 Person이라는 함수안에 eyes, nose라는 값을 저장해주고,

new를 사용하여 상수 kim과 park에 저장을 해주었습니다.

그 결과를 출력해보았는데 결과 값이 잘 뜨는 것을 확인할 수 있었습니다.

function Person() { this.eyes = 2; this.nose = 1; } const kim = new Person(); const park = new Person(); console.log(kim.eyes); // 2 console.log(kim.nose); // 1 console.log(park.eyes); // 2 console.log(park.nose); // 1 console.log(kim); //Person {eyes: 2, nose: 1} console.log(park);//person {eyes: 2, nose: 1}

두번째 코드는 Person이라는 빈 함수를 선언해주고,

eyes, nose의 값을 Person의 prototype안에 저장을 해주었습니다.

그리고 kim 과 park 에게 Person을 상속받았습니다.

그런 다음 첫번째 코드와 같이 출력을 해보았습니다.

kim, park의 eyes와 nose는 제대로 출력이 되었지만

kim, park 을 출력을 해보았을 때 빈값이 출력이 되었습니다.

function Person() {} Person.prototype.eyes = 2; Person.prototype.nose = 1; const kim = new Person(); const park = new Person(); console.log(kim.eyes); // 2 console.log(kim.nose); // 1 console.log(park.eyes); // 2 console.log(park.nose); // 1 console.log(kim); //Person {} console.log(park);//person {}

여기서 알 수있는 사실은 2가지가 있습니다.

1. prototype은 함수 어딘가에 있어 값을 prototype으로 저장을 하면 그 값을 불러 올 수 있다

2. prototype을 안쓰고 함수안에 값을 넣어 할당을 받으면 메모리 구조를 차지하게 된다.

​

이제 prototype에 대해서 깊게 알아보겠습니다.

Prototype은 Prototype Object와 Prototype Link로 나뉘어져 있는데 이 둘을 합친것이 Prototype입니다.

​

Prototype Object

저희가 알고있는 object와 비슷합니다.

하지만 자세하게 이해를 하고 싶다면 object가 만들어 지는 방법을 알아야 합니다.

​

첫번째 방법으로는 함수를 만들어서 할당받는 방법이고,

function Person() {} const Kim = new Person();

두번째 방법으로는 변수 || 상수에 빈 객체를 만들어 주는 것입니다.

const obj = {}; const Kim = new obj();

첫번째 방법과 두번째 방법의 차이점이 있는데 두번째 방법으로 객체를 만든뒤에 new를 이용하여 상속을 받으려고 하면 constructor가 없어 상속을 못받는다고 에러가 발생합니다.

하지만 첫번째 방법으로 상속을 받게 되면 성공적으로 실행이 됩니다.

이는 함수를 만들 때 생성되는 Prototype Object 때문입니다.

​

Person이라는 함수를 만들면 Person Prototype Object가 자동적으로 생성이 되는데,

이는 Person이라는 함수안에 내장되있는 Prototype이 Person Prototype Object를 가르켜

Person Prototype Object안에 있는 Constructor를 불러오기 때문에 첫번째 방법은 실행되게 되는 것 입니다.

그럼 여기서 __proto__는 무엇인지 궁금하실겁니다.

​

Prototype Link

Person이라는 빈 함수를 만들어주고 prototype을 이용하여 값을 지정해주었습니다.

그 후 kim이라는 상수에 Person을 할당을 해주고, Kim.__proto__를 출력해 보았는데

eyes, nose가 들어가 있는 것을 확인해볼수 있었습니다.

Kim.__proto__를 확장시켜 보았는데 proto는 Prototype Object를 가르키고 있는 것이 보일것입니다.

이를 Prototype Link라고 합니다.

​

Prototype의 내부 과정을 그림으로 나타내 보았습니다.

Kim이 값을 Person에서 eys와 nose를 가져오려면 어떻게 해야될까요?

1. Person안에 내장되 있는 Prototype안에 있는 값을 Person Prototype Object에게 전달.

2. Kim에게 있는 proto가 Person Prototype Object를 참조하여 Prototype안에 있는 값을 받아온다.

라고 정리를 할 수 있겠습니다.

​

Prototype Chain

여기서 만약에 Person 함수안에 값이 없으면 어떻게 될까요?

Person 함수 위에 함수를 만들어 주지 않았지만 그 위에 최상위인 Object prototype Object가 존재 합니다.

​

Person Prototype Object안에있는 proto를 통해 최상위 부모격 함수에 있는 Object Prototype Object에 접근하게 됩니다.

​

Object 함수 안에도 값이 없어 Object Prototype Object에 값이 없게 됩니다.

여기서 Object Prototype Object안에 proto는 그 다음 최상위를 찾아가야 하지만 이미 최상위 까지

도달했으므로 undefined가 출력하게 되는 것입니다.

​

이를 Prototype Chain이라고 부릅니다.