5. 객체(Object)
JavaScript에서 객체(Object)는 속성(property), 메서드(method)의 집합입니다. 속성(property)은 객체(Object)의
멤버로 속성값으로는 정수값, 실수값 같은 단순 데이터부터 객체(Object),
함수(Function)이 올 수 있습니다. 다음으로
메서드(method)는 객체(object)의 멤버로 일종의
함수를 의미합니다.
JavaScript에는 기본적으로 웹 브라우저와 관련된 window, document와
같은 객체(Object), 내장 객체(object)인 Array, String, Date, Error, Math 같은 객체들이 정의되어 있어 이를 필요할 때 사용할
수 있으며 마지막으로 여러분의 필요에 따라 정의하여 사용 가능한 사용자 정의 객체(Object)로 구분할
수 있습니다.
여기서는 사용자 정의 객체(Object)를 어떻게 생성하고 생성된 객체에 속성, 메서드를 어떻게 추가하여 사용 가능한 지에 대해서 집중적으로 다루며 이미 정의된 클래스들은 예제들을 통해서
살펴봅니다.
5.1 객체(object)의 생성
객체를 생성하는 방법은 크게 생성자를 이용한 방법과
object 표기 방법인 중괄호( { } )를 이용한 방법으로 나눌 수 있으며 생성자를
이용한 방법은 다시 Object() 생성자를 이용한 방법과 생성자 함수(constructor function)를 이용한 방법으로 나눌 수 있습니다.
5.1.1
Object() 생성자(constructor)를 이용하여 객체 생성
Object() 생성자를 이용한
객체 생성은 new 키워드와 함께 다음과 같은 형식으로 객체를 생성할 수 있습니다.
var 생성할객체이름 = new Object();
그리고 생성된
객체에 필요한 속성들을 추가하거나 메서드를 추가하여 사용하면 되는데 여기서 속성(property)은
객체의 정적인 특성을 나타내고 메서드는 객체의 행동과 같은 동적인 특성을 나타냅니다.
예를 들면 자동차(car)라는 객체를 생각해보면 차의 색상(color)이나 엔진(engine) 같은 경우는 차(car)의 속성이라고 볼 수 있으며 차(car) 객체가 출발(start)한다는지, 정지(stop)한다는지, 속도를 높이는 동작(accelerate) 같은 것들은 차(car) 객체의 메서드라고 볼 수 있습니다.
객체에 속성(property) 추가하기
객체를 생성한 후 생성된 객체에 속성을 추가하는 방법은 다음과 같이 생성된 객체 다음에 도트(.)가 오고 뒤이어 추가할 속성이 오며 속성값을 설정해서 사용합니다.
객체이름.속성이름 = 속성값;
예를 들어 학생(student)라는 객체가 있을 때 해당 객체에 학번(student_number),
이름(name), 전화번호(phone_number) 속성을
설정한다면 다음과 같이 설정할 수 있다는 것입니다.
var student = new Object();
student.student_number=”20090917”;
student.name=”홍길동”;
student.phone_number=”010-9292-5353”;
이제 예제를 하나 해볼까요? 메모장을 열어서 방금 전 설명한 student 객체를 이용하는 방법을 설명하는 코드를 다음과 같이 작성합니다.
<!DOCTYPE
HTML>
<html>
…
<script
type="text/javascript">
var student = new Object(); //student 객체 생성
student.student_number = "20090917";
student.name = "홍길동";
student.phone_number = "010-9292-5353";
document.write("student 객체의
학번 : "+ student.student_number+ " 이름 : " +
student.name + " 전화번호 : " + student.phone_number);
</script>
…
</html>
생성된 객체의 속성에 접근하는 방법은 도트( . )를 이용하여 “객체이름.속성이름”의 형태로
접근이 가능합니다. 이제 “ObjectConstructorEx.html”로
저장한 후 IE9를 통해서 보면 다음과 같이 생성된 student 객체에
설정된 속성값들을 출력합니다.
객체에 메서드(method) 추가하기
다음으로 생성된
객체에 메서드를 추가할 경우는 다음과 같은 2가지 형식 중 한 가지 형식을 사용하여 메서드를 추가할
수 있습니다.
객체이름.메서드이름 = 함수A;
…
function 함수A() {
처리할 코드들;
}
객체이름.메서드이름 = function 함수A{
처리할 코드들;
}
위와 같이 2 가지 유형 중 한 가지를 이용하여 메서드를 추가할 수 있습니다.
메서드(method) 호출하기
객체에 추가된 메서드를 호출하는 방법은 “생성된 메서드이름.메서드이름();” 형태로 호출할 수 있습니다. 방금 전 사용한 ““ObjectConstructorEx.html” 파일을
메모장으로 열고 <script> … </script> 블록 부분을 다음과 같이
수정합니다.
<script
type="text/javascript">
var student = new Object(); //student 객체 생성
student.student_number = "20090917";
student.name = "홍길동";
student.phone_number = "010-9292-5353";
student.display = object_display;
function object_display() {
document.write("student 객체의 학번 : "+ student.student_number+ " 이름 : " +
student.name + " 전화번호 : " + student.phone_number);
}
</script type>
위와
같이 첫 번째 유형을 이용하여 student 객체에 메서드를 추가할 수 있습니다. 만일 두 번째 유형을 이용할 경우는 다음과 같이 작성할 수 있습니다.
student.display = function
object_display() {
document.write("student 객체의 학번 : "+
student.student_number+
" 이름 : " + student.name + " 전화번호 : " + student.phone_number);
이제 호출을 위해서 <body>…</body> 블록 안에 다음과 같이 코드를 작성합니다.
<body>
<script type="text/javascript">
student.display();
</script>
</body>마지막으로 다른 이름으로 저장을 선택하고 “ObjectConstructorwithmethodEx.html”로 저장합니다. IE9로 열어보면 “ObjectConstructorEx.html” 때와 동일한 결과를 출력합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 5.1.3 object 표기방법인 {}을 이용한 객체 생성 (2) | 2013.08.06 |
|---|---|
| 5.1.2 생성자 함수(constructor function)를 이용하여 객체 정의하고 생성하기 (0) | 2013.08.06 |
| 4.3 다른 함수로부터 함수 호출 (0) | 2013.08.06 |
| 4. 함수(Function) (0) | 2013.08.06 |
| 3.4 switch … case 문 (0) | 2013.08.06 |