자바스크립트 강좌 9 - 클래스, 생성자, 프로토타입 속성

8. 자바스크립트 클래스, 생성자, 프로토 타입

 

1. 함수
 

1 - 1. 자바스크립트의 (클래스, 생성자) 라는 단어는 코드 설계상 의미 부여한 이름일 뿐이지 실제 언어에 구현되어 있는
기능이 아닙니다.

1 - 2. 생성자 (new 연산자와 함께 객체를 생성 하도록 설계된 함수를 생성자라고 합니다.)

1 - 3. 프로토 타입과 상속 (함수 객체의 프로퍼티이자 호출 가능한 맴버 그룹을 나타내며, 그리고 각 맴버 끼리의 상속 또한 가능합니다.) * 여기서 상속이란 단어 또한 의미상 부여한 이름일 뿐입니다.

1 - 4. 상속 없이 확장하기

1 - 5. constructor, instanceof 연산자란?

1 - 6. 객체 타입 판단하기 (typeof 연산자를 활용한 객체 타입 검사) 

2. 예제 코드
 

1. /*
2.  
3. 2. [1 - 2] 예제 코드
4.  
5. */
6.  
7. function fn(){
8.    
9.     this.x = 'x';
10.     this.y = 'y';
11.  
12.     return this;
13. };
14.  
15.  
16. // 여기서 객체의 맴버 구조를 가지고 있는 설계도인 fn을 클래스라 하며, 인스턴스 생성을 위한 함수인 fn()을 생성자 함수라 부릅니다.
17. var o = new fn()
18.  
19. /*
20.  
21. 2. [1 - 3] 예제 코드
22.  
23. */
24.  
25.  
26. function fn(){
27.    
28.     this.x = 'x';
29.     this.y = 'y';
30.  
31.     return this;
32. };
33.  
34. fn.prototype.getX = function(){
35.     return this.x;
36. };
37.  
38. function fn1(){
39.     return this;
40. };
41.  
42. // 프로토타입 맴버에 fn 객체를 추가(상속) 한다.
43. fn1.prototype = new fn();
44.  
45. alert(new fn().getX()); // x
46. alert(new fn1().getX()); // x
47.  
48.  
49. /*
50.  
51. 2. [1 - 4] 예제 코드
52.  
53. */
54.  
55. function fn(){
56.    
57.     this.x = 'x';
58.     this.y = 'y';
59.  
60.     return this;
61. };
62.  
63. fn.prototype.getX = function(){
64.     return this.x;
65. };
66.  
67. function fn2(){
68.  
69.     this.x = 'x1';
70.     this.y = 'y1';
71.  
72.     return this;
73. };
74.  
75.  
76. for (var n in fn.prototype){
77.     fn2.prototype[n] = o[n];
78. }
79.  
80. alert(new fn2().getX()); // x1
81.  
82. /*
83.  
84. 2. [1 - 5] 예제 코드
85.  
86. */
87.  
88. function fn(){
89.    
90.     this.x = 'x';
91.     this.y = 'y';
92.  
93.     return this;
94. };
95.  
96.  
97. //new fn()객체의 생성자함수 fn을 반환합니다.
98. alert(new fn().constructor); // fn
99.  
100. //new fn()객체는 fn 생성자함수로 부터 생성되었습니다.
101. alert(new fn() instanceof fn); // true
102.  
103.  
104. /*
105.  
106. 2. [1 - 6] 예제 코드
107.  
108. */
109.  
110. // 객체는 당연히 object 반환한다.
111. alert(typeof {}); // obejct
112.  
113. // 자바스크립트에서 배열은 객체이기 때문에 object를 반환한다.
114. alert(typeof []); // object
115.  
116. // null 또한 객체이다.
117. alert(typeof null); // object
118.  
119. // undefined는 undefined를 반환한다.
120. alert(typeof undefined); // undefined
121.  
122.  
123. /*
124.  
125. 위에서 보는 바와 같이 함수 내부에서 매개변수 타입을 검사할때 단순히 typeof로만 검사하는것은 조금 무리가 따릅니다.
126.  
127. 이를 좀 더 보안하기 위한 방법으로 아래와 같은 방법이 있을수 있습니다.
128.  
129. */
130.  
131. // constructor
132. alert(typeof {} === 'object' && {}.constructor === Object); // true
133. alert(typeof [] === 'object'  && [].constructor === Array); // true
134. alert(typeof 'str' === 'string'  && 'str'.constructor === String); // true
135.  
136. // instanceof
137. alert(typeof {} === 'object' && {} instanceof Object); // true
138. alert(typeof [] === 'object' && [] instanceof Array); // true

 

위 포스트에 대한 더 자세한 내용은 아래 이전 포스트를 참조 하시기 바랍니다.

자바스크립트 함수 1

자바스크립트 함수 2

자바스크립트 함수 3

자바스크립트 함수 4

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