프로토타입(prototype) 이란?

자바스크립트는 프로토타입 기반 객체 지향 언어라고 표현한다.

 

그렇다면 대체 프로토타입은 무엇을 의미하는걸까?

 

• 프로토타입은 함수가 만들어지면 생성되는 객체
• 원형(원본)을 보존하기 위한 객체
• prototype = 원형(원본)

가장 중요한 부분은 원형을 유지한다.

 

자바스크립트는 클래스라는 개념이 없다.

그래서 기존의 객체를 복사해서 새로운 객체를 생성하는 프로토타입 기반의 언어이다.

이는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어낸다.

이렇게 생성된 객체는 다른 객체의 원형이 될 수 있다.

 

function person() {

 person.prototype.stature = 172;

 person.prototype.weight = 70;

 person.prototype.name = "anonymous";

 person.prototype.skin = {

  color: "yellow"

 };
}

 

const 키다리 = new person();  //new로 생성자 함수를 만든다.

 

키다리.name = "키다리";

키다리.stature = 183;

키다리.weight = 80;

 

console.log(키다리.__proto__);    // stature: 172, weight: 70, name: 'anonymous', color: 'yellow'

console.log(키다리);                // name: '키다리', stature: 183, weight: 80

 

//프로토타입 체이닝 된 결과물

console.log(키다리.skin);  //skin color는 yellow가 출력된다.

 

 

프로토타입 체이닝

위의 예제에서 체이닝 된 결과물은 다음과 같습니다.

 

prototype chaining (프로토 타입 체이닝)

chaining = 연계된

prototype은 연계되어 있다.

 

person(부모) -> 키다리(자식)에 상속

키다리의 __proto__ (원형) = person의 prototype

 

키다리.skin 을 호출 했을 때 -> 키다리의 값이 없다면, 

__proto__을 타고 상위 원본으로 가서 값을 가져오는 것이

prototype 체이닝이다.

 

 

Object.create로 prototype을 생성하는 방법 & 체이닝

Object.create(parameter)   
parameter = prototype(원형)으로 지정할 원본

체이닝에서는 부모 역할을 한다.

const 역 = {

  이름: "anonymous",

  위치: "",

  크기: 100,

  준공년도: 2000,

  수용인원: 1000

};

 

const _2호선 = Object.create(역);

 

_2호선.색상 = "green";

 

const 선릉역 = Object.create(_2호선);

 

선릉역.위치 = "선릉";

선릉역.이름 = "선릉역";

선릉역.크기 = 200;

선릉역.준공년도 = 1982;

 

console.log(_2호선.__proto__); //이름: "anonymous", 위치: "", 크기: 100, 준공년도: 2000, 수용인원: 1000

console.log(선릉역.__proto__); //색상: 'green'

 

선릉역의 프로토타입은 _2호선이 되고, _2호선의 프로토타입은 역이 된다.

 

이게 javascript에서 상속이다.

 

 

class로 체이닝(상속)과 prototype 만들기

ES6 class로 상속과 prototype 만들기

syntax sugar (문법 설탕) = 프로그래머가 조금 더 편해지도록

이미 있는 기능을 문법으로 사용하게끔 하는 행동(wrapping)

 

class 음료 {

  //constructor = 생성자

  // class가 new 되었을 때 호출하는 메서드

  constructor() {

    //객체를 선언할 때

    this.색깔 = "white";

    this.맛 = "nothing";

    this.has탄산 = false;

    this.온도 = "cold";

  }

}

 

// extends = 확장하다

//커피는 음료로 확장하다.

//이게 class 문법에서의 상속
//super = 상위 prototype (부모)를 상속받기 위한 것

 

class 커피 extends 음료 {

  constructor() {

    super();

    this.향 = "nothing";

    this.이름 = "anonymous";

    this.타입 = "드립";

  }

}

 

class 아메리카노 extends 커피 {

  constructor(temperature) {

    super();

    this.색깔 = "black";

    this.맛 = "bitter";

    this.온도 = temperature;

    this.타입 = "커피머신";

    this.이름 = "아메리카노";

    this.향 = "고소한";

  }

}

 

const 아이스아메리카노 = new 아메리카노("cold");

 

console.log(아이스아메리카노);

결과물 ->

 '색깔': 'black',
  '맛': 'bitter',
  'has탄산': false,
  '온도': 'cold',
  '향': '고소한',
  '이름': '아메리카노',
  '타입': '커피머신'

 

여기서 has탄산은 상위의 커피에도 없으므로 음료의 has탄산 프로토타입을 상속받아

false로 출력이 되는것이다.