프로토타입(prototype)

프로토타입(prototype)이란?

• 자바스크립트의 기반이 되는 개념이며, 원형객체라는 뜻을 가지고 있다.
  → JS는 프로토타입 기반 언어이다.
• 추상적으로 이야기하면 모든 요소에 공통적으로 생성되어 상속되는 가상의 객체 정도로 볼 수 있겠다.
  → 직접적으로 확인하기 위해서는 console.dir 을 사용해야함.
• 인스턴스를 클래스의 자식으로 생각하고, 클래스를 인스턴스의 부모로 생각하는 경우 프로토타입을 부모의 유전자라고도 표현 할 수 있다.
  → 코딩애플

프로토타입 체이닝(Prototype Chaining)

• 인스턴스는 클래스의 prototype을 상속받는데, 이는 클래스에 속한 prototype에 있는 프로퍼티, 메소드들을 사용 할 수 있다는 이야기이다.
  → 엄밀히 말하면 상속은 아니고, 윗 단계의 프로토타입을 뒤져서 사용하는 것이다.
• 이 처럼 상위의 프로토타입을 참조하여 데이터를 사용하는 것을 프로토타입 체이닝(Prototype Chaining) 이라고한다.
• 즉, 클래스의 prototype 저장소에 데이터를 추가하면 해당 클래스를 할당받은 인스턴스에서도 해당 데이터에 접근 할 수 있음을 나타낸다.
• prototype 을 사용하여 인스턴스 가 상위 prototype 객체의 메소드나 프로퍼티를 사용하는 것을 참조 라고 이야기한다.

// Base Class
class Parent {
  constructor(){
    this.hi = 'hello'
  }
  sayHello(){
    console.log(this.hi)
  }
}

// Derived Class
class Child extends Parent{
  constructor(){
    super()
  }
}

const inst = new Child

inst.hi // 'hello'
inst.sayHello() // 'hello'

• 인스턴스가 할당받은 Child 에는 메소드가 작성되어 있지 않지만, 프로토타입 체이닝으로 상위 prototype 을 참조하여 Parent의 생성자 함수와 메소드를 참조하여 출력한다.

---

+

• 증말증말 최종적으로 정리하면 prototype 은 모든 객체에서 접근 할 수 있는 또 다른 객체이다.
  → '모든 객체는 prototype 을 가슴에 품고 있다.' 라고 해야하나...
• 프로토타입 체이닝 은 위에서 내려오는 것이 아니라 위로 올라가는 것.
• 해당 인스턴스에 저장된 메소드나 프로퍼티가 없는 경우 상위의 프로토타입을 뒤지고, 없으면 또 그 상위의 프로토타입을 뒤져서 사용하는 것이다