이번 시간은 객체 생성 하는 방법에 대해서 알아 볼게요.
function 을 이용하여 객체의 속성을 지정해주고 메소드를 만들어서 그 속성을 어떻게 할것인지에 대한 지정을 해주고, 마지막으로 객체를 생성 하는 절차로 진행 됩니다.
자동차를 비유로 들어볼건데요.
자동차에는 공통적으로 이름을 갖고 있고 또 엔진을 갖고 있고 제작사가 있고 색을 갖고 있고 하죠 이러한 것들이 속성에 해당 하는데요.
그럼 자동차에 시동을 건다 달린다 등은 메소드에 해당한답니다.
그리고 객체 생성이란 것은 자동차를 만드는 것이라고 보면 됩니다.
즉, 속성을 지정하면 어디회사의 차인지 바퀴가 엔진을 무엇을 사용하는지 색은 무슨 색인지 몇명이 탈 수 있는지 이러한게 되며
메소드는 달린다 , 선다, 커브를 돈다 등이 되고
객체를 생성하는 것은 공장에서 아우디 R8을 만드는 것에 해당 한다고 보면 됩니다.
그럼, 속성을 선언해 보겠습니다.
속성은 function을 사용해서 만듭니다.
이제 메소드를 생성 해 봅시다. 이 메소드의 역할은 만든 자동차가 어디 회사의 것인지 몇명이 탈수 있는지 색은 무엇인지를 보여주는 기능을 합니다.
위의 속성 선언 소스에서 보면 메소드를 불러 오는 부분은 this.meth = showCar; 이곳 입니다.
그러므로 showCar이라는 메소드를 만들어 봅시다.
메소드도 속성 정의 처럼 function 을 사용하여 정의 합니다.
위와 같이 메소드를 만들고 이제 자동차를 만들어 봅시다. 이과정은 객체 생성이라고 합니다.
AUDI 사의 R8을 만들어 봅시다.
우선 객체를 생성할 변수를 선언 후 new라는 명령어를 사용하고 객체 속성을 선언한 함수명을 적어 줍니다.
그렇다면 이렇게 됩니다.
r8 = new makeCar();
그리고 자동차의 이름 등을 값으로 넣어 줍니다. this.name = "r8" 이런식으로요.
예제를 통해 알아 봅시다.
그럼 실전 예제를 통해서 테스트 해봅시다.
<!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이 아닌 다른 객체를 생성 한다면 같은 위와 같은 방법으로 다른 객체를 생성 하시면 됩니다.
위의 소스를 덧붙여서 시도 해 보면 또 하나의 객체 가 생성되어 출력 메소드를 통하여 정보를 보여 줍니다.
이것으로 객체에 대한 강좌를 마치겠습니다.
봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.
댓글 0개
정렬기준
