[Modern JavaScript Deep Dive] 19장: 프로토타입

19장: 프로토타입

자바스크립트는 멀티 패러다임 프로그래밍 언어.

• 명령형
• 함수형
• 프로토타입 기반
• 객체 지향 프로그래밍 지원
• 프로토타입 기반 객체지향

클래스

• ES6 도입 but 기존의 프로토타입 기반 객체 지향 모델을 폐지하는 것 X
• 클래스도 함수이며 기존 프로토타입 기반 패턴의 문법적 설탕
• 그러나 생성자 함수보다 엄격하고, 생성자 함수에서 제공하지 않는 기능도 있어 단순한 문법적 설탕으로 보기보다는 새로운 객체 생성 메커니즘으로 보는 것이 더 합당 (??? 모순이 있잖슴)

19.1 객체지향 프로그래밍

객체: 속성을 통해 여러개의 값을 하나의 단위로 구성한 복합적인 자료구조

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

• 객체의 상태 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논라적인 단위로 묶어 생각
• 객체 = 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조
• 프로퍼티: 상태 데이터 / 메서드: 동작

---

19.2 상속과 프로토타입

상속: 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것

자바스크립트는 프로토타입을 기반으로 상속을 구현 -> 불필요한 중복 제거

Before

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
  this.getArea = function () {
    // Math.PI는 원주율을 나타내는 상수다.
    return Math.PI * this.radius ** 2;
  };
}
// 반지름이 1인 인스턴스 생성
const circle1 = new Circle(1);
// 반지름이 2인 인스턴스 생성
const circle2 = new Circle(2);
// Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는
// getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다.
// getArea 메서드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직하다.
console.log(circle1.getArea === circle2.getArea); // false
console.log(circle1.getArea()); // 3.141592653589793
console.log(circle2.getArea()); // 12.566370614359172

After

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
}
// Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를
// 공유해서 사용할 수 있도록 프로토타입에 추가한다.
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다.
Circle.prototype.getArea = function () {
  return Math.PI * this.radius ** 2;
};
// 인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);
// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는
// 프로토타입 Circle.prototype으로부터 getArea 메서드를 상속받는다.
// 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
console.log(circle1.getArea === circle2.getArea); // true
console.log(circle1.getArea()); // 3.141592653589793
console.log(circle2.getArea()); // 12.566370614359172

---

19.3 프로토타입 객체

• 상속을 구현하기 위해 사용
• 프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다.
• 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지며, 이 슬롯의 값은 프로토타입의 참조다.
• 객체 생성 방식에 따라 프로토타입이 결정되고 [[Prototype]]에 저장된다.
  ex) 객체 리터럴에 의해 생서된 객체의 프로토타입은 Object.prototype
  생성자 함수에 의해 생성된 객체의 프로토타입은 생성자 함수의 prototype에 바인딩되어있는 객체
• 모든 객체는 하나의 프로토타입을 갖고, 모든 프로토타입은 생서자 함수와 연결되어 있다.

__proto__ 접근자 프로퍼티

• 모든 객체는 \_proto_\ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다.
• 접근자 프로퍼티 특성
  • 접근자 프로퍼티는 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수(accessor function) 즉 [[Get]], [[Set]] 프로퍼티 어트리뷰트로 구성된 프로퍼티다.
  • Object.prototype의 접근자 프로퍼티 proto는 getter, setter(접근자 함수 = [[Get]], [[Set]] 프로퍼티 어트리뷰트에 할당된 함수)를 통해 [[Prototype]] 내부 슬롯의 값, 즉 프로토타입을 취득하거나 할당한다.
• 상속을 통해 사용
  • 객체가 직접 소유하는 프로퍼티가 아니라 Object.prototype의 프로퍼티
  • 모든 객체는 상속을 통해 Object.prototype.__proto__ 접근자 프로퍼티를 사용할 수 있다.
• 프로토타입을 왜 이 프로퍼티로 접근하는가
  • 상호 참조에 의해 프로토타입 체인이 생성(순환참조)되는 것을 방지
  • 프로토타입은 단방향 링크드 리스트로 구현되어야

함수 객체의 prototype 프로퍼티

함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다.

non-constructor (메서드 - ES6 메서드 축약 표현을 칭함, 화살표 함수)는 prototype 프로퍼티를 소유하지 않으며 프로토타입도 생성하지 않는다.

모든 객체의 __proto__와 함수 객체의 prototype 프로퍼티는 결국 동일한 프로토타입을 가리킨다.

• __proto__ 접근자 프로퍼티
  • 모든 객체 소유
  • 프로토타입의 참조
  • 객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용
• prototype 프로퍼티
  • constructor 소유
  • 프로토타입의 참조
  • 생성자 함수가 자신이 생성할 객체의 프로토타입을 할당하기 위해 사용

