今天给大家讲讲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 中一般对象的创建方式了。

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

web前端教程之javascript创建对象的方法的更多相关文章

  1. web前端面试第一次[javascript函数和方法的区别]

    //函数 function f1(){ console.log("我是函数"); } //调用函数 f1(); //创建一个空对象 var obj = {} //把函数定义到对象里 ...

  2. 进击的Python【第十四章】:Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  3. 腾讯Web前端开发框架JX(Javascript eXtension tools)

    转自:Web前端开发-Web前端工程师 » 腾讯Web前端开发框架JX(Javascript eXtension tools) JX – Javascript eXtension tools 一个类似 ...

  4. javascript创建对象的方法--基本模式

    javascript创建对象的方法--基本模式 一.总结 关注本质 二.代码 <!DOCTYPE html> <html lang="zh-cn"> < ...

  5. javascript创建对象的方法--动态原型模式

    javascript创建对象的方法--动态原型模式 一.总结 1.作用:解决组合模式的属性和函数分离问题  2.思路:基本思路和组合模式相同:共用的函数和属性用原型方式,非共用的的函数和属性用构造函数 ...

  6. javascript创建对象的方法--组合模式

    javascript创建对象的方法--组合模式 一.总结 0.作用:解决原型模式对象独有属性创建麻烦的问题 1.组合模式使用普遍:jquery就是用的组合模式,组合模式使用非常普遍 2.组合模式优点: ...

  7. javascript创建对象的方法--原型模式

    javascript创建对象的方法--原型模式 一.总结 1.原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改 2.原型的使用(p ...

  8. javascript创建对象的方法--构造函数模式

    javascript创建对象的方法--构造函数模式 一.总结 构造函数模式作用和不足 1.作用:解决工厂模式不是用new关键字来创建对象的弊端 2.作用:解决工厂模式创建的实例和模型没有内在联系的问题 ...

  9. javascript创建对象的方法--工厂模式(非常好理解)

    javascript创建对象的方法--工厂模式(非常好理解) 一.简介 创建对象的方法 本质上都是把"属性"和"方法",封装成一个对象 创建对象的基本模式 普通 ...

随机推荐

  1. IE下,js改变绝对定位的属性不生效

    如果想要动态改变定位位置的值,例如改变TOP的值,IE下必须要给TOP一个初始值,不然不生效..

  2. css实现定高的元素在不定高的容器中水平垂直居中(兼容IE8及以上)

    容器设置相对定位 元素设置宽高,并使用绝对定位,上下左右值均为0,margin:auto 如下所示: <!DOCTYPE html> <html> <head lang= ...

  3. 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  4. 自己建二维obj

    经常用到啊 在项目流程管理里面用到

  5. 推荐两个谷歌的json-view插件(附带下载分享地址)

    1.JSONView 网盘下载地址:http://pan.baidu.com/s/1hrGlaVa 效果图: 2.JSON-handle 网盘下载地址:http://pan.baidu.com/s/1 ...

  6. winform项目打包成可安装程序(vs2015)

    1.新建安装和部署项目      如果是初始使用并且原来没有下载过,会被所引导一个下载界面http://learn.flexerasoftware.com/content/IS-EVAL-Instal ...

  7. 让Git记住用户名和密码

    user/username/.gitconfig [credential] helper = store

  8. CentOS_7.2安装Nginx_1.9

    一.安装依赖包和开发工具: yum install vim vim-enhanced wget zip unzip telnet ntsysv compat* apr* nasm* gcc gcc* ...

  9. DB2语句详细资料

    http://www.2cto.com/database/201307/225809.html 1.数据操作语言(DML:select,delete,insert,update) <>查询 ...

  10. [原创]在Linux系统Ubuntu14.04上安装部署docker。

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...