[JavaScript] Prototype

Prototype

: 반복적으로 쓰일 수 있도록 속성과 함수를 정의하는 것

 

 

"JS는 Proto를 기반으로 하는 언어이다"

== 객체지향 프로그래밍을 할 수 있는 한 가지 방식으로서 행동을 재사용하는 것

== 기존의 객체를 재사용하는 것

 

 

프로토타입 Demo

다음과 같은 파일을 만든다.

JS 파일과 HTML 파일을 연결하고,

JS 파일에 다음과 같이 코드를 작성하고 서버를 실행시키면,

프로토타입을 상속한 객체가 출력되는 것을 확인할 수 있다.

=> JS에서 모든 Object는 Object라는 Proto를 상속한다.

console.log(x.__proto__ === y.__proto__)  // true

=> x, y는 동일한  object proto를 상속하고 있기 때문에  true를 반환한다.

 

 

Prototype을 이용한 재사용 방법

다음과 같이 작성하면, 만들어지는 인스턴스마다 makeCoffee 함수를  가지고 있게 된다.

function CoffeeMachine(beans) {
  this.beans = beans;

  // 만들어지는 객체마다 이 함수를 포함하고 있음
  this.makeCoffee = (shots) => {
    console.log('making,,,')
  }
}

그 때, Prototype을 이용할 수 있다.

// Prototype Level
CoffeeMachine.prototype.makeCoffee = (shots) => {
  console.log('making,,,')
}

 

프로토타입을 상속받을 수도 있다.

function LatteMachine(milk) {
  this.milk = milk
}

LatteMachine.prototype = Object.create(CoffeeMachine.prototype)
const latteMachine = new LatteMachine(123)
console.log(latteMachine)

LatteMachine은 CoffeeMachine을, CoffeeMachine은 Object prototype을 상속받고 있다.

CoffeeMachine proto가 가지고 있던 makeCoffee 함수에도 접근할 수 있게 된다.

latteMachine.makeCoffee(12)