首页 ┆ 网站地图 ┆ 在线留言 ┆ 游戏资讯 ┆ 资源下载 ┆ 端午节祝福 ┆ 迅雷在线影视
设为首页
加入收藏
联系我们
高级搜索
您当前的位置: 主页>编程相关>JAVASCRIPT>javaScript中如何定义类
javaScript中如何定义类
来源: 发布时间:2008-02-13 发布人: 浏览: 人次   字体: [ ]  

方法源自《javaScript高级程序设计》一书


第一种方式: 工厂方法

能创建并返回特定类型的对象的工厂函数(factory function)。

function createCar(sColor)
   {
  
var oTempCar = new
 Object;
   oTempCar.color 
=
 sColor;
oTempCar.showColor 
= function ()
     {
     alert(
this
.color);
   }
;
  
return
 oTempCar;
}

var oCar1 = createCar();
var oCar2 =
 createCar();

 这是一个典型的简单工厂模式。
看一段函数定义在外部的方法:

在这段代码中,在函数createCar()前定义了函数showColor().

在createCar()内部,赋予对象一个已经指向已经存在的showColor()函数的指针。从功能上来讲,这样解决了重复创建对象的问题,但该函数看起来不像对象的方法。
所有这些问题引发了开发者定义的构造函数的出现。

第二种方式:构造函数方式

你可能已经注意到第一个差别了,在构造函数内部无创建对象,而是使用this关键字。使用new运算符调用构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。然后可以直接赋予this属性,默认情况下是构造函数的返回值(不必明确使用return运算符)。
这种方式在管理函数方面与工厂方法一样都存在相同的问题。

第三种方式:原型方式


调用new Car()时,原型的所有属性都被立即赋予要创建的对象,意味着所有的Car实例存放的都是指向showColor()函数的指针。从语义上看起来都属于一个对象,因此解决了前面两种方式存在的两个问题。此外使用该方法,还能用instanceof运算符检查给定变量指向的对象类型。因此,下面的代码将输出true:
alert(oCar instanceof Car); //outputs "true"
这个方式看起来很不错,遗憾的是,它并不尽如人意。
1首先这个构造函数没有参数。使用原型方式时,不能给构造函数传递参数初始化属性的值,因为car1和car2的属性都等于“red”。
2真正的问题出现在属性指向的是对象,而不是函数时。函数共享不会造成任何问题,但是对象却很少被多个实例共享的。

第四种方式:混合的构造函数/原型方式
联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。


第五种方式:动态原型方式(推荐)
对于习惯使用其他语言的开发者来说,使用混合的构造函数/原型方式感觉不那么和谐。批评混合的构造函数/原型方式的人认为,在构造函数内找属性,在外部找方法的做法很不合理。所以他们设计了动态原型方式,以提供更友好的编码风格。
动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。下面是使用动态原型方法重写的Car类:

 

function Car(sColor){   
  
this.color =
sColor;   
  
this.drivers =new Array("Mike","Sue"
);   
  
  
if(typeof Car._initialized == "undefined")
{   
    Car.prototype.showColor 
= function()
{   
      alert(
this
.color);   
    }
   
  }
   
  Car._initialized 
= true
;   
}
   

function Car(sColor){
  
this.color =
 sColor;
  
this.showColor = function ()  
{
    alert(
this
.color);
  }
;
}

var oCar1 = new Car("red");
var oCar2 = new Car("blue");
 

相 关 文 章   发布商链接
·幻灯片焦点图片新闻显示调用focus.sw...
·Adobe Reader利用javascript让PDF文...
·基于Ajax的可滚动表格代码实例
·浅谈javascript函数劫持,附实例
·使用javascript标记高亮关键词的代码...
·javascript读写TEXT文本文件示例代码
·javascript实现动态多附件上传方法
·javascript利用xhtml来实现动态导入j...
·JS遍历所有以TextBox_开头匹配的文本...
·Javascript实现打印网页中定义的部分...
 §最新评论:(评论内容只代表网友观点,与本站立场无关!)
网名: 验证码:  【所有评论】【↑返回顶部
评 分: 12 345
评论内容:(不能超过500字,请自觉遵守互联网相关政策法规。[按 Ctrl+Enter 可直接提交]
注意:请勿在本站发布政治话题、色情及违反法律的内容。
IT知道网 声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。
推 荐 文 章
·javscript实现鼠标移到小图片
·如何在静态页面中利用javascr...
·javascript实现WEB页面导出为...
·如何在兼容IE和Firefox的情况
·javascript读取本地excel文档
·javascript实现页面自动刷新...
·javascript解决iframe框架页...
·javascript实现网易邮箱多附...
·javascript实现模仿IE自动完...
·javacript实现关闭子窗口,刷...
·javascript脚本实现右键弹出...
·javascript结合Ajax制作的可...
·javascript实现页面载入等待...
·javascript实现一个IP只弹窗...
·javascript导航条比较实用的...
热 门 文 章
·Ext2.0框架的Grid使用介绍祥...
·JS实现多行的HTML静态表格分...
·javascript实现多张图片轮流...
·javascript使用xml数据岛的简...
·Adobe Reader利用javascript...
·javascript读写TEXT文本文件...
·幻灯片焦点图片新闻显示调用f...
·javascript实现页面载入等待...
·实例讲解Ext Js生成动态树,...
·Javascript在IE和FireFox中的...
·javascript实现动态多附件上...
·javascript脚本实现右键弹出...
·鼠标右下角显示层,javascrip...
·javascript解析身份证号码得...
·javascript实现的网页软键盘...
网站首页 - 关于本站 - 加入收藏 - 网站地图 - 友情连接 - 在线留言 - 联系我们 - 返回顶部
Copyright © 2007 IT知道网.[冀ICP备07026896号]. All Rights Reserved .