[TIL] #19. 프로토타입

2022.5.26. (목)

1. 오늘의 소감

• 프로토타입… 은 도대체 무엇인가…? ‘모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿 객체'…? ‘자신을 만들어낸 객체의 원형'…? 무슨 소린데….
• 내게 대 혼란을 안겨준 프로토타입. 사실 블로깅해서 39기 전용 노션에 올려야되는데, 못했다. 이해가 되어야하지ㅜㅠ. 익숙치 않고 난해한 설명이 이어져서 머릿속이 혼돈의 도가니탕이었다. 설명을 읽어도 머릿속에 안들어오는 느낌… 그래도 동기님들이 올려준 레퍼런스 자료를 읽고, 유튜브 강의도 듣다보니 어느정도 개념이 명료해진게 있다.
• 동기분들이 공유해준 소중한 레퍼런스들…🥹
  크리스의 테코톡 - prototype자바스크립트 : 프로토타입의 이해
• 자바스크립트는 왜 프로토타입을 선택했을까
• 일단, 내가 다양한 사이트와 블로그에서 읽은 프로토타입 설명을 듣고 더 헷갈리게 된 이유는 함수의 속성이 .prototype 과 부모객체를 참조하는 모든 객체의 속성 [[Prototype]] 을 혼동해서였다!!!
• ‘자신을 만들어낸 원형 객체' 는 [[Prototype]] 속성이 참조하고 있는(참조 : 주소를 저장한) 부모 객체를 뜻했다. 나는 처음에 이 설명을 보고, 어라? .prototype 속성에는 부모 객체가 아니라 자신의 메서드가 담겨있는데? 그럼 함수의 부모 객체는 자기 자신인가? Object가 나와야 되는 거 아냐…? 하며 혼동이 온 것이었다! 반면, ‘모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿 객체'라는 설명은 함수의 .prototype 속성에 들어있는 함수의 프로토타입 객체를 뜻했다.
• 이 두가지 설명을 다 ‘프로토타입' 하나로 생각했으니 이해가 안 될 수 밖에…🥲

2. 학습한 키워드

• 프로토타입, 프로토타입 체인, .prototype, __proto__, [[Prototype]], 프로토타입 객체, constructor, 클래스-인스턴스-프로토타입의 관계, 프로토타입 체인

3. 키워드를 바탕으로 학습 내용 설명해보기

• 프로토타입(.prototype 으로 접근할 수 있는 함수의 프로토타입 객체 의미)이란, 모든 함수(클래스) 객체들이 상속을 위해 가지는 템플릿 객체이다. 이 객체는 함수만 가지며, 함수가 선언될 때 자동으로 이 함수의 프로토타입 객체가 자동 생성된다. 이 프로토타입 객체는 함수(클래스)의 .prototype 속성으로 접근할 수 있다.
• 프로토타입 객체 안에는 constructor 속성이 있는데, 이 속성은 원래 함수(클래스)를 참조하고 있다. 따라서 함수의 .prototype → 함수의 프로토타입 객체 참조, 함수의 프로토타입 객체의 .contructor → 원래 함수(클래스)를 참조한다. 즉, 서로를 참조하는 순환 참조 형태다.
• 프로토타입 객체에는 그 클래스의 속성과 메소드들이 담겨있다. (주로 메소드들이 담겨있다). 프로토타입에 들어가 있는 메소드들은 클래스로부터 생성된 인스턴스들이 사용할 수 있다. 즉 자식 객체와 메소드를 공유할 수 있다.
• 왜 프로토타입 객체에 메소드들이 들어있을까? 함수 안에 this.func = function(){} 이런식으로 인스턴스 각각에 메소드를 생성해주면, 메모리 낭비가 심하기 때문이다. 100만개의 인스턴스를 만든다고 하면, 각각 100만개의 메소드가 들어있다는 것 불필요하다. 하나의 메소드만 함수의 프로토타입 객체에 넣어두고 모든 인스턴스들이 이 메소드를 공유하면 된다.
• .prototype 은 함수(클래스)에서 자신의 인스턴스들에게 같은 속성과 메소드를 쓰게 해주고 싶을 때 사용한다.
• __proto__는 객체와 객체를 연결하는 링크다. 이 속성은 최상위 클래스인 Object 의 프로토타입에 들어있는 속성이기 때문에 모든 객체가 사용할 수 있다. proto 속성을 사용해 모든 객체에 있는 은닉 속성인 [[Prototype]]에 접근할 수 있다. [[Prototype]] 속성은 자신을 생성한 원형 객체(부모 객체)의 정보를 담고있다. 원형 객체가 함수(클래스)일 경우 그 함수의 프로토타입 객체(class.prototype)을 담고있다. 즉, 인스턴스의 경우 인스턴스.__proto__ === 클래스.prototype 가 된다. 자식 클래스인 경우 자식클래스.__proto__ === 부모클래스.prototype 가 된다.
• 클래스와 인스턴스와 프로토타입의 관계

//Person 클래스의 인스턴스 kim 이 있다고 했을 때

kim.__proto__ === Person.prototype;  //true
Person.prototype.constructor === Person;   //true
Person.prototype.sleep === kim.sleep;  //true

//주의
Person.__proto__ === Function.prototype;  //true
Person.prototype.__proto__ === Object.prototype;  //true

• 인스턴스 객체 kim 에게서 sleep 이라는 메서드를 찾는다고 해보자. 어떤 동작이 일어날까? 우선 객체 kim 이 sleep을 가지고 있는지 찾는다. 없다면? kim.proto 로 부모클래스.prototype 에 접근한다. 부모클래스의 프로토타입에도 sleep이 없다면? 또 다시 부모클래스.prototype.proto 를 통해 부모의 부모클래스.prototype에 접근한다. 거기에도 없다면? 당연히 부모의 부모의 부모….. 자, 이렇게 계속 올라가서 해당 메소드(또는 속성)을 찾아낸다.→ 만약 sleep 이라는 메소드가 최상위 클래스 Object의 prototype 에도 없다면? Object.prototype의 proto 로 Object의 [[Prototype]] 에 접근하게 되고, Object는 최상위 클래스이다보니 [[Prototype]] 값인 null을 만나게 된다. 프로토타입 체인을 값을 찾거나, null 을 만나면 종료된다.
• ⇒ 이게 바로 프로토타입 체인!
• 사실 proto 라는 값은 실제 코딩에서는 안 쓴다. 왜냐? 부모 객체의 메소드는 proto 없이 그냥 사용해도 되니까!
• Object 의 toString() 메소드를 쓰겠다고 arr.proto.toString() 이렇게 쓸 필요 없이, 그냥 arr.toString() 하면 된다.
• 게다가 proto MDN 문서에 가보면 이 속성을 쓰지말라는 주의 문구가 잔뜩 써있다. 부모 객체의 정보를 알고 싶다면 대신, Object.getPrototypeOf()를 사용하자!