프로토타입(prototype)

prototype

상속이라는 개념을 제공하고 있다.

Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 본 문서에서는 프로토타입 체인이 동작하는 방식을 설명하고 이미 존재하는 생성자에 메서드를 추가하기 위해 프로토타입 속성을 사용하는 법을 알아봅니다.

 

프로토타입 기반 언어?

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

new가 붙어서 생성자 함수가 되고 새로운 객체를 만들어서 리턴한다. 

o에는 생성자를 통해만들어진 객체가 들어간다.

객체가 가지고 있어야 하는 메서드 또는 데이터를 기본적으로 가지고 주어지기를 바라는 것임.

비어있는 객체는 소용이 없다.

객체가 어떤 메소드, 프로펄리를 가지고 있는 원형은 어딘가에 저장되어 있는데 그게 prototype에 저장되어 있다.

sub는 프로퍼티기 때문에 프로퍼티 가질 수 있고 특수한 prototype이 있어서  prototype안에는.어떠한 객체가 정의되어 있다.

 

 

상속받는 멤버들은 prototype 속성(sub-namespace라고도 하죠)에 정의되어 있기 때문입니다. — Object.로 시작하는게 아니라, Object.prototype.로 시작하는 것들이죠. prototype 속성도 하나의 객체이며 프로토타입 체인을 통해 상속하고자 하는 속성과 메서드를 담아두는 버킷으로 주로 사용되는 객체입니다.

 

 많은 수의 모던 브라우저들이 __proto__ (앞뒤로 언더바 2개씩) 속성을 통해 특정 객체의 프로토타입 객체에 접근할 수 있도록 구현하였습니다.

 

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; 
Human.prototype === kimcoding.__proto__; 
Human.prototype.sleep === kimcoding.sleep;

1. Human 클래스의 생성자 함수는 Human입니다.
2. Human 클래스의 프로토타입은 Human 클래스의 인스턴스인 kimcoding의 __proto__입니다.
3. Human 클래스의 sleep 메서드는 프로토타입에 있으며, Human 클래스의 인스턴스인 kimcoding에서 kimcoding.sleep으로 사용할 수 있습니다.

 

 

Array는 클래스입니다. 지금까지 써 왔던 배열은Array 클래스의 인스턴스이며, Array.prototype에는 push, pop 등 다양한 메서드가 있습니다.