[토의] prototype 상속에 대해.

[Markers]

질문

prototype 에 대해 깔끔한 설명과 개념 정리.

상세내용

책을 읽고 정리하면서 보니 다른 언어의 클래스의 상속과 비교했을때

보통 비유를 하기를 클래스는 형틀이나 설계도
그로부터 파생된 객체(인스턴스)를 실물이 있는 자동차나 물건 같은 것으로 비유를 합니다.

근데 이번에 본 것은 생성자 함수에 프로퍼티(변수, 함수) 등을 직접적으로 할당하면 스태틱 변수나 함수처럼 동작한다고 보았습니다.

또 일반적으로 메모리 효율 측면을 위해서 객체가 사용할 함수는 '프로토타입 객체' 라는 객체에 할당을 해야 인스턴스가 사용이 가능하다고 보았습니다.

그래서 다른 언어는 단순한 클래스와 인스턴스 관계로 상속을 좀 이해했는데

자바스크립트는 생성자 함수, 생성자 함수의 프로토타입객체, 객체(인스턴스) 관계가 좀 정리가 안되는 느낌입니다.

또 proto 접근자 라는 녀석도 많이 헷갈리게 하구요.

이 부분에 대해서 뭔가 빗대어 설명이 가능하거나, 깔끔하게 정리가 가능할까요?

참고

[jessi68]

제 개인적인 생각으로 빗대어 설명을 하자면, 제 생각에는 음 이제 객체라는 것도 다른 언어랑 달리 틀로 만들어진 실물이 아니라 실물을 상속받은 더 구체적인 형체인 느낌인 것 같아요! 예를 들어 person 이라는 class 가 있고 이 person 타입의 변수 person1 이라고 하면 person 은 object를 상속받고 person1 은 person을 상속 받는 느낌이요.

[live-small]

프로토타입, 프로퍼티, 프로토 .. 등등 이름도 비슷해서 정말 헷갈리더라구요.
저는 영상 을 통해 큰 가닥을 잡고, 다시 책 읽으면서 이해했는데요, 한번 참고해보시면 좋을 거 같아요.

정리

제가 실수한 부분이 있다면, 알려주시면 감사하겠습니다.

• 생성자함수가 생성될 때, 생성자 함수의 프로토타입 객체도 함께 생성되며, 내부 프로퍼티로 서로를 바인딩한다.
• 생성자함수로 인스턴스를 만들경우, 인스턴스는 __ proto __ 프로퍼티로 생성자함수 프로토타입 객체를 참조한다.
• 인스턴스의 __ proto __ 프로퍼티를 통해, 부모의 프로퍼티를 이용(=상속)할 수 있다.
• 프로토타입 체인을 통해 상속을 구현한다.

세부설명

생성자 함수 : 템플릿, 클래스
인스턴스: 템플릿에 값을 할당해서 만든 객체

생성자 함수로 인스턴스를 만드는데, 생성자 함수에 있는 프로퍼티(상태 데이터), 메서드(동작)를 참조하는게 아니라,
새롭게 만들어서 할당받습니다.
즉, 생성자 함수의 메소드 === 인스턴스의 메소드를 일치비교한다면, false인거죠.

하나의 생성자 함수로 100개, 1000개 이상의 인스턴스를 만들경우, 메모리에 동일한 프로퍼티, 메서드가 엄청 많아지게 되죠?
하지만, 참조하는 경우라면 중복을 줄일 수 있을 겁니다.
*물론, 모든 인스턴스가 동일한 값을 가지는 것(프로퍼티보단 메서드)에 한해 참조하는게 좋습니다.
어떻게 참조할 수 있는지를 알아보기 전에, 프로토타입과 생성자 함수의 관계를 설명하겠습니다.

프로토타입과 생성자 함수의 관계

생성자 함수는 자신의 프로토타입 객체가 있습니다.
생성자 함수가 생성되는 시점에 함께 생성되고,
서로를 인지하기 위해, 생성자 함수는 prototype 프로퍼티로,
프로토타입 객체는 constructor 프로퍼티로 서로를 포인팅하고 있습니다.

인스턴스와 생성자함수 프로토타입 객체의 관계

function person(name,age) {
   this.name = name; 
   this.age = age; 
   this.getPersonData = function() {
    return `name: ${name}, age: ${age}`; 
   }; 
}

const test = new person('bear', 20); // (1) 

(1)의 코드와 같이 new 키워드를 통해 person를 토대로 인스턴스를 만듭니다.
이때, 인스턴스는 생성자 함수 프로토타입 객체에 접근할 수 있는 __ proto __ 프로퍼티가 생성됩니다.
즉, 정리하자면

person -----(a)----- person.prototype -----(b)------ test

(a): 프로토타입 접근 - person.prototype 생성자함수 접근 - person.prototype.constructor
(b)는 프로토타입 접근 - test.__proto__

어떻게 프로토타입으로 상속을 구현할까?

인스턴스는 __ proto __프로퍼티로 생성자함수의 프로토타입에 접근할 수 있습니다.
현재 인스턴스에 없는 프로퍼티, 메서드가 호출되면 프로토타입 체인(p285)에 의해서 다음 프로토타입으로 가서 검색합니다.

이렇게 프로토타입 객체에 공통 메서드를 할당해두면,
100개의 인스턴스를 만들어 100개의 공통메서드를 만드는 것대신,
자신의 프로토타입에서 메서드를 참조해(상속받아) 이용할 수 있습니다.