function Person(name) {
    this.name = name;
}
const me = new Person('Lee');
console.log(Person.prototype === me.__proto__);

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

모든 프로토타입은 constuctor 프로퍼티를 갖는다. 이는 prototype 프로퍼티로 자신을 참조하고 있는 생성자 함수를 가리킨다.

---

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

• 생성자 함수에 의해 생성된 인스턴스
  • constructor 프로퍼티가 가리키는 건(= 생성한 게 누구냐면) 인스턴스를 생성한 생성자 함수
• 리터럴 표기에 의해 생성된 객체(인스턴스를 생성하지 않는 객체 생성)
  • constructor 프로퍼티가 가리키는 건(= 생성한 게 누구냐면) 객체를 생성한 생성자 함수라고 단정할 수 없다
    ex. 객체 리터럴로 생성한 객체는 Object 생성자 함수로 생성한 객체와 비교했을 때 세부 처리 내용이 다름
  • 그렇지만 리터럴 표기로 생성한 객체나, 그렇지 않은 객체나 그 특성은 비슷 -> constructor가 같다고 치자
    ex. 객체 리터럴의 생성자 함수는 Object

---

19.5 프로토타입의 생성 시점

앞 장의 결론: 리터럴 표기법에 의해 생성된 객체도 생성자 함수와 연결됨

-> 결국 모든 객체는 생성자 함수와 연결되어 있다.

프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다.
<- 프로토타입과 생성자 함수는 쌍으로 존재하니까

사용자 정의 생성자 함수

• constructor(생성자 함수로서 호출할 수 있는 함수)
  • 함수 정의가 평가되어 함수 객체를 생성하는 시점(런타임 이전)에 프로토타입도 생성
  • 프로토타입도 프로토타입을 갖는다 - 이는 항상 Object.prototype
• non-constructor(생성자 함수로서 호출할 수 없는 함수 - 메서드 축약 표현, 화살표 함수)
  • 프로토타입이 생성되지 않는다

빌트인 생성자 함수

• 빌트인 생성자 함수(Object, String, Number, Function, Array, RegExp, Date, Promise 등)
  • 모든 빌트인 생성자 함수는 전역 객체(브라우저의 window, Node.js 의 global)가 생성되는 시점 생성
  • 빌트인 생성자 함수가 생성되는 시점(= 전역 객체가 생성되는 시점 = 다른 객체들이 생성되기 이전)에 프로토타입 생성

=> 어떤 객체를 생성하면 이미 존재하고 있는 빌트인 생성자 함수의 프로토타입이 생성된 객체의 [[Prototype]] 내부 슬롯에 할당

---

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

객체 생성 방식(객체 리터럴 / Object 생성자 함수 / 생성자 함수 / Object.create 메서드 / 클래스) 공통점: OrdinaryObjectCreate에 의해 생성

• 자신이 생성할 객체의 프로토타입을 인수로 전달받음
• 추가할 프로퍼티 목록을 옵션으로 전달할 수 있음
• 빈객체 생성 후, 추가 프로퍼티 목록이 있으면 프로퍼티를 객체에 추가
• 인수인 프로토타입을 생성할 [[Prototype]] 내부 슬롯에 할당
• 생성한 객체 반환

=> 프로토타입은 OrdinaryObjectCreate 인수에 의해 결정

=> 이 인수는 객체 생성 시점에 생성 방식에 따라 결정

객체 리터럴

OrdinaryObjectCreate 인수(프로토타입): Object.prototype

자체 constructor는 없지만 프로토타입의 constructor를 자기 것처럼 씀

const obj = { x: 1 };
console.log(obj.constructor === Object); // true

Object 생성자 함수

OrdinaryObjectCreate 인수(프로토타입): Object.prototype

객체 리터럴 vs Object 생성자 함수

• 객체 리터럴: 내부에 프로퍼티 추가
• Object 생성자 함수: 빈 객체 생성 이후 프로퍼티

생성자 함수

OrdinaryObjectCreate 인수(프로토타입): 생성자 함수의 prototype 프로퍼티에 바인딩되어 있는 객체

• Object.prototype에는 빌트인 메서드가 있지만, 사용자 정의 생성자 함수의 프로토타입은 기본적으로는 constructor 뿐이다.
• 그렇지만 프로토타입 메서드를 추가하는 것도 가능하다.

• function Person(name) {
      this.name = name;
  }
  
  Person.prototype.sayHello = function () {
      console.log(`Hi, I am ${this.name}`);
  };

---

19.7 프로토타입 체인

• 객체의 프로퍼티에 접근할 떄, 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색
• 자바스크립트가 객체지향 프로그램밍의 상속을 구현하는 메커니즘
• 프로토타입 체인 최상위 객체는 언제나 Object.prototype
• 그 종점에서도 프로퍼티 검색할 수 없으면 에러가 아닌 undefined를 반환

