객체 (Object)

객체

- 속성(property)과 메서드(method) 의 집합

- for in 반복문 사용

- '.' 또는 '[]' 연산자로 객체 속성에 접근

- 객체가 변수에 할당될 때 그 변수는 포인터이다.

- 자바스크립트에서는 함수도 객체로 취급

객체의 생성

var dog1= {

name: "백구",

weight: 40,

breed: "똥개",

loves: ["걷기","공 물어오기"],

bark: function() {if(dog1.weght > 30)

alert("멍멍 멍멍!");

else alert("깽깽 깽깽!");

}

};

예제1

object1.html

for(var key in dog1){

document.write(key+":"+dog1[key]+"

");

}

document.write("

");

dog1.weght = 25;

dog1["breed"] = "진돗개";

dog1.loves[1] = "도둑 잡기";

dog1.age = 5;

dog1.bark();

for(var key in dog1){

document.write(key + ":" + dog1[key] + "

");

}

document.write("

");

dog1.loves.push("뼈다귀 씹기"); // loves 배열에 내용 추가

delete dog1.age; // age 항목 삭제

for(var key in dog1){

document.write(key + ":" + dog1[key] + "

");

}

예제2

object2.html

<<script>// zz

var student = {이름: "거시기",국어 : 92,수학 : 98,영어 : 96,과학 : 98};  var output="";  output += "이름 : " + student.이름 + "\n";  output += "국어 : " + student.국어 + "\n";  output += "수학 : " + student.수학 + "\n";  output += "영어 : " + student.영어 + "\n";  output += "과학 : " + student.과학 + "\n";  output += "총점 : " + student.국어 + student.수학 + student.영어 + student.과학) + "\n";  alert(output);

// ]]></script>

객체 관련 키워드 "with"

<<-script>// 

with(student) {   output += "이름 : " + 이름 + "\n";   output += "국어 : " + 국어 + "\n";   output += "수학 : " + 수학 + "\n";   output += "영어 : " + 영어 + "\n";   output += "과학 : " + 과학 + "\n";   output += "총점 : " + (국어 + 수학 + 영어 + 과학) + "\n";  }  alert(output);   // with 사용 시, 앞에 계속 붙어 다니던 student. 객체명이 생략된다. (중괄호 안에서만) // ex) student.국어 --> 국어

</script>

객체 관련 키워드 "in" // key 가 객체 안에 있으면 true 반환, 없으면 false 반환

<<script>// <![CDATA[

var student = {이름: "거시기",국어: 92,수학: 98,영어: 96,과학: 98};  var output = "";  output += "'이름' in student : " + ('이름' in student) + "\n";  output += "'성별' in student : " + ('성별' in student);                                    // '성별' 이 student 라는 객체 안에 없으면 true 반환, 없으면 false 반환  alert(output);

// ]]></script>

생성자 만들기 - this

--------------------------------

// dog1

name: 백구 

weight: 35

breed: 진돗개

bark: function() {

 if(dog1.weight > 30)

   alert("멍멍 멍멍!");

 else alert("깽깽 깽깽!");}

---------------------------------

---------------------------------

// dog2

name: 쿠키

weight: 20

breed: 말라뮤트

bark: function() {

 if(dog1.weight > 30)

   alert("멍멍 멍멍!");

 else alert("깽깽 깽깽!");}

---------------------------------

---------------------------------

// dog3

name: 말리

weight: 50

breed: 사모예드 

bark: function() {

 if(dog3.weight > 30)

   alert("멍멍 멍멍!");

 else alert("깽깽 깽깽!");}

---------------------------------

// dog1,dog2,dog3 을 생성자 this로 한번에 묶을 수 있다. (아래 참조)

---------------------------------

//Dog (name,weight,breed)

this.name = name; 

this.weight = name;

this.breed = breed;

bark: function() {

 if(this.weight > 30)

   alert("멍멍 멍멍!");

 else alert("깽깽 깽깽!");}

---------------------------------

생성자 만들기 - constuctor1

<script> 

 function Dog(name,weght,breed) {

  this.name = name;

  this.weight = weight;

  this.breed = breed;

  this.bark = function() {

   if(this.weight > 30)

    alert(this.name + "가 멍멍 짖습니다.");

   else alert(this.name + "가 깽깽 거립니다.");

  };

 }

 var dog1 = new Dog("백구",35,"진돗개");    dog1.bark();

 var dog2 = new Dog("쿠키",20,"말라뮤트");  dog2.bark();

 var dog3 = new Dog("말리",50,"사모예드");  dog3.bark();

</script>

생성자 만들기 - constuctor2

문제 - 생성자 Stu를 이용해 아래의 자료를 입력받아 총점과 평균을 구하여 출력 결과와 같이 출력하는 자바스크립트를 작성하시오.

[+]입력자료

 - stu1 = {이름 : 김태희,국어 : 87,수학 : 98,영어 : 88,과학 : 95}

 - stu2 = {이름 : 이보영,국어 : 92,수학 : 98,영어 : 96,과학 : 98}

 - stu3 = {이름 : 이종석,국어 : 98,수학 : 96,영어 : 96,과학 : 92}

 - stu4 = {이름 : 송중기,국어 : 97,수학 : 98,영어 : 98,과학 : 98}

[+]출력결과

자바스크립트 알림                             | X |

 이름      총점    평균

 김태희    368     92     

 이보영    384     96

 이종석    382     95.5

 송중기    391     97.75

                                          | 확인 |

Ans)

<script>

 function stu(name,kor,math,eng,sci){

  this.name = name;

  this.kor = kor;

  this.math = math;

  this.eng = eng;

  this.sci = sci;

  this.tot = function() {

                 return this.kor + this.math + this.eng + this.sci;};

  this.ave = function() {

                 return this.tot()/4; };

  this.output = function() {

                 return this.name + "   " + this.tot() + "    " + this.ave() + "\n";};

 }

 var out = "이름    총점    평균\n";

 var stu1 = new stu("김태희",87,98,88,95);

 var stu2 = new stu("이보영",92,98,96,98);

 var stu3 = new stu("이종석",98,96,96,92);

 var stu4 = new stu("송중기",97,98,98,98);

 

 out += stu1.output();

 out += stu2.output();

 out += stu3.output();

 out += stu4.output();

 alert(out);

</script>

constructor_array constuctor 예제를 배열을 사용하여 작성.

<script>

 //stu 객체 생성

 var stu = [];

 stu.push(new stu("김태희",87,98,88,95));

 stu.push(new stu("이보영",92,98,96,98));

 stu.push(new stu("이종석",98,96,96,92));

 stu.push(new stu("송중기",97,98,98,98));

 var out = "이름   총점   평균\n";

 for(var i in stu){

  out += stu[i].output();

 }

 alert(out);

</script>

프로토타입

 - 객체를 생성하면 함수가 중복되어 메모리 낭비

 - 내부에는 속성만, method는 prototype에 넣기

 - 모든 자바스크립트 합수는 prototype 객체를 가진다.

------------ 설명 ------------

------------stu1-------------

이름: 김태희

국어: 87

수학: 98

영어: 88

과학: 95

getSum()

getAve()

output()

-------------------------------

// 프로토 타입으로 분리 후

-----------stu1------------------

이름: 김태희

국어: 87

수학: 98

영어: 88

과학: 95

-------------------------------

-----------stu.prototype------------

getSum()

getAve()

output()

---------------------------------

만약 객체가 여러개라면, 저 똑같은 내용의 함수들(getSum(), getAve(), output())은

각 객체마다 있어야 하므로 메모리와 소스 크기등을 많이 잡아 먹는다.

하지만 그 공통된 함수들을 prototype으로 묶음으로서 메모리 효율과 소스코드의 크기를 줄일 수 있다.

예제. prototype

<script>

 function stu(이름, 국어, 수학, 영어, 과학) {

  this.이름 = 이름;

  this.국어 = 국어;

  this.수학 = 수학;

  this.영어 = 영어;

  this.과학 = 과학;

 }

 stu.prototype.getSum = function() {

  return this.국어 + this.수학 + this.영어 + this.과학;

 };

 stu.prototype.getAve = function() {

  return this.getSum() / 4;

 };

 stu.prototype.output = function() {

  return this.이름 + "   " + this.getSum() + "     " + this.getAve();

 };

 

 var out = "이름    총점    평균\n";

 var stu1 = new stu("김태희",87,98,88,95);

 var stu2 = new stu("이보영",92,98,96,98);

 var stu3 = new stu("이종석",98,96,96,92);

 var stu4 = new stu("송중기",97,98,98,98);

 out += stu1.output();

 out += stu2.output();

 out += stu3.output();

 out += stu4.output();

 alert(out);

</script>

접근 제어자

예제 - access1.html

<script>

 var student + function(id,name){

  var id = id;         //지역변수  --> 해당 객체의 내부에서만 접근 가능

  this.name = name;    //전역변수  --> 객체의 외부에서도 접근 가능.

 }

 var my = new student("130101","Nuguge");부

 alert(my.id + "," + my.name);

</script>

        ----결과----

자바스크립트 알림       | X |

  undefinded,Nuguge

                     | 확인 |

        ------------

캡슐화

 - 클래스 내부의 연산과정을 숨겨 보다 독립적인 코드 구성

 - 예기치 못한 접근을 차단하여 무분별한 사용 방지

예제 - access2.html

<script>

 var People = function(na,ag) {

  var name = na;

  var age = ag;

  

  // 아래의 과정을 숨김 (var로 선언) --> 연산과정을 숨긴다.

  var isAdult = function() {

   if(age>19) return true;

   else return false;

  }

  this.viewMyInfo = function() {

   if(isAdult()) {

    return name + "님은 성인입니다.";

   }

   else {

    return name + "님은 미성년 입니다.";

   }

  } 

 }

 var people = new People("Nuguge",26);

 alert(people.isAdult());

// isAdult() 함수는 var(지역) 으로 선언 했기 때문에, 외부에서 사용할 수 없다. --> 안뜬다.

 alert(people.viewMyInfo()); 

</script>

예제 - access3.html

<script>

 function Person(firstName, lastName) {

  this.constuctor.population ++;

  var alive = true;

  function getFullName() {

   return lastName + "," + fistName;

  };

  this.toString = function() {

   return getFullName();

  };

  this.isAlive = function() {

   return alive;

  };

  this.age = 1;

 };

 Person.prototype.addAge = function() {this.age++;};

 Person.population = 0;

 Person.showTotalPopulation = function(msg) {

  alert(msg + ":" + Person.population);

 };

 var PersonList = [new Person("jae-Seok","Hong"), new Person("Ji-Sung","Park)];

 alert(personList[0] + "과 " + personList[1] + "이 태어났습니다.");

 alert("현재 인구는" + Person.population + "명 입니다.");

 for(var i=0;i<25;i++){

  personList[0].addAge();

  personList[1].addAge();

 }

 alert(personList[0] + "은 " + personList[0].age + "살 입니다.");

 Person.showTotalPopulation("총 인구");

</script>