JavaScript 面向对象编程(1) 基础


Posted in Javascript onMay 18, 2010

1. 用JavaScript实现类
JavaScritpt没有专门的机制实现类,这里是借助它的函数允许嵌套的机制来实现类的。一个函数可以包含变量,又可以包含其它函数,这样,变量可以作为属性,内部的函数就可以作为成员方法了。因此外层函数本身就可以作为一个类了。如下:

function myClass() 
{ 
//此处相当于构造函数 
}

这里 myClass就是一个类。其实可以把它看成类的构造函数。至于非构造函数的部分,以后会详细描述。
2. 如何获得一个类的实例
实现了类就应该可以获得类的实例,JavaScript提供了一个方法可以获得对象实例。即 new操作符。其实JavaScript中,类和函数是同一个概念,当用new操作一个函数时就返回一个对象。如下:
var obj1 = new myClass();
3. 对象的成员的引用
在JavaScript中引用一个类的属性或方法的方法有以下三种。
1> 点号操作符
这是一种最普遍的引用方式,就不累赘。即如下形式:
对象名.属性名;
对象名.方法名;
2> 方括号引用
JavaScript中允许用方括号引用对象的成员。如下:
对象名["属性名"];
对象名["方法名"];
这里方括号内是代表属性或方法名的字符串,不一定是字符串常量。也可以使用变量。这样就可以使用变量传递属性或方法名。为编程带来了方便。在某些情况下,代码中不能确定要调用那个属性或方法时,就可以采用这种方式。否则,如果使用点号操作符,还需要使用条件判断来调用属性或方法。
另外,使用方括号引用的属性和方法名还可以以数字开头,或者出现空格,而使用点号引用的属性和方法名则遵循标示符的规则。但一般不提倡使用非标示符的命名方法。
3> 使用eval函数
如果不希望使用变量传递变量或方法名,又不想使用条件判断,那么eval函数是一个好的选择。eval接收一个字符串类型的参数,然后将这个字符串作为代码在上下文中执行,返回执行的结果。这里正是利用了eval的这一功能。如下:
alert(eval("对象名." + element.value));
4. 对对象属性,方法的添加、修改和删除操作
JavaScript中,在生成对象之后还可以为对象动态添加、修改和删除属性和方法,这与其它面向对象的语言是不同的。
1> 添加属性和方法
先创建一个对象,空对象创建后没有任何属性和方法,然而我们可以在代码中创建。
var obj1 = new Object(); 
//添加属性 
obj1.ID = 1; 
obj1.Name = "johnson"; 
//添加方法 
obj1.showMessage = function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
}

2> 修改属性与方法
与添加属性和方法类似,例如接着上面的例子:
// 修改属性 
obj1.ID = 2; 
obj1.Name = "Amanda"; 
// 修改方法 
obj1.showMessage = function() 
{ 
alert("ID: " + this.ID"); 
}

3> 删除属性与方法
直接将要删除的属性或方法赋值为undefined即可:
obj1.ID = 1; 
obj1.Name = undefined; 
obj1.showMessage = undefined;

5. 创建无类型对象。
类似于C#3.0里的Anonymous Types,JavaScript 也可以创建无类型的对象。形式如下:
var obj1 = {}; 
var obj2 = 
{ 
ID: 1, 
Name: "Johnson", 
showMessage: function() 
{ 
alert("ID: " + this.ID + "Name: " + this.Name); 
} 
}

这里定义了两个无类型的对象,obj1和obj2。其中obj1是一个空对象。obj2包括两个属性ID, Name和一个方法showMessage。每个属性和方法用逗号分割。属性(方法)名和其值之间用分号分割。
用这种方式创建属性方法时,也可以用字符串定义属性方法的名字。如:
var obj2 = 
{ 
"ID" : 1, 
"Name": "Johnson" 
}

6. prototype
每个函数对象都具有一个子对象prototype,因为函数也可以表示类,所以prototype表示一个类的成员的集合。当new 一个对象时,prototype对象的成员都会被实例化成对象的成员。先看一个例子:
function myClass() 
{ } 
myClass.prototype.ID = 1; 
myClass.prototype.Name = "johnson"; 
myClass.prototype.showMessage = function() 
{ 
alert("ID: " + this.ID + "Name: " + this.Name); 
} 
var obj1 = new myClass(); 
obj1.showMessage();

使用prototype对象创建类有一个好处。如果将所有的成员直接写在类的声明中,如下:
function myClass() 
{ 
//添加属性 
this.ID = 1; 
this.Name = "johnson"; 
//添加方法 
this.showMessage = function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
} 
var obj1 = new myClass(); 
var obj2 = new myClass();

在上面的代码中,定义了一个类myClass,在类中直接定义了两个属性和一个方法。然后实例化了两个对象,这里的两个属性和一个方法,每创建一次myClass对象都会被创建一次,浪费了内存空间。而用prototype以后就可以解决这个问题,每new一个函数时,其prototype对象的成员都会自动赋给这个对象,当new多个对象时不会重复创建。
由于prototype的初始化发生在函数体执行之前,用以下代码可以证明:
function myClass() 
{ 
//此处相当于构造函数 
this.ID = 1; 
this.Name1 = this.Name; 
this.showMessage(); 
} 
myClass.prototype.Name = "johnson"; 
myClass.prototype.showMessage = function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
var obj1 = new myClass();

执行以上代码可以发现当new这个类型的对象时,即弹出了对话框。
最后只得一提的是,prototype有一个方法,在面向对象的设计中用得到。即:constructor属性,是对构造函数的调用,这里的构造函数即上文提到的类的声明里的代码。如:
function myClass() 
{ 
//此处相当于构造函数 
alert("this is in constructor"); 
} 
myClass.prototype.constructor(); 
var obj1 = new myClass();

执行以上代码你会发现对话框弹出了两次。由此可见,prototype可专门用于设计类的成员,实际上在JavaScript面向对象的设计中,很多时候都会用到prototype。
Javascript 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 #Javascript
You might like
php单件模式结合命令链模式使用说明
2008/09/07 PHP
使用php来实现网络服务
2009/09/15 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
php头像上传预览实例代码
2017/05/02 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
Javascript & DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
easyui validatebox验证
2016/04/29 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
Python几种常见算法汇总
2020/06/02 Python
python如何使用代码运行助手
2020/07/03 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers