객체란?
객체란 실생활에서 흔히 볼수 있는 개,고양이,자동차,자전거..등등이 모두 객체라 할수 있는데
프로그래밍 세계에선 문법에 의해 형식이 짜여진 컴퓨터에 사용되는 요소들이 객체가 될수가 있다.
객체는 특성(Property)와 메소드(Method)로 나누어진다.
- 객체정의하기
자바스크립트에서 객체는 생성자 함수를 이용해서 만들수가 있다.
생성자 함수는 객체의 특성과 메소드를 정의하기 위해 사용되는 함수이다
생성자 함수 역시 일반함수나 변수 만드는 방법과 동일하다.
컴퓨터라는 객체를 만들어보자
컴퓨터의 특성중에는 CPU(중앙처리장치) ,RAM(메모리) , HDD(하드디스크) 등을 들수가 있는데
보기를 이용해 생성자 함수를 만들어보면
function computer(cpu,ram,hdd) {
this.cpu=cpu;
this.ram=ram;
this.hdd=hdd;
}
this는 객체자신을 가리킨다.
- 객체만들기
생성자 함수를 이용해서 객체를 만드는 방법은 new 라는 연산자를 통해 가능하다.
mycom = new computer("pentium4",256,20000)
mycom에는 cpu(pentium4),ram(256),hdd(20000)이라는 특성을 갖게 된다.
다르게 표현할수도 있다
mycom.cpu = "pentium4"
mycom.ram = 256
mycom.hdd = 20000
"." 연산자는 객체에 속한 특성이나 메소드를 구분해 주는 것으로
왼쪽에는 객체가 오고 오른쪽에는 특성이나 메소드가 온다
| 예제1 |
실행화면 |
<script language="javascript">
<!--
function computer(cpu,ram,hdd) {
this.cpu=cpu;
this.ram=ram;
this.hdd=hdd;
}
//끝 -->
</script>
<script language="javascript">
<!--
mycom = new computer("pentium4",256,20000);
document.write("CPU : " + mycom.cpu + "<br>");
document.write("RAM : " + mycom.ram + "<br>");
document.write("HDD : " + mycom.hdd + "<br>");
//끝 -->
</script>
|
CPU : pentium4
RAM : 256
HDD : 20000
|
- 객체 메소드 정의
메소드는 객체의 동작을 지정하는 함수이다
출력하는 함수를 메소드로 지정해 보면
function mirage10() {
document.write("CPU : " + this.cpu + "<br>");
document.write("RAM : " + this.ram + "<br>");
document.write("HDD : " + this.hdd + "<br>");
}
this는 특정 객체를 출력 시키는게 아닌 mirage10 함수를 사용하는 객체의 특성을
출력 하겠다는 의미이다.
그렇기 때문에 mirage10 함수를 메소드로 등록해서 사용하려면 생성자 함수에
mirage10을 넣어주어야 한다.
function computer(cpu,ram,hdd) {
this.cpu=cpu;
this.ram=ram;
this.hdd=hdd;
this.mirage10=print;
}
새로운 생성자 함수로 예를 들어보자
| 예제2 |
실행화면 |
<script language="javascript">
<!--
function mirage10() {
document.write("CPU : " + this.cpu + "<br>");
document.write("RAM : " + this.ram + "<br>");
document.write("HDD : " + this.hdd + "<br>");
}
//끝 -->
</script>
<script language="javascript">
<!--
function computer(cpu,ram,hdd) {
this.cpu=cpu;
this.ram=ram;
this.hdd=hdd;
this.mirage10=mirage10;
}
//끝 -->
</script>
<script language="javascript">
<!--
mycom = new computer("pentium4",256,20000);
mycom.mirage10();
//끝 -->
</script>
|
CPU : pentium4
RAM : 256
HDD : 20000
|
더 복잡한것 같지만 여러개를 출력 한다면 효과가 아주크다
- 객체 특성 정의
객체가 다른 객체의 특성으로 사용 될 수가 있다
사람이라는 객체의 특성으로 컴퓨터 객체를 사용해 보겠다
사람이라는 객체를 사용하기 위해 생성자함수를 만든다
function person(name , age , computer)
this.name=name;
this.age=age;
this.computer=computer;
}
이제는 person이란 객체를 만들다
Mr=new person("남자" , 21, mycom);
Miss=new person("여자" , 20 , mycom);
보기를 이용해서 에를 들어본다
| 예제3 |
실행화면 |
<script language="javascript">
<!--
function mirage10() {
document.write("성별: " + this.name + "<br>");
document.write("나이: " + this.age + "<br>");
document.write("CPU : " + this.computer.cpu + "<br>");
document.write("RAM : " + this.computer.ram + "<br>");
document.write("HDD : " + this.computer.hdd + "<br>");
}
//끝 -->
</script>
<script language="javascript">
<!--
function computer(cpu,ram,hdd) {
this.cpu=cpu;
this.ram=ram;
this.hdd=hdd;
}
//-->
</script>
<script language="javascript">
<!--
function person(name , age , computer) {
this.name=name;
this.age=age;
this.computer=computer;
this.mirage10=mirage10;
}
//-->
</script>
<script language="javascript">
<!--
mycom = new computer("pentium4",256,20000);
Mr=new person("남자" , 21, mycom);
Miss=new person("여자" , 20 , mycom);
document.write("<b>철수</b><br>")
Mr.mirage10();
document.write("<p><b>영희</b><br>")
Miss.mirage10();
//-->
</script>
|
철수
성별: 남자
나이: 21
CPU : pentium4
RAM : 256
HDD : 20000
영희
성별: 여자
나이: 20
CPU : pentium4
RAM : 256
HDD : 20000
|
- 참조배열 사용
배열과 유사하지만 다른점은 []안에 숫자대신 문자를 사용한다.
mycom의 특성값을 참조배열을 통해 접근하는 방법이다.
mycom.cpu = mycom[0] = mycom["cpu"] = "pentium4"
mycom.ram = mycom[1] = mycom["ram"] = 256
mycom.hdd = mycom[2] = mycom["hdd"] = 20000
- for ~ in 제어문
for ~ in 제어문은 객체에 들어있는 모든 특성들을 반복해서 보여주는 기능이 있다.
for다음에는 각각의 특성을 가리키는 변수가 오고 in 다음에는 특성을 알고자 하는 객체가 오게 된다.
위에 있는 mycom으로 예를 들어보자
for(var pro_ty in mycom) {
document.write(mycom[pro_ty]);
}
모든특성을 한번씩 보여주는 반복 제어문으로 pro_ty에는 첫번째값인 cpu가 들어가게 된다.
그리고 스크립트 문장을 실행한후 다시 for ~ in 제어문 처음으로 돌아가고 pro_ty는 두번째값인
ram이 들어간다.
for ~ in 제어문은 객체 의 특성을 모두 읽을때 까지 반복 실행이 된다.
| 예제4 |
실행화면 |
<script language="javascript">
<!--
function mirage10(object) {
for(var pro_ty in object) {
document.write(pro_ty + "=" + object[pro_ty] + "<br>");
}
}
function computer(cpu,ram,hdd) {
this.cpu=cpu;
this.ram=ram;
this.hdd=hdd;
}
//-->
</script>
<script language="javascript">
<!--
mycom = new computer("pentium4",256,20000);
document.write("computer<p>")
mirage10(mycom);
//-->
</script>
|
computer
cpu=pentium4
ram=256
hdd=20000
|
- 배열
makeArray라는 생성자 함수로 배열을 만들수가 있다.
function makeArray(n) {
this.length = n;
for(var i=1; i<=n;i++)
this[i] =0 (null값이 안나오게 초기화 해준다)
return this;
}
n에는 배열의 갯수를 지정해 준다.
생성자 함수로 배열을 선언한다
array = new makeArray(4);
4개의 변수 array[1],array[2],array[3],array[4] 을 사용 할 수 있게 된다.
| 예제5 |
실행화면 |
<script language="javascript">
<!--
function makeArray(n) {
this.length = n;
for(var i=1; i<=n;i++)
this[i] =0 ;
return this;
}
//-->
</script>
<script language="javascript">
<!--
array = new makeArray(4);
array[1] ="사과"
array[2] ="배"
array[3] ="수박"
array[4] ="참외"
document.write("배열테스트<p>");
for(var i=1;i<=4; i++){
document.write(i+"번" + " : " + array[i] + "<br>")
}
//-->
</script>
|
배열테스트
1번 : 사과
2번 : 배
3번 : 수박
4번 : 참외
|
