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技术-屏蔽类
Aug 15 Javascript
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
layui table 参数设置方法
Aug 14 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
小偷PHP+Html+缓存
2006/11/25 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
php命令行模式代码实例详解
2021/02/26 PHP
学习面向对象之面向对象的术语
2010/11/30 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python3爬虫学习入门教程
2018/12/11 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
区域总监的岗位职责
2013/11/21 职场文书
市场营销管理制度
2014/01/29 职场文书
简单租房协议书
2014/04/09 职场文书
什么是就业协议书
2014/04/17 职场文书
团支部推优材料
2014/05/21 职场文书
火锅店的活动方案
2014/08/15 职场文书
时尚女魔头观后感
2015/06/04 职场文书
毕业证明书
2015/06/19 职场文书
主婚人致辞精选
2015/07/28 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
python中的getter与setter你了解吗
2022/03/24 Python