객체 지향 프로그래밍(3) - prototype과 __proto__

생활코딩 이고잉님의 강의를 보며 공부한 내용을 정리한 글 입니다

 

먼저 이해 해야할 전제 : 자바스크립트의 함수는 객체다. 객체이기 때문에 함수는 property를 가질 수 있다.

function Person(name, first, second){
  this.name = name;
  this.first = first;
  this.second = second;
}

위와 같이 Person이라는 함수를 정의하면, Person이라는 함수, 즉 객체가 생긴다. 그러나 이 객체만 생기는 것이 아니라, Person의 prototype이라는 객체도 함께 생긴다. 그리고 이 두 개의 객체는 서로 연결되어있다.

 

함수 Person을 정의하면 Person이라는 함수, 즉 객체가 생기고, 동시에 prototype 이라는 객체도 함께 생긴다.

이때, 객체 Person에는 내부적으로 prototype이라는 프로퍼티가 생기며, 그것은 Person의 prototype 객체를 가리키게 된다.

Person의 prototype 객체는 constructor 라는 프로퍼티를 만들고, 그것은 객체 Person을 가리키게 된다.

이렇게 함으로써 두 객체는 서로를 참조하는 관계가 되는 것이다.

 

이때, Person의 prototype에 어떤 함수를 정의하면 어떻게 될까?

Person.prototype.sum = function(){}; // Person의 prototype에 sum이라는 함수를 정의하고 있다.

Person의 prototype 프로퍼티가 가리키는 prototype 객체에 sum이라는 프로퍼티를 생성하고 함수를 정의하게 된다.

그리고, 생성자 Person을 가지고 kim이라는 인스턴스를 만들면, 해당 인스턴스 즉, 객체 kim 안에는 생성자 Person에서 정의한 속성들과 함께 __proto__라는 속성이 생긴다.

let kim = new Person('kim', 10, 20); //생성자 Person으로 kim이라는 인스턴스를 만들고 있다.
kim.sum() // 객체 kim이 자체적으로 가지고 있지 않은 함수 sum을 실행하면?
// __proto__가 가리키고 있는 Person의 prototype 객체에서 sum을 찾게 된다.

생성자 Person으로 kim이라는 인스턴스를 만들었다. 객체 kim은 __proto__라는 프로퍼티를 가지게 된다.

이때 객체 kim의 __proto__ 프로퍼티는 자신을 생성한 Person의 prototype 객체를 가리키게 된다. 따라서, 객체 kim에 어떤 함수를 직접적으로 정의해주지 않더라도, 자신의 생성자인 Person의 prototype객체에서 가지고 있는 해당 함수를 찾아서 사용할 수 있다.

 

그림에는 나와있지 않지만, 객체 Person과 prototype객체에도 __proto__라는 프로퍼티가 있다.(모든 객체는 __proto__ 프로퍼티를 가진다)

__proto__에서 constructor로, constructor에서 __proto__로 점점 상위의 객체를 찾아가다 보면 최종적으로 자바스크립트의 내장 객체인 Object가 나온다.

해당 부분 참고 : https://jongmin92.github.io/2017/03/14/JavaScript/understand-prototype/