[FE] 05. 생성자 패턴

<5. 생성자 패턴>

* 자바스크립트 객체

- 객체 리터럴(Object literal)

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

healthObj.showHealth();

그런데 healthObj의 형태를 가진 여러개의 객체가 필요할 때 healthObj2, healthObj3... 와 같이 구현해도 되지만, 

비슷한 객체가 중복되고 각 객체마다 showHealth라는 메서드는 중복으로 들어가 있다.

이를 개선하기 위하여 아래와 같은 방법을 사용할 수 있다.

 

- 객체를 동적으로 생성하는 방법

아래에서 new 키워드를 붙이지 않으면 h를 출력시켜 보았을 때 undefined가 뜨니 주의

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

h는 객체이며, Health 함수를 한 번 더 불러서 h2 객체를 만들 수 있다.

h2 = new Health("걷기", "20:11"); 

Health함수는 new키워드로 불리면서, 객체를 생성하는 함수 역할을 한다.

그래서 Health를 생성자(constructor)라고 한다. (h는 Health의 반환값을 받아서 저장)

하지만, h와 h2를 열어보면 showHealth메서드가 여전히 중복해서 존재한다.

동일한 메서드가 여기저기 메모리 공간을 차지하는 것은 분명 자원 낭비이므로 이 또한 개선점이 존재한다.

위와 같이 동일한 객체가 메모리 공간을 낭비시키고 있다. (showHealth)

이때 프로토타입을 사용하면 같은 지점의 메소드를 바라보기 때문에 메모리 공간을 같게 맞출 수 있다.

---

- prototype으로 메서드를 같이 사용해보기

자바스크립트는 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");
console.log(h);  //크롬개발자도구를 열고 이 부분이 어떻게 출력되는지 확인해보세요
h.showHealth();

prototype 타입은 객체지향 언어에서 상속(inheritance)과 비슷한 개념이라 할 수 있다.

위 그림에서는 각 인스턴스(h, h2, h3)가 prototype이라는 같은 참조객체를 바라보고 있다.

따라서 prototype의 어떤 속성을 변경하면 모든 인스턴스에게 공유된다.

아래 코드에서 Health 함수 아래에 prototype 객체가 존재하고, showHealth 메서드를 속성으로 추가해주었다.이처럼 prototype 객체 안에 여러 가지 속성을 추가할 수 있다. (메모리 효율성 증가)

아래처럼 여러 인스턴스를 만들어도 prototype안의 showHealth는 같은 참조점을 바라보고 있다.

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