javascript实现面向对象类的功能书写技巧


Posted in Javascript onMarch 07, 2010

学过java,c#,vb的都知道类的概念,而类具有继承、封装、多态等功能。而javascript它不是面向对象语言,它是解释性语言。
但我们同样可以使用javascript来实现继承、多态。
javascript实现类,有多种方法。
方法一:构造方法。
代码

function coder(){ 
this.name = '小王'; 
this.job = '程序员'; 
this.coding = function () 
{ 
alert('我正在写代码'); 
} 
} 
var coder=new coder(); 
alert(coder.name); 
coder.coding();

方法二:工厂方法。
代码
function createCoderFactory(){ 
var obj=new Object(); 
obj.name = '小王'; 
obj.job = '程序员'; 
obj.coding = function (){ 
alert('我正在写代码'); 
}; 
return obj; 
} 
var coder = createCoderFactory(); 
alert(coder.name); 
coder.coding();

但工厂方法和构造方法都有着一个相同的缺点,就是每创建一个实例,都会实例化该类的每个函数。
方法三:原形链。
代码
function coder(){} 
coder.prototype.name = '小王'; 
coder.prototype.job = '程序员'; 
coder.prototype.coding = function(){ 
alert('我正在写代码'); 
}; 
var coder = new coder(); 
alert(coder.name); 
coder.coding();

注意:书上说:原型链有个缺点就是它所有属性都共享,只要一个实例改变其他的都会跟着改变。 测试如下:
var coder1 = new coder(); 
var coder2 = new coder(); 
alert(coder1.name); /*显示“小王”*/ 
coder2.name = '老王'; 
alert(coder1.name); /*这个显示“小王” 如果按书上说的应该是显示"老王"*/ 
alert(coder2.name); /*这个显示“老王”*/ 
alert(coder1.name);如果按书上说的应该是显示"老王",但这里显示的是“小王”,所以书上出错了。

方法四:混合方式。
以上三种都有着各自的缺点,所以我们要加以改进。
function coder(){ 
this.name = '小王'; 
this.job = '程序员'; 
} 
coder.prototype.coding = function(){ 
alert('我正在写代码'); 
};

方法五:动态原链。
要解决前三种的缺点,还有一种方法。
代码
function coder(){ 
this.name = '小王'; 
this.job = '程序员'; 
if (typeof(coder._init) == 'undefined'){ 
this.coding = function () 
{ 
alert('我正在写代码'); 
}; 
this._init = true; 
} 
}

这个方法呢,当第一次使用时,由于_init没初始化,就会执行以下的代码,实例化coding函数。以后就不会再执行,这样就只实例化函数一次。
Javascript 相关文章推荐
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 Javascript
React实现动效弹窗组件
Jun 21 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 #Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 #Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 #Javascript
javascript下判断一个元素是否存在的代码
Mar 05 #Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 #Javascript
js 获取服务器控件值的代码
Mar 05 #Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 #Javascript
You might like
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
PHP检测用户语言的方法
2015/06/15 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python中Collection的使用小技巧
2014/08/18 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
Python对象转JSON字符串的方法
2016/04/27 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python文件和文件夹复制函数
2020/02/07 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
nohup的用法
2012/11/26 面试题
英语专业学子个人的自我评价
2013/10/02 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
校园绿化美化方案
2014/06/08 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python