5.1.2 생성자 함수(constructor function)를 이용하여 객체 정의하고 생성하기
JavaScript에서 하나의 객체(object)가 생성할 때 내부적으로 생성자 함수를 호출할 수 있는데 이 생성자 함수 내에는 생성한 객체를 가리키기 위해서 this 라는 키워드가 사용하며 이 this 키워드를 이용하여 객체의 속성을 설정할 수 있습니다. 생성자 함수를 이용한 객체 정의 형식은 다음과 같습니다.
function 정의할객체이름(입력파라미터1, 입력파라미터2, …){
this.속성1= 속성값1;
this.속성2 = 속성값2;
…;
this.메서드1 = 호출할메서드이름1;
this.메서드2 = 호출할메서드이름2;
…
}
function 호출할메서드이름1()
{
처리할 코드들;
}
function 호출할메서드이름2() {
처리할 코드들;
}
위와 같이 객체를
생성하면서 this 키워드를 이용하여 생성하는 객체를 참조하도록 합니다.
그리고 도트( . ) 다음에 속성, 메서드들을
명시해서 객체를 정의합니다.
그 다음 위와 같은 객체를 생성하는 것은 다음과 같이 new 키워드를 이용하여 생성하게
됩니다.
var 생성할객체이름 = new 정의한객체이름;
var 생성할객체이름 = new 정의한객체이름(입력파라미터1, 입력파라미터2, …);
첫 번째의 유형은
단순히 정의된 객체 형태의 객체를 생성하는 것으로 객체의 속성값은 모두 “undefined”를 출력하게
됩니다.
다음으로 두 번째 유형은 입력파라미터1, 입력파라미터2,
… 와 같은 초기화 값에 의해 내부적으로 매칭되는 속성의 속성값을 초기화가 되며 이렇게 생성된 객체는 정의한 객체의 메서드를 이용하여
해당 객체의 속성에 접근하게 됩니다. 만일 여러분이 다른 객체 지향 언어를 이미 알고 있고 class 개념을 이해하고 있다면 class의 생성자와 비슷하다고
보시면 될 것 같습니다.
이제 메모장을 열어서 기본적인 HTML5 문서의 기본 코드와 함께 다음과 같이 작성합니다.
<!DOCTYPE HTML>
<html>
…
<script type="text/javascript">
//cities 객체 정의
function cities(innationName, incityname){
this.nationName = innationName;
this.cityName = incityname;
this.display = showCities; //display 메서드에 호출할 함수 명시
}
//display에 의해 호출될 함수 정의
function showCities() {
document.write("나라이름 : "+ this.nationName);
document.write("<br />도시이름 : "+ this.cityName);
}
</script>
…
<body>
<script
type="text/javascript">
var yourCities = new cities; //cities형 yourCities 객체 생성
yourCities.display(); //disply() 메서드 호출
document.write("<hr>");
var ourCities = new cities("대한민국", "서울"); //cities형 ourCities 객체 생성
ourCities.display(); //disply() 메서드 호출
</script></body>
</html>
위 코드에서 cities 객체를 nationName, cityName 속성을 갖고
해당 객체의 속성값을 나타내는 display() 메서드를 정의한 후
<body>…</body> 블록 내에서 정의된 cities 객체형
객체들을 2개 생성하여 해당 객체들의 속성값들을 출력하도록 합니다.
“functionConstructorEx.html”로 저장하고 IE9를 통해 보면 다음과
같이 나타납니다.
위 결과에서
보여지는 것처럼 body>…</body> 블록 내에서 정의된 cities 객체형 객체들이 생성되면서 해당 속성값을 초기화하는 입력 파라미터들이 없는 yourCities 객체의 경우는 속성값들이 모두 undefined로
나타나며 입력 파라미터들이 있는 ourCities 객체의 경우는 속성값으로 각각 "대한민국", "서울"으로 초기화되어 위와 같은 결과를 나타내는 것입니다.
위 코드에서 “//display에 의해 호출될 함수 정의”에
해당하는 호출되는 함수의 실제 코드 부분은 다음과 같이 cities 객체 정의 부분에 추가하여 사용할
수 있습니다.
function
cities(innationName, incityname) {
this.nationName = innationName;
this.cityName = incityname;
this.display = function() {
document.write("나라이름 : "+this.nationName);
document.write("<br
/>도시이름 : "+this.cityName);
}
}
위에 나타난
것처럼 생성자(constructor) 함수(function) 안에
함수(function)가 들어간 형태로 코드를 작성할 수 있으며 이와 같은 내부 함수를 무명(Anonymous) 함수 혹은 인라인(inline) 함수라고 부릅니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 5.2 대괄호(square bracket)를 이용한 속성(Property) 접근 및 디버깅 (2) | 2013.08.06 |
|---|---|
| 5.1.3 object 표기방법인 {}을 이용한 객체 생성 (2) | 2013.08.06 |
| 5. 객체(Object) (0) | 2013.08.06 |
| 4.3 다른 함수로부터 함수 호출 (0) | 2013.08.06 |
| 4. 함수(Function) (0) | 2013.08.06 |