JS[프로토타입]

프로토타입

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다.

JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결(많은 브라우저들이 생성자의 prototype 속성에서 파생된 __proto__ 속성으로 객체 인스턴스에 구현하고 있습니다.)이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색합니다.

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

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

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

Human.prototype.wakeup = function(){ // prototype으로 class에 메서드 추가 가능
  console.log(`${this.name}은 잠에서 깨었습니다`);
}

console.log(kimcoding.wakeup()) // 김코딩은 잠에서 깨었습니다.

kimcoding.__proto__.work = function(){ //생성된 객체에서 class에 접근할때는 __proto__
  console.log(`${this.name}은 일을 시작합니다.`);
}
console.log(kimcoding.work()) //김코딩은 일을 시작합니다.

Human.prototype.constructor === Human; //true
Human.prototype === kimcoding.__proto__; //true
Human.prototype.sleep === kimcoding.sleep;//true

쉽게 말해 Human.prototype에 접근하기위해
.prototype은 위에서 아래로 내려오면서 탐색하고
.__proto__는 아래에서 위로 올라가며 탐색한다고 생각하면 된다.