(JavaScript) 효율적인 객체 이용방법 prototype

JavaScript로 객체를 만드는 방법은 여러가지가 있다.

 

객체 리터럴 방식, 생성자 패턴 방식 등

객체 리터럴 방식은 여러개의 함수 호출이 필요한 경우 동적으로 사용하기 어렵다.

그래서 생성자 패턴으로 이용해 동적으로 함수를 관리하고자 한다.

var healthObj = {
  name : "달리기",
  lastTime : "PM10:12",
  showHealth : function() {
    console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");
  }
}

객체 리터럴로 된 함수를 좀 더 동적으로 만들기 위해  다음과 같이 코드를 수정한다.

function Health(name, lastTime) {
  this.name = name;
  this.lastTime = lastTime;
  this.showHealth = function(){...}
}
const h = new Health("달리기", "10:12");

좀 더 동적으로 생성자를 만들었지만, 이 생성자를 여러개 만든다면 생성자 안에있는 매서드 또한 계속 만들어 질 것이다. 이 문제점을 해결하고자 prototype을 사용한다.

 

function Health(name, lastTime) {
  this.name = name;
  this.lastTime = lastTime;

}

Health.prototype.showHealth = function() {
    console.log(this.name + "," + this.lastTime);
}

const h = new Health("달리기", "10:12");

 

이렇게 함수안 매서드를 protopype으로 만들어주면 생성자를 여러개 만들었을 때 똑같은 객체를 계속 사용하여 메모리 사용을 줄일 수 있다.

 

const h = new Health("달리기", "10:12");
const h2 = new Health("걷기", "14:20");
console.log(h.showHealth === h2.showHealth); //true

 

참고자료: https://www.edwith.org/boostcourse-web/lecture/16794/