사용자가 원하는 고유의 개체를 정의하여 생성할 수 있다.

개체 생성 기능함수 정의

사용자 고유의 개체 인스턴스를 만들려면 먼저 개체 생성자 기능함수를 정의한다.
생성자 기능함수는 새 개체를 만들고 여기에 속성이나 적절한 메서드를 부여한다.

다음 예제는 flowers 개체의 생성자 기능함수를 정의하고 this 키워드를 사용하여 현재 개체를 참조하게 한다.

function flowers(variaty,season,color,forSale,price){ // 기능함수를 생성하고 정의한다.
  this.variaty=variaty; // 인수값을 속성값으로 참조하도록 한다.
  this.season=season;
  this.color=color;
  this.forSale=forSale;
  this.price=price;
} // 기능함수의 종료.
document.write(flowers.variaty); // 기능함수만 생성하고 주어진 인수가 없으므로 값이 없다.

인스탄스 생성

개체 생성자를 정의했으면 new 연산자를 사용하여 생성자의 인스턴스를 만든다.

var rose01=new flowers('장미 01',5,'노랑',true,1000); // 새로은 인스탄스를 생성한다.
document.write(rose01.variaty,' ',rose01.season,'월 ',rose01.color,'색 판매 ',
  rose01.forSale==true ? '함':'안함',' ',rose01.price,'원/개','<BR>');

var lily22=new flowers('백합 22',6,'흰',false,1200)); // 새로은 인스탄스를 생성한다.
document.write(lily22.variaty,' ',lily22.season,'월 ',lily22.color,'색 판매 ',
  lily22.forSale==true ? ('함'+lily22.price+'원/개'):'안함','<BR>');

rose01.forSale==true ? '함':'안함' 부분은 ? ... : ...(삼항연산자)를 참고하라.

생성된 인스탄스로 사용자 정의 개체의 속성을 참조할 수 있게 되었다.

인스탄스 속성 추가및 변경

for (prop in rose01){ //  for in 루프를 사용하여 윗 예제에서 생성한 사용자 정의 개체 모든 속성값들을 출력한다.
  document.write('rose01.',prop,'="',rose01[prop],'"<BR>'); // 여기서 배열변수의 인수는 수치가 아니고 속성명이 된다.
} // 속성값 출력 루프 종료.
document.write(rose01.variaty,' ',rose01.season,'월 ',rose01.color,'색 판매 ',
  rose01.forSale==true ? ('함 '+rose01.price+'원/개'):'안함 ',rose01.person,' 담당<BR><BR>');
    // 위 예제와 비슷한 방식으로 출력 문자열을 출력한다. person 속성은 정의된 바가 없어 undefined 가 되었다.

rose01.color='검붉은'; // 사용자 개체의 색상 속성값을 '검붉은'으로 변경시켰다.
rose01.forSale=false; // 사용자 개체의 판매하는가의 속성을 판매 않하는 것으로 변경시켰다.
rose01.person='홍길동'; // 사용자 개체에 담당자 속성을 추가시키고 속성값을 할당하였다.
for (prop in rose01){
  // 기존 속성값을 변경시키고, 새로 속성을 만든 후, for in 루프를 사용하여 위와 마찬가지로 다시 개체 모든 속성값들을 출력한다.
  document.write('rose01.',prop,'="',rose01[prop],'"<BR>');
    //  속성값 변경들이 반영되었고, 여기서는 rose01.person이 '홍길동'으로 출력된다.
}
document.write(rose01.variaty,' ',rose01.season,'월 ',rose01.color,'색 판매 ',
  rose01.forSale==true ? ('함 '+rose01.price+'원/개'):'안함 ',rose01.person,' 담당<BR>');

위에서 추가한 rose01.person='홍길동' 속성은 lily22나 다른 인스탄스에는 반영되지 않고 rose01 인스탄스에만 반영된다.

인스탄스 속성 추가및 변경 반영 점검

하나의 개체 인스턴스에 속성을 추가하여 그 인스턴스를 바꿀 수는 있지만 속성은 동일한 생성자로 만든 다른 개체 정의의 일부가 될 수는 없다. 또한 특별히 인스턴스를 추가하지 않으면 다른 인스턴스에 나타나지 않는다.

for (prop in lily22){ //  for in 루프를 사용하여 윗 예제에서 생성한 사용자 정의 개체 모든 속성값들을 출력한다.
  document.write('lily22.',prop,'="',lily22[prop],'"<BR>');
    // 인스탄스가 다르므로 바로 위에서 rose01.person='홍길동'으로 생성한 속성은 반영되지 않는다.
} // 속성값 출력 루프 종료.

프로토타입 추가

추가 속성이 개체의 모든 인스턴스에 나타나도록 하려면 생성자 기능함수 또는 생성자의 프로토타입 개체에 이 속성들을 추가해야 한다.(prototype 속성)

prototype으로 생성한 속성이 사용자 정의 개체 flowers의 모든 인스탄스에 적용된다. 그 값의 변경이 없으면 사용자 정의 개체 flowers의 새롭게 생성되는 인스탄스에도 그 값이 적용된다. 여기서 category는 사용자 정의 속성이다.

