🔍 Prototype

JavaScript는 prototype 기반 언어로, 모든 객체들이 메서드와 속성들을 상속 받기 위한 템플릿으로써, 프로토타입 객체를 갖는다.

• prototpye은 원형 객체(original form)를 의미한다.

프로토타입 객체는 상위 프로토타입 객체로부터 상속받을 수 있고, 그 상위 프로토타입도 마찬가지이다. 이를 프로토타입 체인(prototype chain)이라고 하며,다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 한다. -MDN

class Human{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  sleep(){
    console.log(`${this.name}은 잠에 들었습니다.`);
  }
}

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

// .prototype 을 사용해 prototype 속성을 직접 확인해 볼 수 있다.
Human.prototype.constructor === Human; // true

// .__proto__ 속성을 사용해 kimcoding의 prototype 객체에 접근할 수 있다.
Human.prototype === kimcoding.__proto__; // true

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

// instance에서 constructor에 접근할 때도 .constructor 사용을 사용해 접근 가능
kimcoding.constructor; // ƒ Human()
kimcoding.constructor.name; // 'Human' 
Human.prototype.constructor === kimcoding.constructor // true

this.

new 키워드로 instance를 생성했을 때, 해당 Instance가 this의 값이된다.

.prototype

생성자 함수(constructor)가 .prototype 속성을 이용해 프로토타입 객체(원형 객체)를 참조할 수 있다.

• 생성자 함수가 사용

위의 예시를 보면,
Human.prototype.sleep === kimcoding.sleep; // true
Human class의 sleep 메서드는 프로토타입에 있으며, Human class의 instance인 kimcoding에서 사용할 수 있다.

.__proto__

.__proto__ 속성을 이용해 프로토타입 객체를 참조해, 모든 객체가 자신의 프로토타입에 접근할 수 있다(링크).

• 모든 객체(instance)가 사용

위의 예시를 보면,
Human.prototype === kimcoding.__proto__; // true
Human class의 프로토타입은 Human class의 instance인 kimcoding의 __proto__와 같다.

.constuctor

.constructor 속성을 이용해 원본 생성자 함수에 접근할 수 있다.

위의 예시를 보면,
Human.prototype.constructor === kimcoding.constructor // true
Human class의 프로토타입의 생성자 함수는 Human class로, Human class의 instance인 kimcoding의 원본 생성자 함수와 같다는 것을 알 수 있다.

👀 Class , Instance, Prototype의 관계

위의 예시 코드를 작성하고 kimcoding을 입력하면 아래의 결과가 출력된다.

Human {
  name: '김코딩',
  age: 30,
  __proto__: { 
  constructor: ƒ Human(), 
  sleep: ƒ sleep() 
  }
}

kimcoding의 __proto__는 Human.prototype을 가리킨다.
Human.prototype의 constructor는 Human class를 가리키고, Human의 prototype은 Human.prototype을 가리킨다.

✔ Array(배열) Class, Instance, Prototype의 관계

링크텍스트

Reference:
코드스테이츠
MDN: https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

http://speakingjs.com/es5/ch17.html