[J] JavaScript & jQuery 공부하기 #14

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

 

16.  생성자 함수 사용

* 생성자 함수
- 반복적으로 동일한 속성을 가진 객체를 생성할 때
객체를 생성하기 위한 틀을 정의하는 함수

* 생성자 함수를 사용 할 때와 사용 하지 않을 때의 객체 생성
- 생성자 함수를 사용하지 않고 객체를 여러 개 생성 하는 경우
< script type="text/javascript">
var dog1 = {breed : "푸들", age : 10, name : "푸돌이", country : "프랑스"};
var dog2 = {breed : "불독", age : 6, name : "귀요미", country : "독일"};
var dog3 = {breed : "시바견", age : 4, name : "까꿍이", country : "일본"};
</ script>

- 생성자 함수를 사용하여 객체를 여러 개 생성하는 경우
< script type="text/javascript">
function Dog (breed, age, name, country){
this.breed = breed;
this.age = age;
this.name = name;
this.country = country;
}
</ script>

  * 생성자 함수의 정의
   - 생성자 함수의 이름은 대문자로 시작함
   - 자기 자신의 속성을 지정할 때 this를 사용함

   - 생성자 함수를 사용하여 객체를 생성할 때는 new 연산자를 사용한다
   < script type="text/javascript">
   var dog1 = new Dog("푸들", 10, "푸돌이", "프랑스";)
   var dog2 = new Dog("불독", 10, "귀요미", "독일";)
   var dog3 = new Dog("시바견", 10, "시바", "일반";)
   </ script>

  * prototype
   - 생성자 함수에 메서드를 추가함
   < script type="text/javascript">
   Dog.prototype.getName = function(){return this.name};

   alert(dog1.getName());
   var dog2 = new Dog("불독", 6, "귀요미", "독일");
   alert(dog2.getName());
   </ script>

  * instanceof
   - 객체가 특정 생성자 함수를 사용해서 생성되었는지를 판단
   < script type="text/javascript">
   var dog1 = new Dog("푸들", 10, "푸돌이", "프랑스");
    alert(dog1 instanceof Dog);

   function Car(name,year){
   this.name = name;
   this.year = year;
   }

   var car1 = new Car("소나타",2017);
   alert(car1 instanceof Dog);
   </ script>

  * 예제
   < script type="text/javascript">
   var dogs = [];

   function Dog(name, price, height, weight){
   this.name = name;
   this.price = price;
   this.height = height;
   this.weight = weight;
   }

   Dog.prototype.toString=function(){
   return '이름 : ' + this.name+', 가격 : ' + this.price+' , 키 : 'this.height+ ', 무게 : ' + this.weight+ '\n';
   }
   var flag = true;

   do{
   var menu = prompt('1.강아지 등록 2. 강아지 목록 보기 3. 종료')
   switch(menu){
   case '1':
   var name=prompt('강아지이름을 입력하세요');
   var price= Number(prompt('강아지 가격을 입력하세요'))
   var height= Number(prompt('강아지 키를 입력하세요'))
   var weight= Number(prompt('강아지 무게을 입력하세요'))
   var dog = new Dog (name, price, height, weight);
   dogs.push(dog);
   break;

   case '2':
   var output='';
   for(var i = 0; i < dogs.length; i++){
   output+=dogs[i].toString();
   }
   alert(output);
   break;

     case '3':
      flag= false;
      break;
   }
   while(flag);
   }
   </ script>