`
wfdoublext
  • 浏览: 126510 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

js 类的实现 转载

阅读更多

JavaScript本身并不是设计成面向对象的,所以没有class之类的关键字用来定义类,但JavaScript本身相当灵活,可以利用function关键字来定义类并创建对象。JavaScript定义类是有多种方式的,这里只详细介绍最常用的一种。
 一、定义类并创建实例 function MyClass() { this.id = 5; this.name = 'myclass...'; } 这样,我们就定义了一个MyClass类,里面有两个公共属性 id 和 name。其中this关键字表示当前对象,类似于C#等强类型语言。 注意:列出属性的同时必须对属性进行赋初值,这样JS才会将其解释为对象的属性。 接下来我们可以这样定义类的实例(其中 new 不可省略): var my = new MyClass(); 并以下列形式访问类属性: my.id
 二、定义公有属性和私有字段 在function中,用var定义的变量为私有变量,可以理解为类的私有字段。 用this定义的变量为公有属性。 function MyClass() { this.id = 5; var name = 'myclass...'; } my = new MyClass(); alert(my.id); alert(my.name); //结果 // 5 // undefined 
三、定义公有方法和私有方法 同样的,用var定义的方法为私有方法,用this定义的方法为公有方法。 function myClass() { this.id = 5; this.alert = function(msg) { window.alert(msg); } } my = new myClass(); my.alert('the function alert is called...'); //结果 // the function alert is called... 如果将上述代码的 this.alert = function(msg) 改成var alert = function(msg),那么就不能用my.alert来调用这个方法了。私有方法只能供类内部的其他方法调用。 定义公有方法(实例方法)还有另一种形式,就是利用 prototype 属性, 其实prototype 属性还可以用来扩展内置类的实例方法的,比如去掉字符串两边空格的 trim 方法:String.prototype.trim = function() { return ... } function myClass() { this.id = 5; } myClass.prototype.alert = function(msg) { window.alert(msg); } var my = new myClass(); my.alert('the function alert is called...'); 将和上面显示同样的结果。
 四、构造函数 新建对象(my = new myClass();)和调用函数(myClass())是相似的,所以我们自然想到为函数添加一些参数,在调用此函数时输入一些参数。新建对象也是一样的。看下面的示例: function myClass(id, name) { this.id = id; this.name = name; } var my = new myClass(5, 'test name ...'); alert(my.id); alert(my.name); //结果 // 5 // test name ... 这样定义的构造函数有个局限性,实例化对象的时候如果没有传参数,或少传参数,那么没有实参的参数值将会是undefined,比如将上面代码的对象实例化改为:var my = new myClass(5); 输出结果将会变成: // 5 // undefined 为了让属性具有默认值,比如 int 默认是 0 ,可以采用以下方法,虽然比较麻烦。 function myClass(id, name) { this.id = 0; //整型默认为0 this.name = ''; //字符串默认为空字符串 if (id != null) { //当 id=undefined 时 id==null 依然为true this.id = id; } if (name != null) { this.name = name; } } var my = new myClass(); alert(my.id); alert(my.name); //结果 // 0 // (空字符串) 这样的情况下,延伸出另一个问题,就是你无法在构造函数中初始化 id 为 null 。 总之,一切看个人需要,灵活应用便是。
 五、静态属性和静态方法 静态的属性和方法是在定义了类之后定义的。如下例: function myClass() { this.id = 5; } myClass.count = 0; //静态属性 myClass.staticFun = function() { //静态方法 alert(++myClass.count); } var my = new myClass(); alert(my.id); //用实例访问实例属性 alert(myClass.count); //用类名访问静态属性 myClass.staticFun(); //用类名访问静态方法 //结果 // 5 // 0 // 1
 六、类的继承 在JS中实现类的继承,实际上是用到了类的另一种创建方式,先创建基类的一个对象,再为这个对象添加新的属性和方法,然后再返回这个对象。 在这里先不讨论这种创建对象的方法。 function baseClass() { this.id = 5; } function myClass() { var my = new baseClass(); my.name = 'className'; my.testFun = function() { alert(my.name); //this.name 也可以 } return my; } var my = new myClass(); alert(my.id); alert(my.name); my.testFun(); // 结果 // 5 // className // className //
 七、类的扩展 function baseProcess(){} baseProcess.prototype.controlState = function(outerParam,num,newList){ } //继承方法2 // function base(){} base.prototype.fun=function(){alert('base');} function child(){} child.prototype= new base; child.prototype.controlDisplay=function(outerParam){ } child.prototype.fun=function(){alert('child');}//方法重写 // 
八、结构体\枚举 // var structs={ ID:id, NAME:name } structs.ID; var structs={ "ID":id, "NAME":name } structs["ID"];
 
分享到:
评论

相关推荐

    js实现的3d效果(很炫+转载)

    js实现的3d效果(很炫+转载),大家可以学习一下。

    JS继承的实现方式

    JS继承的实现方式转载整理。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

    JS压缩工具JsPacker

    现有的JS代码压缩工具都是网页版的,例如ESC,shrinksafe等,他们都是在网页上用js本身实现对代码的压缩。由于网页的局限性,很难很好的管理压缩任务。聚问网络开发的js压缩专家(JsPacker)v1.0 是同功能的桌面程序,...

    javascript排序分页(转载)

    JQuery实现数据的分页显示,同时实现表格内容的排序

    jspacker js压缩专家v1.0

    现有的JS代码压缩工具都是网页版的,例如ESC,shrinksafe等,他们都是在网页上用js本身实现对代码的压缩。由于网页的局限性,很难很好的管理压缩任务。聚问网络开发的js压缩专家(JsPacker)v1.0 是同功能的桌面程序,...

    Javascript代码加密解密自动缩进程序

    2.可以对自己写的javascript代码进行正规的对齐缩进,解决了dotnet无法实现的功能.当然同样适用于C/C#/Java/Php等代码的自动缩进. 3.对组合成一行的js代码自动进行缩进,形成多行. 4.对加密的js代码进行解密(暂未制作)...

    js实现QQ在线咨询-remark

    js csss实现的QQ在线咨询 asp.net等web开发中可用。。。 备份哟个 转载那个网址忘了 里面有个使用说明说是要友情链接到http://www.e8seo.com 我就粘在这里了

    Arcgisjs结合threejs做动态线图层

    该案例仅在mapview下有效,sceneview就不显示了,下面将结合threejs对该案例进行修改,实现sceneview下的三维动态线图层。 实现过程请看博客原文。 ———————————————— 版权声明:本文为CSDN博主「...

    js实现webgis

    1、用JS实现和google地图一样的地图--拖动,移动,放大、缩小、还原 2、不需搭建gis服务器,不需第三方API支持。 3、地图的图片直接从百度地图中选择所需的比例,直接截图,然后PS拼接一下就OK了(示例为福州市地图)...

    纯js写的一行多图轮播(转载自模板网)

    纯js写的一行多图轮播代码,没有框架

    javascript压缩工具

    现有的JS代码压缩工具都是网页版的,例如ESC,shrinksafe等,他们都是在网页上用js本身实现对代码的压缩。由于网页的局限性,很难很好的管理压缩任务。聚问网络开发的js压缩专家(JsPacker)v1.0 是同功能的桌面程序,...

    百洋软件研究实验室-js实现弹出对话框

    js弹出对话框 例子 此js弹出对话框已做过测试,可以兼容现在的所有主流...该文档附件欢迎各位转载,但是在没有获得文章作者许可之前,不得对文章内容或者版权信息进行更改,版权归百洋软件研究实验室所有,仅此声明。

    js树性菜单代码实现

    在网上找了很久,终于找了一个很漂亮及简单的js树型菜单,现在转载到这里来,提高给大家下载。谢谢作者!

    js模拟百度地图

    1、用JS实现和百度地图一样的地图--拖动,移动,放大、缩小、还原、标注、图例 2、不需搭建gis服务器,不需第三方API支持。 3、地图的图片直接从百度地图中选择所需的比例,直接截图,然后PS拼接一下就OK了(示例为...

    推荐js实现商品分类到搜索栏友好提示(人机交互)第1/3页

    中间的表格代表搜索表单,要实现的是点商品分类后有一个方框指向到搜索栏,用以清楚地告诉用户:点商品分类后是哪里改变了转载请注明出处 blueidea 方框移动 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 ...

    利用JavaScript实现新闻滚动效果(实例代码)

    这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了,许多浏览器不支持,甚至在IE8想,XHTML4.0的loose.dtd是可以的,而去掉loose.dtd却不行。 2.使用div+...

    精确到年月日时分秒的JS日历文件(超强大的日历控件)

    <script type="text/javascript" src="../idcbaba.js"> 调用方法如下: onfocus="setday(this)" 版权声明:开源代码,版权归主机爸爸(IDCbaba.com)所有,可自由转载,转载请务必保留此版权说明。

    JavaScript 判断日期格式是否正确的实现代码

    转载者最起码注明作者和出处!http://www.cnblogs.com/GuominQiu 代码如下: //————————————————————————— //判断日期格式是否正确 //返回值是错误信息, 无错误信息即表示合法日期字符串 ...

    JS幻灯片-实现多屏切换效果

    尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。

    JavaScript 代码压缩加密软件

    现有的JS代码压缩工具都是网页版的,例如ESC,shrinksafe等,他们都是在网页上用js本身实现对代码的压缩。由于网页的局限性,很难很好的管理压缩任务。聚问网络开发的js压缩专家(JsPacker)v1.0 是同功能的桌面程序,...

Global site tag (gtag.js) - Google Analytics