[JS] ProtoType

 

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다. 

프로토 타입은 원래의 형태 또는 전형적인 예, 기초 또는 표준으로 무언가 제품을 만드는 과정에서 시험용으로 미리 만들어보는 물건을 의미합니다.

자바스크립트에서는 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. (상속)

 

프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다. 정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있습니다.

 

 

프로토타입은 자식에게 데이터를 물려주는 방식이라 생각하면 쉽습니다.

프로토 타입을 이용하여 객체지향 프로그래밍을 위해서 상속을 하고, 재사용성을 높히는 방식 입니다.

 

함수에서는 class의 constructor을 유사하게 흉내낼 수 있습니다.

function Chef(sugar) {
  this.sugar = sugar;
  // Instance member level
  // console.log('cooking');
}

// Prototype member level
Chef.prototype.makeCake = (people) => {
  console.log("cooking");
};

const chef1 = new Chef(10);
console.log(chef1); // chef1에 makeCake 프로토 타입을 상속 받음

그리고 Chef의 프로토타입을 Barista를 아래의 코드처럼 상속 시킬 수도 있습니다.

function Barista(coffee) {
  this.coffee = coffee;
}
Barista.prototype = Object.create(Chef.prototype);

const barista1 = new Barista(123);
console.log(barista1);
barista1.makeCake();

 

위와 같은 코딩을 만약 타입스크립트에서 하게되면 굉장히 복잡해지므로, class를 통한 상속이 굉장히 편리하다는 것을 알 수 있습니다.

 

 

코딩애플 영상

https://www.youtube.com/watch?v=wUgmzvExL_E 

 

참고 링크

https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

https://www.nextree.co.kr/p7323/