프로토타입과 클래스

프로토타입

• .prototype

  • JavaScript는 프로토타입 기반 언어이고, 여기서 프로토타입은 원형 객체
  • 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다.

• __proto__

  • 특정 객체의 프로토타입 객체(prototype)에 접근할 수 있는 property
  • __proto__ 속성에 접근하면 내부적으로 Object.getPrototypeOf가 호출되어 프로토타입 객체(prototype)를 반환

• 즉 .__proto__ 와 .prototype 의 차이
  __proto__
  모든 객체가 가지고 있다.
  하나의 Link 라고 할 수 있다.

  prototype
  함수 객체만 가지고 있다.
  생성자를 가지는 원형으로 선언 할 수 있다.

실습

//  <Human이라는 클래스를 구현>

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let kimcoding = new Human('김코딩', 30);

// 실습해보세요
Human.prototype.constructor === Human; 
// true //Human 클래스의 생성자 함수는 Human
Human.prototype === kimcoding.__proto__; 
//true //Human 클래스의 프로토타입은 Human 클래스의 인스턴스인 kimcoding의 __proto__
Human.prototype.sleep === kimcoding.sleep;
// true
//Human 클래스의 sleep 메서드는 프로토타입에 있으며, 
//Human 클래스의 인스턴스인 kimcoding에서 kimcoding.sleep으로 사용할 수 있다

Human이라는 클래스와 인스턴스, 그리고 프로토타입의 관계

Array(배열) 클래스와 인스턴스, 그리고 프로토타입의 관계