[JS] 생성자패턴

객체 리터럴

- 아래와 같이 객체를 선언하는 것을 '객체 리터럴'이라고 한다.

 

//객체 리터럴 방식
var healthObj ={
  name : "andamiro",
  time : "PM 12 : 00",
  showHealth : function(){
    console.log(this.name + "님은 " + this.time + "에 운동을 하셨습니다.");
  }
};
 
healthObj.showHealth();

 

 

객체 동적 생성

- 위와 같은 패턴의 비슷한 객체를 여러개 만들고 싶다면 new 키워드를 사용하여 동적으로 객체를 생성 할 수 있다.

- 방법은 아래처럼 함수를 이용하면 된다.

 

function healthObj(name, time){
  this.name = name;
  this.time = time;
  this.showHealth = function(){// new키워드를 쓰면 새로운 object context가 생성된다. 이전에 this 키워드에서 배운 내용
    console.log(this.name + "님은 " + this.time + "에 운동을 하셨습니다.");
  }
}
var o1 = new healthObj("andamiro", "PM 10:10");
o1.showHealth();
 
var o2 = new healthObj("pam", "AM 4:20");
o2.showHealth();

 

- new 키워드를 사용하여 객체를 생성하며, 위 healthObj 함수는 생성자 역할을 한다.

- 위 함수를 생성자(constructor) 라고 한다.

- 하지만 이 코드에서 showHealth라는 메서드가 여전히 중복되어 있다.

- 코드가 중복되면 동일한 메서드가 여기저기 메모리 공간을 차지하여 비효율적이다.

console.log(o1.showHealth===o2.showHealth);    // false

- 이를 prototype을 이용하여 해결 할 수 있다.

 

prototype

 

- 자바스크립트는 prototype이라는 공간을 통해 객체간의 재사용 되는 것을 참조할 수 있다.

- 위 객체 h, h2, h3는 prototype이라는 같은 공간을 참조한다.

- 즉, protype에 무언가 변화를 주면 h, h2, h3의 모든 객체의 showHealth에 반영이 된다.

 

function healthObj(name, time){
  this.name = name;
  this.time = time;
}
 
healthObj.prototype.showHealth = function(){
  console.log(this.name + "님은 " + this.time + "에 운동을 하셨습니다.");
}
 
var o1 = new healthObj("andamiro","PM 10:10");
var o2 = new healthObj("pam", "AM 04:30");
 
o1.showHealth();
o2.showHealth();
 
console.log(o1.showHealth === o2.showHealth); //true

 

- Line 16에서 각 객체가 같은 참조점을 가르키는 걸 확인 할 수 있다.

 

참고 사이트 : http://www.edwith.org/

※
본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※