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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
JSON 数据格式详解
Sep 13 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
jQuery实现可以扩展的日历
Dec 01 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
大学生违纪检讨书300字
2014/10/25 职场文书
2014年领班工作总结
2014/11/25 职场文书
个人创业事迹材料
2014/12/30 职场文书
客户付款通知书
2015/04/23 职场文书
关于迟到的检讨书
2015/05/06 职场文书