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 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
Aug 23 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
php+js实现倒计时功能
Jun 02 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 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
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
js实现二级导航功能
2017/03/03 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
深入理解Promise.all
2018/08/08 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python实现换位加密算法的示例
2018/10/14 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
五一劳动节慰问信
2015/02/14 职场文书
银行招聘自荐信
2015/03/06 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
公司员工手册范本
2015/05/14 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS