JavaScript 面向对象编程(2) 定义类


Posted in Javascript onMay 18, 2010

本文承接上一篇JavaScript面向对象编程(1) 基础。
上篇说过,JavaScript没有类的概念,需要通过函数来实现类的定义。先通过一个例子说明:

function myClass() 
{ 
var id = 1; 
var name = "johnson"; 
//properties 
this.ID = id; 
this.Name = name; 
//method 
this.showMessage = function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
} 
var obj1 = new myClass(); 
var obj2 = new myClass();

function的定义实际上相当于类的构造函数,最后两句是创建这个类的实例。先分析第一句:var obj1 = new myClass(); 当用new创建类的实例时,解释器首先会创建一个空的对象。然后运行这个myClass函数,并将this指针指向这个类的实例。当碰到this.ID = id;和this.Name = name;及this.showMessage = function(){...}时,便会创建这两个属性,和这个方法,并把变量id,name的值一级函数的定义赋给这两个属性及这个函数对象(shwoMessage)。这个过程相当于初始化这个对象,类似于C# 中的构造函数。最后new返回这个对象。再看第二句:var obj2 = new myClass(); 执行过程与上一句代码相同,即创建一个空对象,然后执行myClass这个函数,定义两个属性和一个方法。
从上面的分析中可以看到,上面这种实现类的方式,即在函数的定义中定义类的属性方法。存在着弊端。如果需要创建两个或更多这个类的实例时,上文是两个,这些属性会被重复的创建多次。
那么如何避免这种情况呢?上一篇中也曾提到过用prototype。prototype和它的名字一样是一个原型,每一个function都有一个子对象prototype,它其实表示这个function对象的成员的集合,由于这里我们使用function实现类的,所以可以说prototype其实就是便是类的成员的集合。prototype定义的属性和方法执行在函数的构造体执行之前,所以当new一个对象之前,其实prototype的成员已经执行过了。先看一个例子:
function myClass() 
{ 
//构造函数 
} 
myClass.prototype = 
{ 
ID: 1, 
Name: "johnson", 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
} 
var obj1 = new myClass(); 
var obj2 = new myClass();

类的结构还是和前面的例子相同,只不过这里是利用了prototype来实现。还是先看最后两句,前面说过,prototype是执行在函数构造体之前,即执行到var obj1 = new myClass();之前,这个类已经有了ID,Name属性和showMessage方法。执行者一句时执行过程如下,注意和前一个例子比较:首先还是创建一个空的对象,并把this指针指向这个对象。然后将函数的prototype对象的所有成员都赋给这个对象(注意没有再创建这些成员)。然后执行函数体。最后new返回这个对象。执行下一句时:同样执行此过程,不会重复创建这些成员。
上面的代码还只是一个例子,在实际的项目中,可能出现的是类中有大量的成员,同时可能需要创建大量的实例。这是prototype就会显示其优越性了。另外上面的代码中使用了大括号语法定义了prototype的成员,这样看起来代码更清晰。这是一种比较推荐的类的设计模式。当然在众多的项目中,可能还会发现更好的模式,我们也希望能有更优化的JavaScript的编程模式不断推陈出新,也希望随着时间的推移,各主流浏览器也对JavaScript的解析都标准,统一。
上面说过prototype定义的成员是发生在构造体之前,可以证明一下,在上面的例子中,构造体是空的,在构造函数中加入一句alert(this.Name);,当执行到var obj1 = new myClass();时,会看到弹出对话框,显示正确的属性值。
写了这段文字之后承蒙多为兄弟的点评,收获匪浅。对上面的例子进一步讨论,如下代码:
function subClass(){ } 
subClass.prototype = 
{ 
Name: "sub" 
} 
function myClass() 
{ 
//构造函数 
} 
myClass.prototype = 
{ 
ID: 1, 
Name: "johnson", 
SubObj: new subClass(), 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name + "SubObj.Name:" + this.SubObj.Name); 
} 
} 
var obj1 = new myClass(); 
obj1.SubObj.Name = "XXX"; 
obj1.showMessage(); 
var obj2 = new myClass(); 
obj2.showMessage();

这里在myClass中定义了一个引用类型,其类型是我们自定义的一个subClass类,这个子类中有一个Name属性。由于prototype对象是共享的,按照我们上面的分析:在执行var obj1 = new myClass();时,会把myClass的prototype中的成员复制给这个obj1实例。但这里SubObj是一个引用类型,在执行到var obj2 = new myClass();时,prototype中的ID,Name成员会复制到obj2中,但SubObj这个属性不会复制过去,而是引用了prototype中的SubObj,所以因为上一句修改了obj1.Subobj.Name的值,所以在用new生成obj2实例时,引用到了修改后的值。
所以借用prototype定义类时,依然需要将属性定义在构造体中,而将方法定义在该构造体的原型上。如下:
function myClass(id, name) 
{ 
this.ID = id; 
this.Name = name; 
} 
myClass.prototype = 
{ 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
}, 
showMessage2: function() 
{ 
alert("Method2"); 
} 
} 
var obj1 = new myClass(1, "johnson"); 
obj1.showMessage(); 
obj1.Name="John"; 
obj1.showMessage(); 
var obj2 = new myClass(2, "Amanda"); 
obj2.showMessage();

关于私有成员,共有成员以及静态成员,类的继承,抽象类,虚方法,类的反射等实现方法,以后还会坚持写下去。不过我觉得需要说一下的是,我打算写的是JavaScript面向对象的基础实现,如果需要深入的学习建议参考李战老哥的“甘露模型”。
Javascript 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
js面向对象编程总结
Feb 16 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
JavaScript 面向对象编程(1) 基础
May 18 #Javascript
Javascript Object.extend
May 18 #Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 #Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 #Javascript
JS request函数 用来获取url参数
May 17 #Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 #Javascript
JQuery中的ready函数冲突的解决方法
May 17 #Javascript
You might like
日本十大惊悚动漫
2020/03/04 日漫
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
js一组验证函数
2008/12/20 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
js验证密码强度解析
2020/03/18 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
家居装修公司创业计划书范文
2014/03/20 职场文书
计算机专业自荐信
2014/05/24 职场文书
团拜会策划方案
2014/06/07 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
2015年计划生育责任书
2015/05/08 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
Python天气语音播报小助手
2021/09/25 Python
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL