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;//これは間違っています.このように指針は親の構造関数を指します.
これで父の方法も手に入ります.
サブタイプの方法は、このプロトタイプを「継承」してから書きます.
以下はテストコードです.
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>