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 相关文章推荐
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
JSON格式化输出
Nov 10 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
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
php cout<<的一点看法
2010/01/24 PHP
php foreach 使用&(与运算符)引用赋值要注意的问题
2010/02/16 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
光荣入党自我鉴定
2014/01/22 职场文书
司法局火灾防控方案
2014/06/05 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
学校2014年度工作总结
2014/12/06 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
教师听课学习心得体会
2016/01/15 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
python运算符之与用户交互
2022/04/13 Python