Alex刺客

Dancing fingers, damage world. -- 舞动手指,破坏世界.
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  57 随笔 :: 0 文章 :: 76 评论 :: 0 Trackbacks
7.定义javaScript类或对象
  1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2<html xmlns="http://www.w3.org/1999/xhtml">
  3    <head>
  4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5        <title>定义类或对象</title>
  6        <script type="text/javascript">
  7            /*
  8            *    项目： book -> Javascript高级程序设计.pdf -> 第3章 -> 3.5定义类或对象
  9            *
 10            *    说明:    以下代码有 工厂方式，构造函数方式，原型方式，混合的构造函数+原型方式，动态原型方式，混合工厂方式定义类或对象
 11            *
 12            *     对JavaScript来说很有意思的一句话：构造函数只是函数，函数是对象，对象可以有属性和方法，属性可以是函数，函数也是类，
 13            *    函数也叫方法。(一切都很抽象。^_^,对初学者来说在代码中理解这句话很有帮助!)。
 14            *
 15            *    练习者: Alex刺客
 16            *
 17            *    日期: 2009-12-13
 18            */
 19            
 20            /*
 21                【 一 】.工厂方式
 22             */
 23             
 24             var oCar1 = new Object;
 25             oCar1.color = "red";
 26             oCar1.doors = 4;
 27             oCar1.mpg = 23;
 28             oCar1.showColor = function () {
 29                alert(this.color);
 30             }
 31             // oCar1.showColor();
 32             
 33             /*
 34                以上说明：因为对象的属性可在对象创建后动态定义。
 35                    创建对象oCar1。然后给它设置几个属性：它的颜色是红色，
 36                    有四个门，每加仑油可跑23英里。最后一个属性实际上是指向函数的指针，
 37                    意味着该属性是个方法。问题是这样不能创建多个oCar1的实例。
 38                
 39                于是就有了以下方式
 40             */
 41             
 42             function createCar(){
 43                var oTempCar = new Object;
 44                oTempCar.color = "red";
 45                oTempCar.doors = 4;
 46                oTempCar.mpg = 23;
 47                oTempCar.showColor = function () {
 48                    alert(this.color);
 49                }
 50                return oTempCar;
 51             }
 52             
 53             //var oCar1 = createCar();
 54             //var oCar2 = createCar();
 55             //oCar1.showColor();
 56             //oCar2.showColor();
 57             
 58             /*
 59                以上说明：这样就可以创建多个实例了，因为须要此" 类 "时可以调用createCar()
 60                    函数。此函数返回创建好的oTempCar" 类 "。
 61                    
 62                    为了能让他接收消息请看下面例子
 63             */
 64             
 65             function createCar1 (sColor, iDoors, iMpg) {
 66                var oTempCar = new Object;
 67                oTempCar.color = sColor;
 68                oTempCar.doors = iDoors;
 69                oTempCar.mpg = iMpg;
 70                oTempCar.showColor = function () {
 71                    alert(this.color);
 72                }
 73                return oTempCar;
 74             }
 75             
 76             //var oCar1 = createCar1('red',4,23);
 77             //var oCar2 = createCar1('bule',3,18);
 78             //oCar1.showColor();
 79             //oCar2.showColor();
 80             
 81             /*
 82                以上说明：第1点，当我看懂这段代码时，我才知道原来JavaScript这么有趣，
 83                对象可以不用 new ！用new 也一样的结果。而且每次调用函数createCar1()，
 84                都要创建新函数showColor(),意味着每个对象都有自己的showColor()版本。
 85                事实上，每个对象都共享了同一个函数。
 86                
 87                为了消除反复创建函数showColor() 继续往下看
 88             */
 89             
 90             function showColor () {
 91                alert(this.color);
 92             }
 93             
 94             function createCar2 (sColor, iDoors, iMpg) {
 95                var oTempCar = new Object;
 96                oTempCar.color = sColor;
 97                oTempCar.doors = iDoors;
 98                oTempCar.mpg = iMpg;
 99                oTempCar.showColor = showColor;
100                return oTempCar;
101             }
102             
103             //var oCar1 = createCar2("red", 4, 23);
104             //var oCar2 = createCar2("blue", 3, 18);
105             //oCar1.showColor();
106             //oCar2.showColor();
107             
108             /*
109                以上说明：在createCar2()函数之前定义showColor()方法，在createCar2()内部，
110                赋予对象一个指向已经存在的showColor()函数的指针。这样解决了重复创建函数
111                对象的问题.。但该函数看起来不像对象的方法。
112             */
113             
114             /*
115                    【 二 】构造函数方式
116                    Car在这也叫函数名，也叫类名
117             */
118             function Car (sColor, iDoors, iMpg) {
119                this.color = sColor;
120                this.doors =iDoors;
121                this.mpg = iMpg;
122                this.showColor = function () {
123                    alert(this.color);
124                }
125             }
126             
127             //var oCar1 = new Car("red", 4, 23);
128             //var oCar2 = new Car("blue", 3, 18);
129             //oCar1.showColor();
130             //oCar2.showColor();
131             
132             /*
133                以上说明：构造函数内部不再创建Object对象，而是使用了this关键字，所以要
134                使用new运算符来调用该构造函数(即所谓的" 类 ")，同是在执行第一行代码前先创
135                建一个对象，只有用this才能访问该对象(当前new所创建的对象)。然后可直接赋予this属性，默认情况下是
136                构造函数的返回值(不必明确使用 return)。但这种方式就像工厂函数一样，也会重复
137                生成showColor()函数。
138             */
139             
140             /*
141                【 三 】原型方式
142                看见这原型这两个字，就让我想起了虐杀原型^_^。
143                
144                这种方式利用了对象的prototype属性，可把它看成创建新对象所依赖的原型，
145                这里，用空构造函数来设置类名。然后所有的属性和方法都被直接赋予prototype属性。
146             */
147             
148             function Car1() {}
149             
150             Car1.prototype.color = "red";
151             Car1.prototype.doors = 4;
152             Car1.prototype.mpg = 23;
153             Car1.prototype.drivers = new Array("Mike","Sue");
154             Car1.prototype.showColor = function () {
155                alert(this.color);
156             }
157             
158              //var oCar11 = new Car1();
159              //var oCar12 = new Car1();
160             
161             /*
162                以上说明: 首先定义函数 Car1 ，基中无任何代码，再通过给 Car1 的prototype 属性添加
163                属性(color,doors,mpg,showColor)去定义Car1对象的属性。调用new Car1() 时，原型
164                所有属性都被立即赋予要创建的对象，意味着所有Car1实例存方的都是指向showColor()函
165                数的指针。从语义上讲，所有属性看起来都属于一个对象。使用该方法还能用instanceof运算符
166                检查给定变量的对象类型。
167                alert(oCar11 instanceof Car1);  // true
168                
169                但是：因为所有属性都是用了prototype属性定义的，所以问题又出来了。
170             */
171             
172              //var oCar11 = new Car1();
173              //var oCar12 = new Car1();
174              
175              //oCar11.drivers.push("Matt");
176              
177              //alert(oCar11.drivers);
178              //alert(oCar12.drivers);
179              
180              /*
181                以上说明：因为Car1类的对象的drivers属性是一个Array数组对象的引用(指向它的指针),
182                当Array数组对象发生变化时，所有Car1的对象的drivers属性都指向同一个Array数组，
183                所以就产生了以上结果。
184              */
185              
186              /*
187                 【 四 】混合的构造函数+原型方式
188              */
189              
190              function Car2 (sColor, iDoors, iMpg) {
191                this.color = sColor;
192                this.doors = iDoors;
193                this.mpg =iMpg;
194                this.drivers = new Array("Mike","sue");
195              }
196              
197              Car2.prototype.showColor = function (){
198                alert(this.color);
199              }
200              
201              //var oCar21 = new Car2("red",4,23);
202              //var oCar22 = new Car2("blue",3,18);
203              
204              //oCar21.drivers.push("Matt");
205              
206              //alert( oCar21.drivers);
207              //alert( oCar22.drivers);
208              
209              /*
210                以上说明： 用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数(方法)。
211                结果所有函数都只创建一次，而每个对象都具有自己的对象属性的实例。所有的非函数
212                属性都在构造函数中创建，意味着又可用构造函数的参数赋予对象属性的默认值。因为
213                Car2类的showColor()函数是用原型属性定义的，所以Car2类的实例都共同拥有指
214                向showColor()方法的指针.所以没有浪费内存。
215              */
216              
217              /*
218                【 五 】动态原型方式
219                上面的方法唯一点遗憾就是在Car2类外面定义的showColor()方法.
220                这个就是为了更完美！
221              */
222               
223               function Car3 (sColor, iDoors, iMpg) {
224                    this.color = sColor;
225                    this.doors = iDoors;
226                    this.mpg = iMpg;
227                    this.drivers = new Array("mike","sue");
228                    if(typeof Car3._initialized == "undefined"){
229                        Car3.prototype.showColor = function (){
230                            alert(this.color);
231                        }
232                        Car3._initialized = true;
233                        alert("以后我都不执行了!");
234                    }
235               }
236               
237               var car31 = new Car3("red",4,23);
238               var car33 = new Car3("blue",3,18);
239              
240              /*
241                以上说明：因为只在Car3类第一次创建实例时，只执行一次创建showColor()方法.
242                再以后创建Car3类的实例时都不执行了。而且这个类的全部成员，都在此类内部，
243                看着更像一个类。
244              */
245              
246              /*
247                【 六 】混合工厂方式
248                
249                这个方式我至今还没看懂，只在工厂方式定义好的函数前使用了一个new 不知道有什么好处！
250                请高手赐教！
251              */
252              
253              function Car4 () {
254                var oTempCar = new Object;
255                oTempCar.color = "red";
256                oTempCar.doors = 4;
257                oTempCar.mpg = 23;
258                oTempCar.showColor = function () {
259                    alert(this.color);
260                }
261                return oTempCar;
262              }
263              
264              var cat4 = new Car4();
265              
266              /*
267                提示：在jjavaScritpt中创建类最好的方式是用构造函数定义属性，用原型定义方法。
268              */
269        </script>
270    </head>
271    <body>
272    </body>
273</html>
posted on 2009-12-13 22:52 Alex刺客 阅读(215) 评论(0)  编辑  收藏 所属分类: JavaScript

只有注册用户登录后才能发表评论。
网站导航: