[딥다이브] 19. 프로토타입(1)

자바스크립트는 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어

 

클래스와 생성자 함수는 프로토타입 기반의 인스턴스를 생성하지만 정확히 동일한 동작은 아님

클래스가 더 엄격하며 추가 기능 제공(25장 클래스에서 계속)

 

19.1 객체지향 프로그래밍

원시 타입 값을 제외한 자바스크립트의 모든 값은 객체(함수, 배열, 정규 표현식 등)

 

프로그램을 독립적인 객체의 집합으로 표현하려는 패러다임

객체의 상태 데이터: 프로퍼티, 동작: 메서드

 

19.2 상속과 프로토타입

// 1
function Circle(radius) {
  this.radius = radius;
  this.getArea = function () {
    return Math.PI * this.radius ** 2;
  }
}

// 2
function Circle(radius) {
  this.radius = radius;  
}

Circle.prototype.getArea = function () {
  return Math.PI * this.radius ** 2;
}

1은 인스턴스 생성 시마다 메서드가 중복 생성되고

2는 모든 인스턴스가 동일한 메서드를 상속받아 사용할 수 있음

 

상속: 코드 재사용 관점에서 유용

 

[[Prototype]]은 객체가 생성될 때 방식에 따라 결정됨

 

19.3 프로토타입 객체

1. __proto__ 접근자 프로퍼티

객체가 자신의 [[Prototype]]에 간접적으로 접근할 수 있게 해줌

상호 참조에 의한 프로토타입 체인 생성을 방지(프로토타입 체인은 단방향 연결 리스트여야 함)

직접 상속으로 Object.prototype(최상위 객체)를 상속받지 않는 객체를 생성할 수도 있음

 

__proto__ (리턴 undefined)보다 Object.getPrototypeOf(객체) (리턴 null) 사용 권장

프로토타입 교체 시 Object.setPrototypeOf(객체, 프로토타입) 사용

 

2. 함수 객체의 prototype 프로퍼티

생성자 함수로 생성될 인스턴스의 프로토타입

=> ES6 메서드 축약 표현으로 정의한 메서드와 화살표 함수(non-constructor)는 소유하지 않음 

구분	소유	값	사용 주체	사용 목적
__proto__ 접근자 프로퍼티	모든 객체	프로토타입의 참조	모든 객체	객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용
prototype 프로퍼티	constructor	프로토타입의 참조	생성자 함수	생성자 함수가 자신이 생성할 객체(인스턴스)의 프로토타입을 할당하기 위해 사용

 

3. 프로토타입의 constructor 프로퍼티와 생성자 함수

모든 프로토타입은 constructor 프로퍼티를 가짐

constructor 프로퍼티는 prototype 프로퍼티로 자신을 참조하고 있는 생성자 함수를 가리킴

 

4. 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입

리터럴 표기법{}에 의해 생성된 객체도 상속을 위해 프로토타입 필요 = 가상적인 생성자 함수를 가짐

 

프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재

 

객체 리터럴로 생성한 객체와 Object 생성자 함수로 생성한 객체

함수 리터럴로 생성한 함수(함수 선언문, 함수 표현식)와 Function 생성자 함수로 생성한 함수

- 스코프, 클로저 등의 차이가 있지만 함수로서 동일한 특성을 가짐

 

19.5 프로토타입의 생성 시점

= 생성자 함수가 생성되는 시점

 

1. 사용자 정의 생성자 함수의 프로토타입 생성 시점

함수 정의가 평가되어 함수 객체를 생성하는 시점 [[Construct]]

= 런타임 이전에 자바스크립트 엔진에 의해 평가됨

 

생성된 프로토타입의 프로토타입은 언제나 Object.prototype

 

2. 빌트인 생성자 함수의 프로토타입 생성 시점

전역 객체(window, global)가 생성되는 시점

 

19.6 객체 생성 방식과 프로토타입의 결정

객체 리터럴: Object.prototype

Object 생성자 함수: Object.prototype

생성자 함수: 생성자 함수의 prototype 프로퍼티에 바인딩되어 있는 객체

Object.create 메서드

클래스

 

OrdinaryObjectCreate(생성할 객체의 프로토타입, 생성할 객체에 추가할 프로퍼티 목록(optional))

빈 객체 생성, 프로퍼티(optional) 추가, [[Prototype]] 할당, 객체 반환

= 전달되는 인수에 의해 프로토타입이 결정됨

 

Object.prototype

constructor

hasOwnProperty

isPrototypeOf

propertyIsEnumerable

toLocaleString

toString

valueOf

get __proto__

set __proto__

 

생성자 함수의 프로토타입

constructor

생성자함수.prototype.tempFunction으로 추가한 메서드

 

19.7 프로토타입 체인

 

// me.hasOwnProperty('name')의 실제 동작
Object.prototype.hasOwnProperty.call(me, 'name');

 

프로토타입 체인: 상속과 프로퍼티 검색을 위한 메커니즘

스코프 체인: 식별자 검색을 위한 매커니즘