javascript面向对象应该如何创建对象

转载 2016年05月31日 15:22:25

   今天小编给大家讲讲javascript基础教程中的javascript面向对象的技术,这一次我们深入的学习一下JavaScrip基于t面向对象之创建对象,关于面向对象的一些术语这里就不给大家介绍了,不了解的朋友可以自行去查看。

       使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的对象。

ECMAScript 拥有很多创建对象的方法。

       一原始方式

       因为对象的属性可以在对象创建后动态定义,所有许多开发者都在JavaScript 最初引入时编写类似下面的代码:

[javascript] 

1. var Car = new Object();  

2. Car.color = "blue";  

3. Car.doors = 4;  

4. Car.mpg = 25;  

5. Car.showColor = function() {  

6.     return this.color;  

7. };  

8. document.write(Car.showColor());//输出:blue  

       在上面的代码中,创建对象Car。然后给它设置几个属性:它的颜色是蓝色,有四个门,每加仑油可以跑 25 英里。最后一个属性实际上是指向函数的指针,意味着该属性是个方法。执行这段代码后,就可以使用对象Car。不过这里有一个问题,就是可能需要创建多个Car的实例,这样就造成了我们会重复许多类似的代码,这样会很麻烦。

       二工厂方式

       要解上述的多个类似对象声明的问题,开发者创造了能创建并返回特定类型的对象的工厂方式。这种方式就是为了解决实例化对象产生大量重复的问题。

       (1)无参数的工厂方式

       例如,函数createCar()可用于封装前面列出的创建Car对象的操作:

[javascript]

1. function createCar() {  

2. var TempCar = new Object();  

3. TempCar.color = "blue";  

4. TempCar.doors = 4;  

5. TempCar.mpg = 25;  

6. TempCar.showColor = function() {  

7.        return this.color;  

8.   };  

9.   return TempCar;  

10. };  

11. var Car1 = createCar();  

12. var Car2 = createCar();  

13. document.write(Car1.showColor()+"<br/>");//输出:blue  

14. document.write(Car2.showColor());//输出:blue  

       在这里,第一个例子中的所有代码都包含在createCar()函数中。此外,还有一行额外的代码,返回TempCar 对象作为函数值。调用此函数,将创建新对象,并赋予它所有必要的属性,复制出一个我们在前面说明过的Car对象。

因此,通过这种方法,我们可以很容易地创建Car对象的两个版本(Car1和 Car2),它们的属性完全一样。

       (2)有参数的工厂方式

       我们还可以修改createCar()函数,给它传递各个属性的默认值,而不是简单地赋予属性默认值:

[javascript]

1. function createCar(Color,Doors,Mpg) {  

2.   var TempCar = new Object();  

3.   TempCar.color = Color;  

4.   TempCar.doors = Doors;  

5.   TempCar.mpg = Mpg;  

6.   TempCar.showColor = function() {  

7.        return this.color;  

8.   };  

9.   return TempCar;  

10. };  

11. var Car1 = createCar("red",4,23);  

12. var Car2 = createCar("blue",3,25);  

13. document.write(Car1.showColor()+"<br/>");//输出:red  

14. document.write(Car2.showColor());//输出:blue  

       给createCar()函数加上参数,即可为要创建的Car对象的color、doors 和mpg属性赋值。这使两个对象具有相同的属性,却有不同的属性值。

       工厂方式解决了重复实例化的问题,但是还是有一个问题,那就是前面的例子中,每次调用函数createCar(),都要创建新函数showColor(),意味着每个对象都有自己的 showColor() 版本。而事实上,每个对象都共享同一个函数。

有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法,从而避免这个问题:

[javascript]

1. function showColor() {  

2.      return this.color;  

3. };  

4. function createCar(Color,Doors,Mpg) {  

5.   var TempCar = new Object();  

6.   TempCar.color = Color;  

7.   TempCar.doors = Doors;  

8.   TempCar.mpg = Mpg;  

9.   TempCar.showColor = showColor;  

10.   return TempCar;  

11. };  

12. var Car1 = createCar("red",4,23);  

13. var Car2 = createCar("blue",3,25);  

14. document.write(Car1.showColor()+"<br/>");//输出:red  

15. document.write(Car2.showColor());//输出:blue  

       在上面这段重写的代码中,在函数 createCar()之前定义了函数 showColor()。在createCar()内部,赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲,这样解决了重复创建函数对象的问题;但是从语义上讲,该函数不太像是对象的方法。所有这些问题都引发了开发者定义的构造函数的出现。

       三构造函数方式

       创建构造函数就像创建工厂方式的函数一样容易。第一步选择构造函数的名字。根据惯例,这个名字的首字母大写,以使它与首字母通常是小写的变量名分开。除了这点不同,构造函数看起来很像工厂方式的函数。请看下面的例子:

