<최종 화면> 객체의 종류 및 생성자 사용, 정보의 은닉으로 변수 접근 방법, 객체 복사 등을 알아본다.
객체의 종류에 대해서 알아보자.
리터럴 객체는 객체를 생성하면서 설계하는 방식이다.
person의 멤버 함수도 호출 해보자.
위 사진처럼 person.show(); 호출했지만 화면에 아무것도 안보인다.
그 이유는 멤버 변수에 접근하려면 this. 키워드를 써줘야 한다.
그리고 객체에서 멤버 함수를 선언하는 문법은 정해져 있다. (객체 안에서 아래처럼 선언하면 에러남)
만약에 새로운 객체를 만들고 싶다면 다시 만들어야 한다.
멤버 함수에도 파라미터를 줄 수 있다.
person2.show에는 파라미터가 없다. 그래도 전달을 한다면?
show()의 내용이 실행되고 전달된 파라미터는 arguments에 저장된다.
person 객체에는 tel이라는 멤버 변수가 없지만 바로 접근하여 사용하면 멤버 변수가 생성이 된다.
멤버 함수도 선언을 안했지만 바로 사용하면, 객체에 멤버 함수가 추가된다.
person 객체에는 addr이라는 멤버가 없지만 출력을 한다면?
객체에 addr이라는 멤버 변수가 추가되고 값은 undefined로 된다.
객체를 만들었을때, 생성자를 만드는 방법을 알아보자.
자바에서는 생성자의 이름이 클래스명과 같아야 하지만 JS에서는 상관없다. 아무 이름으로 가능하다.
(주의점 생성자의 멤버들은 this. 키워드를 사용해야 한다.)
만약 var 키워드를 사용하면 지역 변수로 된다.
여기서 약간 착각을 할 수 있다. stu.aaa하면 자동 입력이 된다. 하지만 내용은 완전히 다를 것이다.
자바 스크립트는 객체를 생성하고 나서도 멤버 변수를 추가할 수 있다.
그래서 생성자도 stu.aaa는 새로운 멤버변수를 만든 것이다. (당연히 값이 없으니, undefined)
위와 비슷하게 stu.addr이라는 없는 멤버 변수를 사용하면 만들게 된다. addr 멤버 변수를 만듬.
(this를 사용하지 않으면 멤버변수가 아니므로, 멤버변수는 없는 것이다.)
그러면 addr에 seoul을 출력하려면 전역변수이므로 addr을 사용하면 된다.
생성자 함수를 이용하면 쉽게 객체를 만들 수 있다. (이미 멤버 변수/메소드는 있기 때문에)
만든 stu2의 멤버 변수 값도 변경 가능하다.
그러나 변수에 하나씩 값을 대입하면, 여러줄이 되고 번거롭다.
메소드를 만들어서 멤버변수의 값에 대입해보자.
메소드를 굳이 만들지 않고, 객체르 생성할때 파미터로 값을 전달해주자.
객체를 생성할때 값을 전달 받으려고 3개를 입력 받는 형식으로 만들었는데, 만약 값을 전달하지 않는다면?
오류가 나지 않고 멤버변수에 값이 없게 나온다.
추세는 getter,setter를 선호하지는 않지만(속도 측면),
접근성,정보의 은닉 등을 생각한다면.. 아래와 같이 메소드를 만들어서 사용해보자.
in 키워드를 사용해보자. (포함되어 있는지 결과를 boolean형식으로 반환해준다.)
stu2에는 name, age, major, show 속성이 있다.
JS에서는 변수가 없어도 에러가 안나고, 없다면 만들기 때문에 의도와 다르게 동작을 할 수 있다.
그래서 in을 아래 사진과 같이 사용할 수 있다.
객체 안에 객체가 멤버로도 있을 수 있다.
멤버 변수를 연관 배열처럼 사용가능하다. ['속성명']
객체를 복사하는 Clone을 사용해보자.
p1와 똑같은 내용을 가지고 있는 p2를 만들어 보자. (p1을 복사해서 p2를 만들면 된다.)
JS에서 접근 제한자는 없지만 ,정보은닉을 하고 싶다면 클로저 변수를 이용해보자.
name과 age는 지역변수로 선언한다. 그리고 객체명. name으로 접근하면 사용이 불가하다. 이것을 멤버 메소드로 접근한다. 지역 변수가 메모리에서 지워지지 않는 이유는 클로저를 이해하면 된다.
위 사진과 같이 출력도 가능하지만 지역변수에 접근하여 값 변경도 가능하다.
<복붙용 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS의 Object</title>
<script>
// 자바 스크립트에서 객체의 2가지 종류
// 1. 내장 객체 document, window, naviation.. etc.. Date(), String(), Array()..
// 2. 사용자 정의 객체
// 사용자 정의 객체를 만드는 2가지 방법(ECMA 버전부터 class키워드 생김 :
//즉, 지금은 방법 3가지임. 3번째 방법은 뒤 챕터에서 소개)
// 1) 리터럴 객체 [객체를 생성하면서 설계하는 방식]
var person= {
//멤버변수 - 속성 property
name:"sam",
age:20,
//멤버함수 - 메소드 method
show: function(){
// document.write("show: "+name+" , "+age+"<br>"); //<-name,age를 알아듣지 못함. :error
//JS에서는 멤버변수(속성)을 사용할 때 반드시 this. 키워드가 필요함!!
}
// 메소드를 아래처럼 선언적 함수 문법으로 만들면 에러!! (여기는 객체)
// function aaa(){
// }
};
// 객체 멤버(속성) 출력
// 객체 메소드 호출
// 새로운 person객체를 또 만들고 싶다면..
// 또다시 리터럴 객체를 다 만들어야 함.
var person2={
name:"robin",
age:25,
show:function(){
},
// 멤버함수 추가 - 파라미터 가능
add:function( a, b){
var c= a+b;
}
}//person2 ..
person2.add(5,3);
// 자바스크립트는 유연한 언어여서 객체 생성 후에 멤버추가가 가능함!!
// 멤버함수도 추가가 가능함
person.out= function(){
}
person.out(); // 메소드 호출
// 값을 대입하지 않은 멤버변수(속성)을 출력하면? 새로운 변수는 추가되고 값은 undefined로 됨
// 리터럴 객체는 만들기 편해서 유용해 보이지만
// 여러개의 속성과 메소드를 가졌을 때 or 같은 객체를 여러개 만들때 모두 사용이 불편함.
document.write('<hr>');
// 2) 생성자 함수 [자바의 class만드는 방법과 비슷- new키워드 사용]
function Student(){
//속성[멤버변수] : this.키워드가 반드시 있어야 함!!
this.name="aaa";
this.age=20;
this.major="android";
// var name; // 이건 멤버변수가 아니라 지역 변수임!!
// 메소드
this.show= function(){
}
var aaa="aaa"; //이건 멤버변수가 아니라 지역 변수임!!
addr="seoul";//이건 전역변수
// 멤버변수의 값을 대입해주는 메소드
this.setMembers= function(name, age, major){
this.name=name;
this.age=age;
this.major=major;
}
}//function Student ..생성자..
// 위에서 만든 생성자 함수를 객체로 만들어 사용하기
var stu= new Student();
// 생성자 함수를 이용하면 손쉽게 다른 객체를 생성할 수 있음.
var stu2= new Student();
// 멤버변수가 많으면... 한번에 값을 대입하기 위한 메소드가 있으면
var stu3= new Student();
stu3.setMembers("ccc",30,"mobile");
// 여기까지 하고 나니.. 객체를 생성할때 멤버값을 전달하면..
// 코드가 더 간결함.. 생성자 함수!!
function Stu(name, age, major){
// 멤버 변수에 대입
this.name=name;
this.age=age;
this.major=major;
this.show= function(){
}
//getter, setter
this.getName= function(){
return this.name;
}
this.setName= function(name){
this.name=name;
}
}
// 생성하면서 값 전달
var s= new Stu("Lee",20,"Javascript");
s.show();
// 혹시 값을 전달하지 않는 다면?? -undefined
var s2= new Stu();
//getter, setter
s2.setName('Hong');
var name=s2.getName();
//////////////////책 외에 추가적인 것들///////////////////////
document.write('<hr>');
// in 키워드 : 연산자
document.write('<br>');
// 객체안에 객체가 멤버로 있을 수 있음.
document.write('<hr>');
var flight={
airline:'Korean air',
number:777,
arrival:{
nation:'japan',
city:'tokyo'
}
}
// 멤버변수를 연관배열처럼 코딩하는 것이 가능함
var p1={
name:"aaa",
age:20,
show:function(){
}
}
// Clone : 객체 복제하기
var p2= Object.create(p1);
document.write("<hr>");
// 접근제한자 : JS에는 없는 개념///
//혹시 없지만 멤버변수를 보호하고 싶다면??
// 즉, JS에서 캡슐화를 하고 싶다면..
// 정보은닉을 하고 싶다면.. 클로저변수를 활용!!
function Test(){
// 멤버변수를 클로저 변수로 대신 만들기
// 사실 스냥 지역 변수인데 이 지역변수를 다른 함수(메소드)에서 사용하면 메모리에 남아있다는 특징을 이용
var name;
var age;
// 지역 변수를 사용하는 메소드
this.setName= function(n){name = n;}
this.getName= function(){return name;}
this.setAge= function(a){age = a;}
this.getAge= function(){return age;}
this.show= function(){
}
}
var t= new Test();
t.setName("sam");
t.setAge(25);
t.show();
</script>
</head>
<body>
</body>
</html>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글
| HTML+Java script (기초) Date (날짜 객체) (0) | 2019.12.13 |
|---|---|
| HTML + Java script (기초) 프로토타입 (전역 변수,함수 처럼.. 상속처럼) (0) | 2019.12.13 |
| HTML+Java script (기초) 함수 사용 (0) | 2019.12.12 |
| HTML+ Java script (기초) dialog (0) | 2019.12.11 |
| HTML+Java script (기초) 배열 (0) | 2019.12.11 |
댓글