holdanddeepdive/javascript-deep-dive

19장 프로토타입

Opened this issue · 1 comments

프로토타입

  • 추상화 : 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것
  • 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다.
  • [[Prototype]] 에 저장되는 프로토타입은 객체 생성 방식에 의해 결정된다.
  • [[Prototype]] 내부 슬롯에는 직접 접근할 수 없지만 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입에 간접적으로 접근할 수 있다.
  • 프로토타입에 접근하기 위해 접근자 프로퍼티를 사용하는 이유는 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해서이다. 프로토타입 체인은 단방향 링크드 리스트로 구현되어야 하는데 순환 참조하는 체인이 만들어지면 프로토타입 체인에서 프로퍼티를 검색할 때 무한루프에 빠진다.
  • 모든 객체가 __proto__ 접근자 프로퍼티를 사용할 수 있는 것은 아니다.

생성 시점

  • 생성자 함수로서 호출할 수 있는 함수는 함수 객체를 생성하는 시점에 프로토타입도 생성된다.
  • 함수 선언문은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행되는데 이때 프로토타입도 생성된다. 생성된 프로토타입은 생성자 함수의 prototype 프로퍼티에 바인딩된다.

프로토타입 체인

  • 모든 객체는 Object.prototype 을 상속받으므로 프로토타입 체인의 종점이다.
  • Object.prototype 의 프로토타입은 null 이다.
  • instanceof : 생성자 함수의 prototype에 바인딩된 객체가 프로토타입 체인 상에 존재하는지 확인

열거

  • for ... in 문 : 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중 [[Enumberable]] 값이 true인 경우에만 열거됨, 순서보장X
  • Object.keys/values/entries : 객체 자신의 고유 프로퍼티만 열거하는 목적일 때 사용

객체 생성방법

  1. 객체 리터럴
  2. 생성자 함수
  3. Object() 생성자 함수

객체 리터럴

객체 리터럴 방식으로 생성된 객체는 결국 내장 함수(Built-in)인 Object() 생성자 함수로 객체를 생성하는 것을 단순화시킨 것이다. 자바스크립트 엔진은 객체 리터럴로 객체를 생성하는 코드를 만나면 내부적으로 Object() 생성자 함수를 사용하여 객체를 생성한다.

생성자 함수

어떠한 방식으로 함수 객체를 생성하여도 모든 함수 객체의 prototype 객체는 Function.prototype이다. 생성자 함수도 함수 객체이므로 생성자 함수의 prototype 객체는 Function.prototype이다.

스크린샷 2022-02-03 오후 8 05 32

참고 : https://poiemaweb.com/js-prototype