생성자패턴과 prototype

생성자패턴

• 객체지향적인 방법으로 객체에서 비슷한 속성과 행위를 묶어서 표현할 수 있다.
• 객체를 동적으로 생성해서 중복을 줄일 수 있다.
• prototype에 메서드를 속성으로 추가할 수 있다.

 

객체리터럴(Object literal)

코드의 중복이 발생한다.

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

var healthObj2 = {
  name : "crong",
  lastTime : "AM 09:10",
  showHealth : function(){
    console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요.");
  }
}

healthObj.showHealth();		//seogineer님, 오늘은 PM 10:12에 운동을 하셨네요.
healthObj2.showHealth();	//crong님, 오늘은 AM 09:10에 운동을 하셨네요.

 

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

여전히 showHealth 함수는 중복이 발생하고 있다.

function Health(name, lastTime){
  this.name = name;
  this.lastTime = lastTime;
  this.showHealth = function(){
    return this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요.";
  }
}

var o = new Health("seogineer", "PM 10:12");
var o2 = new Health("crong", "AM 09:10");

console.log(o.showHealth());	//seogineer님, 오늘은 PM 10:12에 운동을 하셨네요.
console.log(o2.showHealth());	//crong님, 오늘은 AM 09:10에 운동을 하셨네요.
console.log(o.showHealth === o2.showHealth);  //false

 

prototype에 속성을 추가하여 메서드를 공유할 수 있다.

o와 o2 인스턴스는 prototype이라는 같은 참조 객체를 바라보기 때문에 같은 속성을 공유한다.

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

Health.prototype.showHealth = function(){
  return this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요.";
}

var o = new Health("seogineer", "AM 10:12");
var o2 = new Health("crong", "PM 12:30");

console.log(o.showHealth());	//seogineer님, 오늘은 AM 10:12에 운동을 하셨네요.
console.log(o2.showHealth());	//crong님, 오늘은 PM 12:30에 운동을 하셨네요.
console.log(o.showHealth === o2.showHealth);	//true

 

prototype

• 자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체(prototype 객체)와 연결되어 있다.
• 자바스크립트의 모든 객체는 자신의 프로토타입을 가리키는 prototype이라는 숨겨진 프로퍼티를 가진다.
• 크롬브라우저에서는 이 prototype 프로퍼티를 __proto__라고 한다.
• toString() 이나 valueOf() 등과 같은 메서드를 따로 추가하지 않아도 모든 객체에서 호출할 수 있는 이유는 __proto__ 프로퍼티가 가리키는 Object.prototype(프로토타입) 객체에 기본 내장 메서드로 포함되어 있기 때문이다.

 

참조

www.boostcourse.org/web316/lecture/16794/

송형주, 고현준, 『인사이드 자바스크립트』, 한빛미디어(2014), p49-p52