[모던자바스크립트] 19. 프로토타입 - 1

🐣 Intro

• 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
• 자바스크립트를 이루고 있는 거의 "모든 것"이 객체

✅ 객체지향 프로그래밍

• 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임
  • 실세계의 실체를 인식하는 철학적 사고를 프로그래밍에 접목
  • 실체 : 특징이나 성질을 나타내는 속성을 가지고 있음
• 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조인 객체를 통해 프로그램을 표현하는 것
  • 추상화 : 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것
• 객체의 상태를 나타내는 데이터(프로퍼티)와 상태 데이터를 조작할 수 있는 동작(메서드)을 하나의 논리적인 단위로 묶어 생각

✅ 상속과 프로토타입

• 상속
  • 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것
  • 불필요한 중복을 제거 => 기존의 코드를 적극적으로 재사용
• 자바스크립트는 프로토타입을 기반으로 상속을 구현

✅ 프로토타입 객체

• 프로토타입 객체
  • 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용
  • 어떤 객체의 상위 객체의 역할을 하는 객체로 다른 객체에 공유 프로퍼티(메서드 포함)을 제공
• 객체가 생성도리 때 객체 생성 방식에 따라 프로토타입이 결정되고 [[Prototype]]에 저장
  • 직접 내부 슬롯에 접근할 수 없지만, __proto__접근자 프로퍼티를 통해 자신의 프로토타입에 간접적으로 접근할 수 있음
• 모든 객체는 하나의 프로토타입을 갖고, 모든 프로토타입은 생성자 함수와 연결

✅ __proto__접근자 프로퍼티

✔️ __proto__는 접근자 프로퍼티!!

• 모든 객체는 __proto__접근자 프로퍼티를 통해 자신의 프로토타입([[Prototype]] 내부 슬롯)에 간접적으로 접근할 수 있음
  • 원칙적으로 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않지만 간접적으로 접근할 수 있는 수단을 제공함
• Object.prototype의 접근자 프로퍼티인 __proto__는 getter/setter함수라고 부르는 접근자함수를 통해 프로토타입을 취득하거나 할당
• __proto__ 접근자 프로퍼티는 상속을 통해 사용됨
• __proto__ 접근자를 통해 간접적으로 접근하는 이유
  • 프로토타입 체인은 단방향 링크드 리스트로 구현되어 프로퍼티 검색 방향이 한쪽 방향으로만 흘러가야함

✔️ 함수 객체의 prototype 프로퍼티

• 함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 지칭
  • 일반 객체는 prototype 프로퍼티를 소유하지 않음
• 모든 객체가 가지고 있는 __proto__접근자 프로퍼티와 함수 객체만 가지고 있는 prototype프로퍼티는 동일한 프로퍼티를 가지지만, 사용하는 주체가 다름

구분	소유	값	사용 주체	사용 목적
__proto__접근자 프로퍼티	모든 객체	프로토타입 참조	모든 객체	객체가 자신의 프로토타입에 접근, 교체
prototype프로퍼티	constructor	프로토타입 참조	생성자 함수	생성자 함수 자신이 생성할 객체의 프로토타입을 할당

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

• 리터럴 표기법(const obj = {})에 의해 생성된 객체도 가상적인 생성자 함수를 갖는다.

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

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

  리터럴 표기법	생성자 함수	프로토타입
  객체 리터럴	Object	Object.prototype
  함수 리터럴	Function	Function.prototype
  배열 리터럴	Array	Array.prototype
  정규 표현식 리터럴	RegExp	RegExp.prototype

✅ 프로토타입의 생성 시점

• 프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성

✔️ 사용자 정의 생성자 함수와 프로토타입 생성 시점

• 생성자 함수로 호출할 수 있는 함수(constructor)는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성

✔️ 빌트인 생성자 함수와 프로토타입 생성 시점

• 모든 빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성

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

• 객체 생성 방법
  • 객체 리터럴
  • Object 생성자 함수
  • 생성자 함수
  • Object.create 메서드
  • 클래스
• 모든 객체는 추상 연산 OrdinaryObjectCreate에 의해 생성된다는 공통점이 있음

✔️ 객체 리터럴에 의해 생성된 객체 프로토타입

• Object.prototype을 프로토타입으로 갖게 되며, Object.prototype을 상속받음
• 객체 리터럴 내부에 프로퍼티를 추가

✔️ Object 생성자 함수에 의해 생성된 객체 프로토타입

• Object.prototype을 프로토타입으로 갖게 되며, Object.prototype을 상속받음
• Object 생성자 함수 방식은 일단 빈 객체를 생성한 이후 프로퍼티를 추가

✔️ 생성자 함수에 의해 생성된 객체 프로토타입

• 생성자 함수에 의해 생성되는 객체의 프로토타입은 생성자 함수의 prototype 프로퍼티에 바인딩되어 있는 객체