Chapter 19 프로토타입

in Frontend / Js / Javascript

prototype

JS가 지원하는 패러다임

- 명령형 (imperative)
- 함수형 (functional)
- 프로토타입 기반 OOP (prototype-based OOP)

✨JS는 멀티 패러다임 프로그래밍언어이다

  • prototype-based OOP는 class-based OOP보다 강력하다고 한다
    • class-based OOP는 결국 prototype-based 의 syntactic sugar이지만 좀 더 새로운 객체 생성 매커니즘을 제공함

19.1 객체지향 프로그래밍

👨🏻‍💻 객체의 집합으로 (독립적 단위로) 프로그램을 표현

  • 전통적인 명령형 (Imperative)의 절차지향적 관점에서 벗어나고자 함. (프로그램을 명령어/함수의 목록으로 보는…)

  • 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도

    • 추상화된 속성이 있으며, (필요한 속성만 간추려내어 표현하는 것)
    • 실체 성질을 인식/구분하는 속성을 가지고 있음
  • 따라서 객체란,
    • 상태 데이터 (peroperty)와 동작을 (method) 하나의 논리적인 단위로 묶은 복합적인 자료구조

19.2 상속과 프로토타입

  • 상속: OOP의 핵심 개념. 상속받아 그대로 사용가능하게 하는 것
  • JavaScript는 prototype을 기반으로 상속을 구현하여 불필요한 중복을 제거함


prototype기반 상속으로 중복을 어떻게 제거했는지 살펴보자
  function Circle(radius) {
    this.radius = radius;
    // 해당 메소드 여기다가 정의 안하고 prototype에 넣어버리면?
    // this.getArea = function() {
    //   return Math.PI * this.radius ** 2;
    // }
  }

  // 객체 메소드 대신 prototype prop에 바인딩 시켜서 instance가 상속받을 수 있게 한다. 
  Circle.prototype.getArea = function() {
    return Math.PI this.radius ** 2;
  }

  // creates instances
  const circle1 = new Circle(1); // 각자 getArea를 소유하지 않아도 된다. 
  const circle2 = new Circle(2);

  // circle1.getArea === circle2.getArea => true
메소드상속
methodprototype

19.3 프로토타입 객체

  • 모든 객체는 [[Prototype]] 슬롯을 가진다. (null인 경우도 있지만, value: 프로토타입의 참조)
    • 프로토타입은 객체 생성 방식에 의해 결정됨.
  • 모든 객체는 하나의 프로토타입을 갖는다.
    • 생성자 함수와 1대1 연결되어 있음. 그리고 서로 접근이 가능하다.
      • (생성자 함수.prototype <-> 생성자 함수.prototype.constructor)

proto accessor

  • 접근자 프로퍼티임. 원래 JS 내부 슬롯들은 접근 불가하게 하나 [[Prototype]]슬롯은 얘로 접근 가능
    • 리마인더: 내부 슬롯은 프로퍼티가 아님!
  • 모든 접근자 프로퍼티가 그렇듯, __proto__도 {get, set, enumerable, configurable} 속성을 가짐.
    • obj.__proto__ 하면 get으로,
    • obj.__proto__ = parent 하면 set으로 호출
  • 상속을 통해 사용됨
    • 객체가 직접 소유 X
    • Object.prototype의 프로퍼티 O (<– 얘가 프로퍼티 체이닝의 종점임)
  • 왜 __proto__를 사용하여 프로토타입에 접근해야 할까
    • 얘가 cyclic reference 막아줌. 순환 참조되면 Type error 시키는 최전선이랄까
    • 포토타입의 종점은 Object.prototype으로, 링크드리스트로 구현이 되어야 하는데 띠어져서 뱅뱅 돌고 있으면 안됨
    • 무튼 그래서 요 proto 개발자가 직접 사용 권장하지 않음