자바스크립트 강좌 6 - 객체

6. 자바스크립트 객체
 

1. 객체

1 - 1. 자바스크립트 객체는 여러 값들을 결합한 것으로서 각 값에 붙은 이름을 사용하여 원하는 값을 저장하고 읽어올 수 있습니다. 다시 말해 객체는 이름(key)과 값(value)으로 구성된 프로퍼티들의 집합입니다.

1 - 2. 객체 생성 (객체 리터럴 생성, new 연산자와 생성자 함수를 통한 생성)

1 - 3. 객체 프로퍼티 (프로퍼티 값에 접근하기 위해서는 마침표(.) 연산자를 사용하며, 접근 하려는 프로퍼티를 소유한
객체가 이 연산자의 좌측에 위치해야 합니다.

1 - 4. 프로퍼티 열거 (for in 문을 사용하여 객체 프로퍼티들을 열거하거나, 객체의 각 프로퍼티에 대한 작업을 반복적으로 수행 할 수 있습니다.

1 - 5. 프로퍼티 존재 확인하기

1 - 6. 프로퍼티 삭제하기 (delete 연산자를 사용하여 객체의 프로퍼티를 삭제 합니다.)

1 - 7. 연관 배열로서의 객체 (객체의 프로퍼티에 접근하기 위해 사용하는 마침표(.) 연산자와 더불어 배열에서 주로 사용하는 ['key']연산자를 사용해도 객체의 프로퍼티에 접근할 수 있다.

1 - 8 constructor 프로퍼티 (객체를 초기화하는데 싸용되는 생성자 함수를 반환합니다.)

1 - 9. hasOwnPropety 메서드 (객체의 프로퍼티 생성 유/무를 부울린값으로 반환합니다.) 

2. 예제 코드
  

1. /*
2.  
3. 2. [1 - 2] 예제 코드
4.  
5. */
6.  
7. // 객체 리터럴 생성
8.  
9. var o = {
10.     x: 'x',
11.     y: 'y'
12. };
13.  
14. alert(typeof o); // object
15.  
16.  
17. // new 연산자와 생성자 함수를 통한 생성)
18. function fn(){
19.    
20.     this.x = 'x';
21.     this.y = 'y';
22.  
23.     return this;
24. };
25.  
26. var o = new fn();
27.  
28. alert(typeof o); // object
29.  
30. /*
31.  
32. 2. [1 - 3] 예제 코드
33.  
34.  
35. */
36.  
37.  
38. var o = {
39.     x: 'x',
40.     y: 'y'
41. };
42.  
43. alert(o.x); // x
44.  
45.  
46. // new 연산자와 생성자 함수를 통한 생성)
47. function fn(){
48.    
49.     this.x = 'x';
50.     this.y = 'y';
51.  
52.     return this;
53. };
54.  
55. var o = new fn();
56.  
57. alert(o.y); // y
58.  
59.  
60. /*
61.  
62. 2. [1 - 4], [1 - 5] 예제 코드
63.  
64.  
65. */
66.  
67. var o = {
68.     x: 'x',
69.     y: 'y'
70. };
71.  
72.  
73. for (var n in o)
74. {  
75.     if (typeof o[n] !== undefined){
76.         alert(o[n]);
77.     }
78. }
79.  
80. // x, y
81.  
82. // 위 방법보다 Object.hasOwnProperty() 메서드를 활용한 아래 방법을 더 선호 합니다.
83.  
84. for (var n in o)
85. {  
86.     if (Object.hasOwnProperty.call(o, n)){
87.         alert(o[n]);
88.     }
89. }
90.  
91. // x, y
92.  
93. /*
94.  
95. 2. [1 - 6] 예제 코드
96.  
97.  
98. */
99.  
100. var o = {
101.     x: 'x',
102.     y: 'y'
103. };
104.  
105. //프로퍼티 삭제
106. delete o.x;
107.  
108. alert(typeof o.x); // undefined
109.  
110.  
111. /*
112.  
113. 2. [1 - 7] 예제 코드
114.  
115.  
116. */
117.  
118. var o = {
119.     x: 'x',
120.     y: 'y',
121.     z: function(){
122.         return this.x;
123.     }
124. };
125.  
126. alert(o['x']); // x
127. alert(o['z']()); // x
128.  
129.  
130. /*
131.  
132. 2. [1 - 8] 예제 코드
133.  
134.  
135. */
136.  
137. var o = {
138.     x: 'x',
139.     y: 'y'
140. };
141.  
142. alert(o.constructor); // Object
143.  
144.  
145. // new 연산자와 생성자 함수를 통한 생성)
146. function fn(){
147.    
148.     this.x = 'x';
149.     this.y = 'y';
150.  
151.     return this;
152. };
153.  
154. var o = new fn();
155.  
156. alert(o.constructor); // fn
157.  
158. /*
159.  
160. 2. [1 - 9] 예제 코드
161.  
162.  
163. */
164.  
165. function fn(){
166.    
167.     this.x = 'x';
168.     this.y = 'y';
169.  
170.     return this;
171. };
172.  
173. var o = new fn();
174.  
175. alert(o.hasOwnProperty('x')); // true
176. alert(o.hasOwnProperty('z')); // false

 

참고서적: (자바스크립트 핵심 가이드)