JavaScript
객체 생성
객체 생성
이번 시간은 객체 생성 하는 방법에 대해서 알아 볼게요.
function 을 이용하여 객체의 속성을 지정해주고 메소드를 만들어서 그 속성을 어떻게 할것인지에 대한 지정을 해주고, 마지막으로 객체를 생성 하는 절차로 진행 됩니다.
자동차를 비유로 들어볼건데요.
자동차에는 공통적으로 이름을 갖고 있고 또 엔진을 갖고 있고 제작사가 있고 색을 갖고 있고 하죠 이러한 것들이 속성에 해당 하는데요.
그럼 자동차에 시동을 건다 달린다 등은 메소드에 해당한답니다.
그리고 객체 생성이란 것은 자동차를 만드는 것이라고 보면 됩니다.
즉, 속성을 지정하면 어디회사의 차인지 바퀴가 엔진을 무엇을 사용하는지 색은 무슨 색인지 몇명이 탈 수 있는지 이러한게 되며
메소드는 달린다 , 선다, 커브를 돈다 등이 되고
객체를 생성하는 것은 공장에서 아우디 R8을 만드는 것에 해당 한다고 보면 됩니다.
그럼, 속성을 선언해 보겠습니다.
속성은 function을 사용해서 만듭니다.
속성 선언
// 자동차를 만드는 것을 예로 하므로 makeCar이라는 이름을 붙였으며,
//사용자가 원하는 이름을 사용합니다.
//속성은 this를 사용하여 선언합니다.
//이름 속성을 만든다고 하면
this.name; // 이렇게 정의 합니다.
//회사도 정의하면
this.company;
//자동차의 칼라 정의
this.color;
//탑승인원
this.numPeople;
//그리고 이러한 자료들로 어떻게 할지에 대한 메소드를 출력합니다. 그래야 메소드와 연결이 됩니다.
this.meth = showCar; // meth 라는 속성 안에 showCar이라는 메소드 명을 지정하여 선언합니다.
}
이제 메소드를 생성 해 봅시다. 이 메소드의 역할은 만든 자동차가 어디 회사의 것인지 몇명이 탈수 있는지 색은 무엇인지를 보여주는 기능을 합니다.
위의 속성 선언 소스에서 보면 메소드를 불러 오는 부분은 this.meth = showCar; 이곳 입니다.
그러므로 showCar이라는 메소드를 만들어 봅시다.
메소드도 속성 정의 처럼 function 을 사용하여 정의 합니다.
function showCar(){// showCar은 메소드의 이름
document.write("자동차 이름 : "+this.name+"<br />");
document.write("자동차 제조사 : "+this.company+"<br />");
document.write("자동차 탑승인원 : "+this.numPeople+"<br />");
document.write("차량 색상 : "+this.color+"<br />");
}
위와 같이 메소드를 만들고 이제 자동차를 만들어 봅시다. 이과정은 객체 생성이라고 합니다.
AUDI 사의 R8을 만들어 봅시다.
객체 생성
우선 객체를 생성할 변수를 선언 후 new라는 명령어를 사용하고 객체 속성을 선언한 함수명을 적어 줍니다.
그렇다면 이렇게 됩니다.
r8 = new makeCar();
그리고 자동차의 이름 등을 값으로 넣어 줍니다. this.name = "r8" 이런식으로요.
예제를 통해 알아 봅시다.
r8 = new makeCar();
r8.name="R8";
r8.company = "AUDI";
r8.color = "white";
r8.numPeople = 2;
r8.meth(); //메소드 호출
그럼 실전 예제를 통해서 테스트 해봅시다.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
function makeCar(){
this.name;
this.company;
this.color;
this.numPeople;
this.meth = showCar;
}
function showCar(){
document.write("자동차 이름 : "+this.name+"<br />");
document.write("자동차 제조사 : "+this.company+"<br />");
document.write("자동차 탑승인원 : "+this.numPeople +"<br />");
document.write("차량 색상 : "+ this.color +"<br />");
}
r8 = new makeCar();
r8.name="R8";
r8.company = "AUDI";
r8.color = "white";
r8.numPeople = 2;
r8.meth();
</script>
</head>
<body>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
r8이 아닌 다른 객체를 생성 한다면 같은 위와 같은 방법으로 다른 객체를 생성 하시면 됩니다.
a8.name="A8";
a8.company = "AUDI";
a8.color = "Red";
a8.numPeople = 4;
a8.meth();
위의 소스를 덧붙여서 시도 해 보면 또 하나의 객체 가 생성되어 출력 메소드를 통하여 정보를 보여 줍니다.
이것으로 객체에 대한 강좌를 마치겠습니다.
