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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
python读取txt文件中特定位置字符的方法
2018/12/24 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
J2EE包括哪些技术
2016/11/25 面试题
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
高中生期末评语
2014/01/28 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
老乡聚会通知
2015/04/23 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
运动会广播稿300字
2015/08/19 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