[자바스크립트] 섹션 13. 프로토타입

제대로 파는 자바스크립트(JavaScript) - by 얄코

(https://www.inflearn.com/course/제대로-파는-자바스크립트/dashboard)

섹션 13. 프로토타입

목차
13-1. 프로토타입의 개념
13-2. 프로토타입과 상속

13-1. 프로토타입의 개념

I. 프로토타입 prototype

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원하는 언어

 

자바스크립트의 모든 객체는 Prototype을 가짐

[[Prototype]]을 펼쳐 확인해보기

 

빈 객체임에도 아래 메서드들이 사용 가능한 것은 프로토타입 때문

 

II. Object

Object는 모든 것의 조상

각 [[Prototype]]의 메서드들 확인

각 객체의 [[Prototype]]의 [[Prototype]]은 Object

 

constructor 항목에서 각각의 생성자 확인 가능

(객체 리터럴({} 등)의 생성자는 Object()임을 알 수 있음)

 

프로토타입 체인

특정 객체에 호출된 프로퍼티가 없다면 프로토타입을 거슬러 올라감

예: Array에는 valueOf가 없지만 그 프로토타입인 Object에는 있으므로 호출 가능

 

III. 코드로 프로토타입에 접근하기

1. __proto__ 접근자 사용 (Object.prototype의 프로퍼티)

Deprecated - 사라질 기능. 사용 권장되지 않음

 

같은 종류는 프로토타입을 공유함

 

공통 조상(최상위)은 Object임을 확인

 

그 위로는 null

 

2. Object.getPrototypeOf

수정할 때는 Object.setPrototypeOf 사용

__proto__ 대신 이 기능을 사용하기

 

3. 생성자 함수에서는 prototype으로 프로토타입 접근 가능

[[Prototype]]이 두 단계로 있음 (Person - Object)

 

(참고) 생성자 함수의 prototype 속성의 객체에 접근하기
   1. s1.constructor.prototype
   2. s1.__proto__
   3. Object.getPrototypeOf(s1)

 

 

IV. 인스턴스 vs. 프로토타입 프로퍼티

 

인스턴스의 로그를 펼쳐 각 함수가 속한 레벨 확인

- introduce: 만들어지는 인스턴스마다 각각 있음

- introEng: 프로토타입에만 있음 → 메모리 절약

 

메모리 사용을 최소화하려면 아래와 같이 작성

 

인스턴스 레벨과 프로토타입 프로퍼티들 비교

 

프로토타입 레벨의 함수를 인스턴스 레벨에서 덮어쓰기 가능

 

클래스에도 적용 가능

프로토타입 확인하기

 

클래스의 메서드로 만들어도 동일

---

13-2. 프로토타입과 상속

다음과 같은 상황에서 Eagle이 Bird로부터 상속받도록 만들기

 

I. 프로토타입으로 상속하기

Object.create 메서드

주어진 것을 프로토타입으로 갖는 객체를 생성

상속을 먼저 하고 자체 프로토타입 프로퍼티 입력

 

Object.create(Bird.prototype) 대신 Bird.prototype 대입 결과 비교

- Eagle.prototype은 Bird.prototype 객체 자체를 참조

- Bird.prototype과 Eagle.prototype는 완전히 같은 객체가 됨

 

 

- Eagle.prototype에 추가한 hunt 메서드를 Bird 인스턴스에서도 사용 가능

 

II. 부모의 생성자 활용하기

생성자에서 중복되는 부분 위임

class에서는 constructor에서 super 사용

 

Bird와 Eagle 확인

 

III. 클래스로 구현

클래스 역시 프로토타입을 기반으로 구현됨

 

클래스와 프로토타입

클래스의 메서드는 프로토타입으로 들어가게 됨

 

extends: 프로토타입 상속도를 만듦

 

인스턴스의 클래스/생성자함수 이름 출력

무엇의 인스턴스인지 프로그램상에서 이름으로 파악할 때 유용

 

IV. Mixin

Object.assign으로 조립하기

- 상속: 한 부모로부터만 물려받음

- 믹스인: 여럿을 조합하여 가져올 수 있음

 

 

FIN.