c.f. 스코프체인: 식별자 검색을 위한 매커니즘(프로퍼티가 아닌 식별자는 스코프 체인에서 검색)

---

19.8 오버라이딩과 프로퍼티 섀도잉

• 프로토타입 프로퍼티: 프로토타입이 소유한 프로퍼티(메서드 포함)
• 인스턴스 프로퍼티: 인스턴스가 소유한 프로퍼티
• 프로퍼티 섀도잉: 상속 관계에 의해 프로퍼티가 가려지는 현상
  • ex) 프로토타입 프로퍼티 sayHello가 있는 상테에서, 같은 이름으로 인스턴스에 프로퍼티를 추가할 경우 -> 프로토타입 프로퍼티 덮어쓰기 (X), 인스턴스 프로퍼티로 추가(O)
    -> 인스턴스 메서드 sayHello가 프로퍼티 메서드 sayHello를 오버라이딩
    ->프로토타입 메서드 sayHello는 가려짐
  • 섀도잉된 상태에서 삭제할 때는 인스턴스 메서드가 삭제되고 프로토타입 메서드는 남아있음
  • 프로토타입 프로퍼티를 삭제하려면 직접 프로토타입에 접근해야
    ex. delete Person.prototype.sayHello

c.f. 오버라이딩 vs 오버로딩

• 오버라이딩: 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해 사용하는 방식
• 오버로딩: 함수 이름은 같지만 매개변수에 의해 메서드를 구별해 호출하는 방식

프로토타입의 교체

부모 객체인 프로토타입을 동적으로 변경할 수 있음

생성자 함수에 의한 프로토타입 교체

예제 19-41 생성자 함수가 왜 이렇게 생겼는지 모르겠다

인스턴스에 의한 프로토타입 교체

Object.setPrototypeOf(me, parent);
// me 객체의 프로토타입은 parent 객체로 교

객체의 프로토타입이 바뀌는 것이지, me의 원래 프로토타입인 Person이 영향을 받는 것은 아니다.

프로토타입 교체를 통해 객체간의 상속관계를 동적으로 변경하는 것은 꽤나 번거롭다.

따라서 프로토타입은 직접 교체하지 않는 것이 좋다.

 

---

19.10 instance of 연산자

객체 instanceof 생성자 함수

• true: 생성자 함수's prototype 객체가 좌변 객체의 프로토타입 체인 상에 존재할 때
• false: 그렇지 않을 때

---

19.11 직접 상속

Object.create

/** 
/* 지정된 프로토타입 및 프로퍼티를 같은 새로운 객체를 생성하여 반환한다.
/* @params {Object} prototype - 생성할 객체의 프로토타입으로 지정할 개체
/* @params {Object} [properiesObject] - 생성할 객체의 프로퍼티를 갖는 객체
/* @return {Object} 지정된 프로토타입 및 프로퍼티를 갖는 새로운 객체
/* 
Object.create(prototype, [, properiesObject];

객체 리터럴 내부에서 __proto__에 의한 직접 상속

const myProto = { x : 10 };
const obj = {
    __proto__: myProto;
};

---

19.12 정적 프로퍼티/메서드

• 생성자 함수 객체가 소유한 프로퍼티/메서드
• 생성자 함수가 생성한 인스턴스로 참조/호출할 수 없다(생성자 함수로 참조/호출 가능)19.13 프로퍼티 존재 확인
• 프로퍼티 키 in 객체: 객체 내 특정 프로퍼티 존재하는지 확인
• Reflect.has(객체, 프로퍼티 키)
• 객체.hasOwnProperty(프로퍼티 키)19.14 프로퍼티 열거
• for (변수 선언문 in 객체) {...} : 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거, 상속받은 프로퍼티도 열거
• Object.keys : 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환
• Object.values (ES8 도입): 객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환
• Object.entries (ES8 도입): 객체 자신의 열거 가능한 프로퍼티 키와 값의 쌍을 배열에 담아 반환

---

19.13 프로퍼티 존재 확인

• 프로퍼티 키 in 객체: 객체 내 특정 프로퍼티 존재하는지 확인
• Reflect.has(객체, 프로퍼티 키)
• 객체.hasOwnProperty(프로퍼티 키)19.14 프로퍼티 열거
• for (변수 선언문 in 객체) {...} : 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거, 상속받은 프로퍼티도 열거
• Object.keys : 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환
• Object.values (ES8 도입): 객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환
• Object.entries (ES8 도입): 객체 자신의 열거 가능한 프로퍼티 키와 값의 쌍을 배열에 담아 반환

---

19.14 프로퍼티 열거

• for (변수 선언문 in 객체) {...} : 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거, 상속받은 프로퍼티도 열거
• Object.keys : 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환
• Object.values (ES8 도입): 객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환
• Object.entries (ES8 도입): 객체 자신의 열거 가능한 프로퍼티 키와 값의 쌍을 배열에 담아 반환