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 相关文章推荐
jquery 插件学习(六)
Aug 06 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
JavaScript实现select添加option
Jul 03 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
js微信分享接口调用详解
Jul 23 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 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
Laravel 5框架学习之表单
2015/04/08 PHP
php适配器模式简单应用示例
2019/10/23 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
js 判断 enter 事件
2009/02/12 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
javascript 数组操作详解
2015/01/29 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
require.js的用法详解
2015/10/20 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
vue 项目常用加载器及配置详解
2018/01/22 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Python爬虫与反爬虫大战
2020/07/30 Python
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
法学专业毕业生自荐信范文
2013/12/18 职场文书
物理研修随笔感言
2014/02/14 职场文书
高中军训感想800字
2014/02/23 职场文书
会计专业导师推荐信
2014/03/08 职场文书
美容院店长岗位职责
2014/04/08 职场文书
任命书范本大全
2014/06/06 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
婚前保证书范文
2015/02/28 职场文书
食堂卫生管理制度
2015/08/04 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
python中pycryto实现数据加密
2022/04/29 Python