面向对象的编程思想在javascript中的运用上部


Posted in Javascript onNovember 20, 2009

其实,面向对象的思想是独立于编程语言的,例如在C#中,在一个静态类的静态方法中,按照过程式开发调用一系列静态函数,我们很难说这是面向对象的编程,相反,象jquery和extjs这样优秀的javascript库,却处处体现着面向对象的设计思想。本文不打算探讨javascript是否能够算做面向对象的编程语言,这个问题是重视中国式考试的人应该关注的,我这里只是简单的说明如何在javascript中使用面向对象的编程思想。
面向对象首先要有对象。在javascript中创建一个对象非常简单:

var o={};

这样就产生了一个对象,我们可以很方便的给这个对象添加属性和方法:
o.name="object name"; 
o.showName=function(){ 
alert(o.name); 
}

不过大多数人还是习惯把对象的属性和方法放在定义对象的一对{}里边:
var o = { 
name: "object name", 
showName: function() { 
alert(o.name); 
} 
}

访问属性和方法有两种方式,第一种:
alert(o.name); 
o.showName();

这种写法很常见,C#中调用对象的属性和方法也是这种方式。还有一种是javascript中比较特别的,使用属性或者方法的名字作为索引来进行访问:
alert(o["name"]); 
o["showName"]();

这好像有点和孔乙己“茴香的茴字有几种写法”差不多了,事实上,很少有人使用索引来调用对象的属性或者方法。
除了我们自定义的属性和方法,我们的对象还有一个constructor属性以及toString()等方法。这些属性和方法是从Object内置对象来的,所有的对象都会有这些属性和方法。其中constructor属性指向构造出该对象的构造函数。我们没有使用构造函数来创建对象,事实上,js的解释器会使用Object构造函数。如果我们自己定义了构造函数,那么便可以通过该构造函数来创建对象,这样可以使得创建的对象具有相同的属性和方法,这便开始有点面向对象的味道了。好,我们从一个简单的例子开始看看如何创建一个构造函数吧:
function Person(name, sex, age) { 
this.name = name; 
this.sex = sex; 
this.age = age; 
this.showInfo = function() { 
alert("姓名:" + this.name + " 性别:" + this.sex + " 年龄:" + this.age); 
} 
}

我们定义了一个名字叫Person的构造函数,该构造函数有三个属性和一个方法,通过构造函数来产生一个对象并调用方法也非常简单:
var zhangsan = new Person("张三", "男", 18); 
zhangsan.showInfo();

运行后我们可以看到弹出一个对话框,显示出这个叫张三的人的信息:
面向对象的编程思想在javascript中的运用上部
我们还可以看看对象的constructor属性来看看zhangsan的构造函数是不是我们定义好的Person:
alert(zhangsan.constructor);

结果如图:
面向对象的编程思想在javascript中的运用上部
可以看到,正是我们的Person构造函数。
不过,这里还是有点问题,每一次我们构造一个对象,都会在内存中为属性和方法分配内存空间,而事实上,所有的对象完全可以用同一个方法,并不需要有多个方法的副本,这样有些浪费内存空间。既然意识到了这个问题,让我们来想想如何解决吧。一个很自然的想法是,既然我们只想为方法分配一次内存空间,那么我们可以设置一个值用来标识方法的内存空间是否已经分配,按照这个思路,我们将构造函数做如下修改:
function Person(name, sex, age) { 
this.name = name; 
this.sex = sex; 
this.age = age; 
if (typeof Person._initialized == "undefined") { 
this.showInfo = function() { 
alert("姓名:" + this.name + " 性别:" + this.sex + " 年龄:" + this.age); 
} 
Person._initialized = true; 
} 
}

这里,我们用一个成员_initialized来指示是否已经对方法进行了内存空间的分配。当第一个对象构造的时候_initialized未被定义,所以我们的判断语句为真,这时会对方法进行了定义并分配内存空间,然后把_initialized的值设置为true,用以表明方法的内存空间已经分配了。第二个对象构造的时候则不会再进入判断,因而也不会再一次分配内存空间。似乎没什么问题,运行一下看看,张三的信息依然正常显示。虽然不辛苦,不过解决了一个小问题,还是庆祝下吧,来盘回锅肉,我要大快朵颐。还没开吃,一个叫李四的MM也想让电脑弹出她的个人信息。OK,很简单,再构造一个对象,然后调用showInfo方法就可以了:
var lisi = new Person("李四", "女", 28); 
lisi.showInfo();

为了照顾MM,还把这段放在了张三的前边。MM的信息正确显示出来了,可是张三的资料不见了。这下张三不乐意了,排名放在MM后边也罢了,但好歹得有名字啊。这可苦了我这编程人员,回锅肉看来没办法吃了,先改bug吧。打开firebug,看到MM的信息显示之后出现错误,提示为:zhangsan.showInfo is not a function。设置断点看看,构造zhangsi对象以后发现并没有showInfo这个方法。原来showInfo方法虽然只有一个,但是存在于第一个对象之中,第二个对象并不能访问。那么,究竟如何才能让同一个构造函数产生的对象共用同一个函数呢?javascript中的prototype给我们提供了这个功能。根据javascript的规范中描述,每一个构造函数都有一个prototype属性用于实现继承和属性的共享。我们的showInfo方法也可以看作是一个属性,该属性指向一个函数的引用。现在我们使用prototype来使得我们的方法可以共享,代码的改动很简单,把this.showInfo改成Person.prototype.showInfo就可以了,改动之后的代码如下:
function Person(name, sex, age) { 
this.name = name; 
this.sex = sex; 
this.age = age; 
if (typeof Person._initialized == "undefined") { 
Person.prototype.showInfo = function() { 
alert("姓名:" + this.name + " 性别:" + this.sex + " 年龄:" + this.age); 
} 
Person._initialized = true; 
} 
}

使用该构造函数生成两个对象:
var lisi = new Person("李四", "女", 28); 
lisi.showInfo(); 
var zhangsan = new Person("张三", "男", 18); 
zhangsan.showInfo();

运行之后先显示李四的信息,然后是张三的信息。现在两个人都满意了,可惜我的回锅肉已经凉了
Javascript 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
javascript 设置文本框中焦点的位置
Nov 20 #Javascript
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 #Javascript
Jquery中增加参数与Json转换代码
Nov 20 #Javascript
ExtJS的FieldSet的column列布局
Nov 20 #Javascript
页面版文本框智能提示JS代码
Nov 20 #Javascript
js url传值中文乱码之解决之道
Nov 20 #Javascript
js trim函数 去空格函数与正则集锦
Nov 20 #Javascript
You might like
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
深入密码加salt原理的分析
2013/06/06 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
php微信公众号开发之简答题
2018/10/20 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
js URL参数的拼接方法比较
2012/02/15 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
Python pickle模块用法实例分析
2015/05/27 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
数学专业毕业生自荐信
2013/11/10 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
研究生求职自荐书
2014/06/23 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript