[OOP] JavaScript 객체 지향 프로그래밍 - 15. prototype vs proto

 

 

들어가며

어느 정도 개발에 대한 감을 익혔다고 생각했습니다. 코드를 순서에 맞게 작성하는 능력들을 아주 조금이지만 쌓아 올릴 수 있었습니다. 하지만 시간이 지나면서 제 코드를 봤을 때 너무 더럽다고 느껴졌습니다. 중복되는 코드가 많았고, 비효율적인 코드들도 많이 볼 수 있었습니다. 코드를 조금 더 재사용성이 높게 작성한다면 더 효율적으로 시스템이 동작할 수 있었을 텐데, 아쉬움이 남았습니다. 이런 고민을 하면서 객체지향 프로그래밍에 대해 배워야겠다고 생각했습니다. 앞으로 객체지향을 배우면서 공부하고 느낀 점들을 정리해나가고자 합니다. 아래 내용은 생활코딩의 OOP 수업을 듣고 정리한 내용입니다.

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

prototype vs proto

함수를 표현하는 방법은 다양합니다. 정말 다양한 방식이 있지만, 크게 아래와 같이 두 가지 경우가 있다고 생각해봅시다.

 

 

 

function Person() {}
let Person = new Function();

 

 

 

함수는 자바스크립트에서는 객체로 평가받습니다. 그렇기 때문에 자바스크립트의 함수들은 프로퍼티를 가질 수 있습니다. 그렇다면, person이라는 예제를 실행시켜보면서, 내부적으로 어떤 구조적인 변화가 일어나는지 살펴보겠습니다.

 

 

 

출처 : 생활코딩 'JavaScript 객체 지향 프로그래밍 - 15. prototype vs proto'

 

 

 

만약 Person이라는 함수의 프로퍼티로 name, first, second를 정의하고, 객체를 생성하겠습니다. 그러면 Person이라는 객체가 생성되는데, 여기서 객체 하나가 더 생성됩니다. 더 생성되는 객체는 바로 Person의 prototype 객체입니다. 

 

Person 객체와 prototype 객체는 연관되어있고 관련되어있습니다. Person 객체는 내부적으로 프로토타입이라는 프로퍼티가 생기고, 그 프로퍼티는 Person's prototype 객체를 가리킵니다.

 

 

 

출처 : 생활코딩 'JavaScript 객체 지향 프로그래밍 - 15. prototype vs proto'

 

 

 

Person's prototype 객체도 Person의 소속이라는 것을 표시하기 위해 어딘가에 기록해야 하는데, 이를 위해 constructor 프로퍼티를 만들고, 그 프로퍼티는 Person을 가리킨다. 이를 통해 서로 간의 상호 참조를 합니다. 

 

 

 

출처 : 생활코딩 'JavaScript 객체 지향 프로그래밍 - 15. prototype vs proto'

 

 

 

만약 Person의 프로토타입으로 sum을 정의한다면, Person's prototype에 sum이라는 프로퍼티가 없으니, 이를 생성하고 그곳에 함수를 정의합니다. 그럼 이제 객체를 찍어내는 공장인 Person이라는 constructor 함수를 만들었습니다. 

 

 

 

출처 : 생활코딩 'JavaScript 객체 지향 프로그래밍 - 15. prototype vs proto'

 

 

 

그렇다면, Person이라는 함수를 활용해서 다른 객체를 만들어보겠습니다. 만약 kim이라는 변수에 객체를 생성한다면, 위의 사진과 같이 나올 것입니다. 여기서 Person이라는 constructor 함수가 실행되면서 this의 값이 세팅된 결과 프로퍼티 값들이 생성되면서 __proto__가 생성됩니다. 

 

 

 

출처 : 생활코딩 'JavaScript 객체 지향 프로그래밍 - 15. prototype vs proto'

 

 

 

그리고 이 kim이라는 객체가 생성될 때, __proto__라는 프로퍼티는 kim이라는 객체를 생성한 Person's prototype이 __proto__가 되게 됩니다. 그리고 우리는 Person.prototype을 통해서도 초록색에 접근할 수 있고 kim.__proto__를 통해서도 초록색에 접근할 수 있게 됐습니다. 

 

 

 

출처 : 생활코딩 'JavaScript 객체 지향 프로그래밍 - 15. prototype vs proto'

 

 

 

만약 kim 객체뿐 아니라 lee라는 객체를 만들어도 kim 객체와 같은 상황일 것이며, __proto__를 통해 자신을 생성한 함수의 프로토타입 객체를 가리킵니다. 이상태에서 kim.name이라는 것을 콘솔에 출력한다면 자바스크립트는 kim이라는 객체의 name이라는 프로퍼티가 있는지 확인합니다. 만약 name이 있다면 출력할 것이고, 혹시나 name이 없다면 __proto__가 가리키는 객체에 name이 있는지 다시 살펴봅니다.

 

 

 

출처 : 생활코딩 'JavaScript 객체 지향 프로그래밍 - 15. prototype vs proto'

 

 

 

그다음에 kim.sum()이라고 한다면, kim이라는 객체에는 sum이라는 메서드가 없으니, __proto__를 통해 가리키는 Person's prototype에 sum이 있는지를 찾습니다. 그곳에서 sum 메서드를 찾을 수 있으니 그것을 사용하게 됩니다.

 

지금까지 배운 것을 통해 Person의 프로토타입이라는 프로퍼티와 생성자 함수를 통해 만든 객체 kim, lee의 __proto__가 어떻게 다른가를 설명할 수 있으면 좋겠습니다. 

 

일단 제 생각으론, 프로토타입은 생성자 함수 안에 객체의 정보를 담는 객체의 프로퍼티라고 생각하고, __proto__는 생성자 함수를 통해 만들어진 객체가 만들어질 때 갖고 있던 정보를 기억하는 객체의 프로퍼티라고 생각합니다. 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

마치며

객체지향에 대한 기본을 쌓아가고 있습니다. 앞으로 포기하지 않고, 하나씩 지식을 쌓아 가다 보면 언젠가는 기초가 튼튼한 개발자가 될 수 있을 것이라 믿습니다. 제대로 된 방향으로 하나씩 공부하고 싶습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

출처