JS Class construct and exted
12540 ワード
最近はjavascriptにはまっています.心を潜めてJSの対象構造を詳しく整理してみました.
オブジェクト構造については、大体以下のいくつかのpatternがあります.
1.factory
工場のモデルは伝統的です.主にコンストラクションの中でObjectを一時的に作って、すべての資源をこの実例に与えて、最後にこの実例の引用に戻ります.対象を作る時にnewは必要ないです.工場のモードですか?
欠点は、最後の引用はもとのクラスではないので、クラスのprototypeは完全に廃棄されました.
2.constructor
構造モードは、Javaのスタイル、コンストラクタの中で、すべてのリソースをthisに割り当て、このthisの参照に戻ります.
欠点は、中の方法もデータと同じように、newの一例ごとに、もう一つ繰り返します.
悩んでいるのは、必ずnewを使います.そうでないと、中のthisの針はどこを指しているのか分かりません.
一般的に一番外側のwindowオブジェクトを指します.
また、jsコンストラクタの特徴は、コンストラクタが終了すると、コードが暗黙的に実行されます.
return this
3.factory/constructor mix
constructorの基礎の上で、中の方法を外に置いて、prototypeの属性を利用して、各実例にすべて訪問することができます.
静的な関数のようなものではないので、静的な関数であれば、インスタンスのデータに直接アクセスすることはできません.
相続については、思いもよらなかったですね.JSの継承を考えています.当時、JSの対象を使えないと信じていました.複雑にならないように…
JSには確かに継承された文法がないので、私達は人工的にそれを仮想しなければなりません.
主な継承手段は
1、針でごまかす
里子類では、父のようなクラスはクラスAです.
this.parent=クラス //針は親の構造関数を指します.
this.parent() //父の構造関数を実行して、ここで、父の種類のコンストラクタの中のthisはサブクラスを指して、すべての資源の引用はすべてサブクラスの中でだまされました.
delete this.parent//痕跡を破壊し、自分を欺く…
javascriptはみんながこのようにしているのを見て、意外にも足を運んで、特に2つの関数を提供しました.
call(this、param 1、param 2、param 3、…)
apply(this,Aray)
2つの関数は同じです.つまり後ろのパラメータが違っています.applyで2つ目以降のパラメータを全部配列に包んでいます.この2つの関数があれば、上の3つのコードに取って代わることができます.トリックはもっと専門的です.
しかし、父の種類のプロトタイプの方法は全部無くなりました.
2,原型を通して
プロトタイプチェーンはJSで研究に値するものです.ここでは継承に関するものだけを言います.
上記の方法は、コンストラクタ内のすべての資源を騙して入手しましたが、プロトタイプ内の方法は損失しました.
だからこれが補充されました.
親A、子B
B.prototype=A.prototype //このように書いたらよく分かります.針が合っています.
or
B.prototype=new A(); //なぜnewの例が返ってくるのかというと、答えはthisであり、prototypeの方法は、静的なクラスではなく、インスタンスによって直接呼び出される.
B.prototype=A;//これは間違っています.このように指針は親の構造関数を指します.
これで父の方法も手に入ります.
サブタイプの方法は、このプロトタイプを「継承」してから書きます.
以下はテストコードです.
オブジェクト構造については、大体以下のいくつかのpatternがあります.
1.factory
工場のモデルは伝統的です.主にコンストラクションの中でObjectを一時的に作って、すべての資源をこの実例に与えて、最後にこの実例の引用に戻ります.対象を作る時にnewは必要ないです.工場のモードですか?
欠点は、最後の引用はもとのクラスではないので、クラスのprototypeは完全に廃棄されました.
2.constructor
構造モードは、Javaのスタイル、コンストラクタの中で、すべてのリソースをthisに割り当て、このthisの参照に戻ります.
欠点は、中の方法もデータと同じように、newの一例ごとに、もう一つ繰り返します.
悩んでいるのは、必ずnewを使います.そうでないと、中のthisの針はどこを指しているのか分かりません.
一般的に一番外側のwindowオブジェクトを指します.
また、jsコンストラクタの特徴は、コンストラクタが終了すると、コードが暗黙的に実行されます.
return this
3.factory/constructor mix
constructorの基礎の上で、中の方法を外に置いて、prototypeの属性を利用して、各実例にすべて訪問することができます.
静的な関数のようなものではないので、静的な関数であれば、インスタンスのデータに直接アクセスすることはできません.
相続については、思いもよらなかったですね.JSの継承を考えています.当時、JSの対象を使えないと信じていました.複雑にならないように…
JSには確かに継承された文法がないので、私達は人工的にそれを仮想しなければなりません.
主な継承手段は
1、針でごまかす
里子類では、父のようなクラスはクラスAです.
this.parent=クラス //針は親の構造関数を指します.
this.parent() //父の構造関数を実行して、ここで、父の種類のコンストラクタの中のthisはサブクラスを指して、すべての資源の引用はすべてサブクラスの中でだまされました.
delete this.parent//痕跡を破壊し、自分を欺く…
javascriptはみんながこのようにしているのを見て、意外にも足を運んで、特に2つの関数を提供しました.
call(this、param 1、param 2、param 3、…)
apply(this,Aray)
2つの関数は同じです.つまり後ろのパラメータが違っています.applyで2つ目以降のパラメータを全部配列に包んでいます.この2つの関数があれば、上の3つのコードに取って代わることができます.トリックはもっと専門的です.
しかし、父の種類のプロトタイプの方法は全部無くなりました.
2,原型を通して
プロトタイプチェーンはJSで研究に値するものです.ここでは継承に関するものだけを言います.
上記の方法は、コンストラクタ内のすべての資源を騙して入手しましたが、プロトタイプ内の方法は損失しました.
だからこれが補充されました.
親A、子B
B.prototype=A.prototype //このように書いたらよく分かります.針が合っています.
or
B.prototype=new A(); //なぜnewの例が返ってくるのかというと、答えはthisであり、prototypeの方法は、静的なクラスではなく、インスタンスによって直接呼び出される.
B.prototype=A;//これは間違っています.このように指針は親の構造関数を指します.
これで父の方法も手に入ります.
サブタイプの方法は、このプロトタイプを「継承」してから書きます.
以下はテストコードです.
1.<html>
2. <head>
3. <title></title>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5. <style type="text/css">
6. form input[type="button"] {width: 150px}
7. </style>
8. <script type="text/javascript">
9. //declare Class in JavaScript
10.
11. /*
12. * factory pattern<br />
13. * point1, the duplication when new Car() every time<br />
14. * point2, new Car() and Car(), it's same result<br />
15. * point3, prototype is for Car, but the finger have been change in constructor,<br />
16. * so the method of prototype are be lost<br />
17. */
18. function demoFactory(){
19. //function Car, the same indicate, the comment isn't support by NetBean 6.8
20. //var Car=function(color, brand, engineLv){}, recommandation, for comment view
21.
22. /**
23. * function description
24. * @param color
25. * @param brand
26. * @param enginelv
27. * @return
28. */
29. var Car=function(color, brand, engineLv){
30. var e=new Object;
31. e.color=color;
32. e.brand=brand;
33. e.engineLv=engineLv;
34. e.getDetail=function(){alert(e.color+", "+e.brand+", "+e.engineLv);}; //*1
35. return e;
36. };
37. Car.show=function(){alert("zoo zoo")}; //it's ok
38. Car.prototype.show2=function(){alert("Car prototype")}; //it's wrong *3
39. var car1=new Car('black', 'Mazda5', '2.0L'); //*2
40. var car2=Car('black', 'Mazda5', '2.0L');
41. try{
42. car1.getDetail();
43. car2.getDetail();
44. Car.show();
45. car2.show2();
46. }catch(err){
47. alert(err);
48. }
49. }
50.
51. /**
52. * constructor/prototype mix parttern, <u>recommendation in <b>ECMSscript</b></u><br />
53. * point1, the "this" must be, else the color are belong "window", it mean window.color<br />
54. * point2, same as point1, but the question of duplication still be<br />
55. * point3, the error that method of prototype is solved<br />
56. */
57. function demoConstructor(){
58. var Car=function(color, brand, engineLv){
59. this.color=color; //*1
60. this.brand=brand;
61. this.engineLv=engineLv;
62. this.getDetail=function(){alert(this.color+", "+this.brand+", "+this.engineLv);}; //*2
63. };
64. Car.prototype.show2=function(){alert("Car prototype")}; //it's ok, *3
65. Car.show=function(){alert("zoo zoo")}; //it's ok
66. var car1=new Car('black', 'Mazda5', '2.0L');
67. var car2=new Car('silver', 'Mazda5', '2.0L');
68. try{
69. car1.getDetail();
70. car2.getDetail();
71. Car.show();
72. car2.show2();
73. }catch(err){
74. alert(err);
75. }
76. }
77.
78.
79. /**
80. * constructor parttern<br />
81. * point1, the "this" must be, else the color are belong "window", it mean window.color<br />
82. * point2, declare the method to prototype method, the duplication question are solved<br />
83. * point3, the error that method of prototype is solved<br />
84. */
85. function demoMix(){
86. var Car=function(color, brand, engineLv){
87. this.color=color; //*1
88. this.brand=brand;
89. this.engineLv=engineLv;
90. };
91. Car.prototype.getDetail=function(){alert(this.color+", "+this.brand+", "+this.engineLv);}; //*2
92. Car.show=function(){alert("zoo zoo")}; //it's ok
93. Car.prototype.show2=function(){alert("Car prototype")}; //it's ok, *3
94. var car1=new Car('black', 'Mazda5', '2.0L');
95. var car2=new Car('silver', 'Mazda5', '2.0L');
96. car1.getDetail();
97. car2.getDetail();
98. try{
99. Car.show();
100. car2.show2();
101. }catch(err){
102. alert(err);
103. }
104. }
105.
106. /**
107. * Extend demo: Object virtual<br />
108. * the expend is not support in JavaScript<br />
109. * so we must perform it throught by coding, and virtual the extend effect<br />
110. * point1, the prototype finger to CarGas, not Car, so the prototype method error
111. */
112. function demoExtend1(){
113. var Car=function(color, brand, engineLv){
114. this.color=color; //*1
115. this.brand=brand;
116. this.engineLv=engineLv;
117. this.getDetail=function(){alert(this.color+", "+this.brand+", "+this.engineLv);}; //*2
118. };
119. Car.show=function(){alert("zoo zoo")}; //it's ok
120. Car.prototype.show2=function(){alert("Car prototype")}; //it's ok, *3
121.
122. var CarGas=function(color, brand, engineLv, gasNo){
123. this.gasNo=gasNo;
124. this.extend=Car;
125. this.extend(color, brand, engineLv);
126. delete this.extend; //it's no mind, either it delete or not delete
127. }
128. var car=new CarGas("back", "Mazda5", "2.0L", "97");
129. try {
130. alert(car.gasNo);
131. car.getDetail();
132. Car.show();
133. car.show2(); //*1
134. } catch (err) {
135. alert(err);
136. }
137. }
138.
139. /**
140. * Extend Demo: Object virtual with method <b>call()</b> and <b>apply()</b><br />
141. * method <b>call</b> and <b>apply</b> is same except parameter<br />
142. * call's parameter: 1, "this", 2, param, 3, param, 4, param, ...<br />
143. * apply's parameter: 1, "this", 2, Array
144. */
145. function demoExtend2(){
146. var Car=function(color, brand, engineLv){
147. this.color=color; //*1
148. this.brand=brand;
149. this.engineLv=engineLv;
150. this.getDetail=function(){alert(this.color+", "+this.brand+", "+this.engineLv);}; //*2
151. };
152. Car.show=function(){alert("zoo zoo")}; //it's ok
153. Car.prototype.show2=function(){alert("Car prototype")}; //it's ok, *3
154.
155. var CarGas=function(color, brand, engineLv, gasNo){
156. this.gasNo=gasNo;
157. /*
158. this.extend=Car;
159. this.extend(color, brand, engineLv, gasNo);
160. delete this.extend;
161. */
162.
163. //Car.call(this, color, brand, engineLv);
164. Car.apply(this, [color, brand, engineLv]);
165. }
166. var car=new CarGas("back", "Mazda5", "2.0L", "97");
167. try {
168. alert(car.gasNo);
169. car.getDetail();
170. Car.show();
171. car.show2(); //*1
172. } catch (err) {
173. alert(err);
174. }
175. }
176.
177. /**
178. * Extend Demo: prototype mix<br />
179. * point1, CarGas prototype must be point to Car's <b>new Instance</b> or <b>Car.prototype</b><br />
180. * point2, this over Car's prototype method
181. */
182. function demoExtend3(){
183. var Car=function(color, brand, engineLv){
184. this.color=color; //*1
185. this.brand=brand;
186. this.engineLv=engineLv;
187. this.getDetail=function(){alert(this.color+", "+this.brand+", "+this.engineLv);}; //*2
188. };
189. Car.show=function(){alert("zoo zoo")}; //it's ok
190. Car.prototype.show2=function(){alert("Car prototype")}; //it's ok
191.
192. var CarGas=function(color, brand, engineLv, gasNo){
193. this.gasNo=gasNo;
194. Car.apply(this, [color, brand, engineLv]);
195. }
196. //CarGas.prototype=new Car(); //*1
197. CarGas.prototype=Car.prototype;
198.
199. //CarGas.prototype.show2=function(){alert("CarGas prototype")}; //*2
200. CarGas.prototype.show3=function(){alert("CarGas prototype")};
201.
202. var car=new CarGas("back", "Mazda5", "2.0L", "97");
203. try {
204. alert(car.gasNo);
205. car.getDetail();
206. Car.show();
207. car.show2();
208. car.show3();
209. } catch (err) {
210. alert(err);
211. }
212. }
213. </script>
214. </head>
215. <body>
216. <form action="" >
217. <input type="button" value="FACTORY DEMO" onclick="demoFactory()" /><br />
218. <input type="button" value="CONSTRUCTOR DEMO" onclick="demoConstructor()" /><br />
219. <input type="button" value="CONSTR/PROTO MIX DEMO" onclick="demoMix()" /><br />
220. <br />
221. <hr size="1" />
222. <input type="button" value="EXTEND DEMO1" onclick="demoExtend1()" /><br />
223. <input type="button" value="EXTEND DEMO2" onclick="demoExtend2()" /><br />
224. <input type="button" value="EXTEND DEMO3" onclick="demoExtend3()" /><br />
225. </form>
226. </body>
227.</html>