[javascript]

1. function Car(Color,Doors,Mpg) {  

2.   this.color = Color;  

3.   this.doors = Doors;  

4.   this.mpg = Mpg;  

5.   this.showColor = function() {  

6.        return this.color;  

7.   };  

8. };  

9. var Car1 = new Car("red",4,23);  

10. var Car2 = new Car("blue",3,25);  

11. document.write(Car1.showColor()+"<br/>");//输出:red  

12. document.write(Car2.showColor());//输出:blue  

       下面为您解释上面的代码与工厂方式的差别。首先在构造函数内没有创建对象,而是使用this关键字。使用new运算符构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。然后可以直接赋予this属性,默认情况下是构造函数的返回值(不必明确使用 return 运算符)。现在,用new运算符和对象名Car创建对象,就更像 ECMAScript 中一般对象的创建方式了。

      就像工厂方式的函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本。不过,与工厂方式的函数相似,也可以用外部函数重写构造函数,同样地,这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。

JavaScript高级程序设计(第3版)第六章读书笔记

第六章 面向对象的程序设计 1. 数据属性 [[Configurable]]:表示能否通过delete删除属性从而重新定义属性。默认值为true。 [[Enumerable]]:表示能否通过for-i...
  • lysunnyrain
  • lysunnyrain
  • 2016年02月29日 15:07
  • 878

一篇给迷茫者看的JavaScript 引擎指南

有时编写 Web 应用的代码会感觉充满魔力,因为我们只是写了一系列字符,就能在浏览器里看到效果了。但是理解魔法背后的技术,可以帮助你更好地提高编程技巧。至少当你试 图解释在 JavaScript 驱动...
  • u010147288
  • u010147288
  • 2016年01月27日 19:41
  • 308

一个新手接触手游项目碰到的bug及解决过程汇总

平台及开发引擎:w7,cocos2dx0.9x版本,基本为框架福州网龙传出来的。 开发项目:一款模仿放三和刀塔等手游的明星题材手游。 bug:在写邮件服务端接口时,由于消息长度在框架中定义为1k,但是...
  • jiangzuzai
  • jiangzuzai
  • 2015年01月30日 11:30
  • 271

应该重新审视的javascript

或许这个话题相当有趣,只是因为Javascript会有一个新的增长,web是未来,Javascript也会有未来,当没有一个新的语言可以在web方面代替的时候。 强大的Javascript Java...
  • gmszone
  • gmszone
  • 2014年02月28日 20:35
  • 1992

Bluemix结合RabbitMq实现消息发送与接收实例

MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法。应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们。消 息传递指的是程序之...
  • Evankaka
  • Evankaka
  • 2016年02月19日 15:47
  • 3496

javascript你应该知道的七件事

Javascript发展到今天,很高兴看到她的成功。曾经好多人都这么说:写程序这么多年,现在最看不懂的程序是javascript!javascript虽然是一种弱类型语言,但是她却有着“高贵”的理论。...
  • wangboxian
  • wangboxian
  • 2014年05月07日 11:34
  • 1431

JavaScript语句后应该加分号么?

作为一个python小白,看到有些python程序中加了分号而有些没有,真的是一脸懵逼,所以上网查了一下,搜到了这篇文章,觉得很有趣,特地转来看看。个人觉得题目应该不局限于javascript,不过我...
  • Marana_eat_banana
  • Marana_eat_banana
  • 2017年04月07日 20:55
  • 66

javascript你应该知道的七件事

Javascript发展到今天,很高兴看到她的成功。曾经好多人都这么说:写程序这么多年,现在最看不懂的程序是javascript!javascript虽然是一种弱类型语言,但是她却有着“高贵”的理论。...
  • yangnan32
  • yangnan32
  • 2014年05月08日 10:33
  • 318

读jQuery之二十一(队列queue)

queue模块在jQuery中分在Effects中,搜索整个库会发现queue也仅在特效模块effects.js中被使用。jQuery抽取出独立的命名空间给queue,说明除了内部Effects模块使...
  • dyllove98
  • dyllove98
  • 2013年02月23日 23:45
  • 880

script标签写在哪里好?

script标签放在底部的好处? 虽然理论上放在哪里都是可以的,但是对于前端页面优化来讲,还是放在底部是最佳的,因为如果JS执行出现错误了,最起码页面中的元素还能加载出来,因为DOM文档是从上往下的顺...
  • qizhiqq
  • qizhiqq
  • 2016年09月19日 12:16
  • 2393
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript面向对象应该如何创建对象
举报原因:
原因补充:

(最多只允许输入30个字)