面向对象的编程思想在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 相关文章推荐
jQuery get和post 方法传值注意事项
Nov 03 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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
php生成静态页面的简单示例
2014/04/17 PHP
js验证表单第二部分
2006/11/25 Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
编写strcpy函数
2014/06/24 面试题
销售内勤岗位职责
2014/04/15 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
中秋节主题班会
2015/08/14 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