flowers.prototype.category='정원수'; // 사용자 정의 개체 flowers에 prototype을 추가하고 값을 할당하였다.

for (prop in rose01){ //  for in 루프를 사용하여 윗 예제에서 생성한 사용자 정의 개체 모든 속성값들을 출력한다.
  document.write('rose01.',prop,'="',rose01[prop],'"<BR>'); // 여기서 배열변수의 인수는 수치가 아니고 속성명이 된다.
} // 속성값 출력 루프 종료.
document.write('<BR>');

for (prop in lily22){ //  for in 루프를 사용하여 윗 예제에서 생성한 사용자 정의 개체 모든 속성값들을 출력한다.
  document.write('lily22.',prop,'="',lily22[prop],'"<BR>');
    // prototype으로 생성된 속성은 모든  인스탄스에 반영된다.(인스탄스.category="정원수")
} // 속성값 출력 루프 종료.

새 인스탄스에 프로토타입 반영 점검

새롭게 생성되는 인스탄스에도 반영된다.

var hibisicus=new flowers('무궁화',5,'분홍',false,900);
for (prop in lily22){ //  for in 루프를 사용하여 윗 예제에서 생성한 사용자 정의 개체 모든 속성값들을 출력한다.
  document.write('lily22.',prop,'="',lily22[prop],'"<BR>');
    // prototype으로 생성된 속성은 모든  인스탄스에 반영된다.(인스탄스.category="정원수")
} // 속성값 출력 루프 종료.

메서드(기능함수)를 개체의 정의에 포함할 수 있다.

한 가지 방법은 임의의 장소에서 정의된 기능함수를 참조하는 생성자 기능함수 안의 속성을 추가하는 것이다.

다음 예는 개체 값을 출력하는 사용자 정의 기능함수의 메서드를 생성한다.
제일 먼저 사용했던 예제에서 마지막 속성 toString으로 기능함수 flowersReport를 참조하게 했다. 이 참조를 위하여 기능함수를 생성하여 toString를 호출하면 그 기능함수를 실행하도록 되므로 사용자 정의 개체의 사용자 정의 메서드로 보면 된다.

function flowers(variaty,color,forSale,price){ // 기능함수를 생성하고 정의한다.
  this.variaty=variaty; // 인수값을 속성값으로 참조하도록 한다.
  this.color=color;
  this.forSale=forSale;
  this.price=price;
  this.toString=flowersReport; // 기능함수를 수행하는 메서드적 속성으로 기능함수를 참조하도록 정의한다.
} // 기능함수의 종료.

function flowersReport(){ // toString 메서드가 수행하는 기능함수를 생성하고 정의한다.
  return this.variaty+' '+this.color+'색 판매 '+ (this.forSale==true ? ('함 '+this.price+'원/개'):'안함 ');
     // 반환할 문자열을 생성한다. this로 일반화하여 모든 인스탄스에서 작용한다. 여기서 this는 개체이다.
} // 기능함수의 종료.

var rose02=new flowers('장미 02','연분홍',true,1300); // 새로은 인스탄스를 생성한다.
document.write(rose02.toString()); // 사용자 정의 개체의 사용자 정의 메서드를 호출하여 리포트한다.

앞의 예제와 비슷하나 사용자 정의 메서드에서 for...in... 루프 문장을 사용해 본다.

function flowers(variaty,color,forSale,price){ // 기능함수를 생성하고 정의한다.
  this.variaty=variaty; // 인수값을 속성값으로 참조하도록 한다.
  this.color=color;
  this.forSale=Boolean(forSale); // true/false를 확실히하가 위하여 부울 개체를 사용하였다.
  this.price=Number(price); // 수치를 확실히하가 위하여수치 개체를 사용하였다.
  this.report=flowersData; // 기능함수를 수행하는 메서드적 속성으로 기능함수를 참조하도록 정의한다.
} // 기능함수의 종료.

function flowersData(){ // report 메서드가 수행하는 기능함수를 생성하고 정의한다.
  str=''; // 반환할 문자열 변수 선언.
  for (prop in this){ // for...in...루프 문장으로 개체의 모든 속성을 리포트한다.
    if (prop=='report') str+=prop+' 메서드<BR>' // 메서드에 연결된 기능함수 소스의 출력을 생략한다.
    else str+=prop+'="'+this[prop]+'"<BR>'; // 사용자 정의 속성명과 속성값을 출력 문자열에 결합한다.
     // 반환할 문자열을 생성한다. this로 일반화하여 모든 인스탄스에서 작용한다. 여기서 this는 개체이다.
  } // 루프 종료.
  return str; // 결과 출력 문자열을 반환한다.
} // 기능함수의 종료.

var cherry=new flowers('겹벚꽃','연분홍',false,0); // 새로은 인스탄스를 생성한다.
document.write(cherry.report()); // 사용자 정의 개체의 사용자 정의 메서드를 호출하여 리포트한다.