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 相关文章推荐
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
深入解析koa之异步回调处理
Jun 17 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
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
php 字符转义 注意事项
2009/05/27 PHP
php获取根域名方法汇总
2014/10/28 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
javascript+mapbar实现地图定位
2010/04/09 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python如何输出百分比
2020/07/31 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
学生党员思想汇报
2013/12/28 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
讲党性心得体会
2014/09/03 职场文书
教师自查自纠材料
2014/10/14 职场文书
员工年终考核评语
2014/12/31 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
python playwright之元素定位示例详解
2022/07/23 Python
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript