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中的Math 使用介绍
Apr 21 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
原生JS实现pc端轮播图效果
Dec 21 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
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
使用php4加速网络传输
2006/10/09 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
Display SQL Server Version Information
2007/06/21 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
Python判断Abundant Number的方法
2015/06/15 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
python方向键控制上下左右代码
2018/01/20 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
自我鉴定四大框架
2014/01/17 职场文书
社团活动总结范文
2014/04/26 职场文书
给老婆的保证书范文
2014/04/28 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
龙猫观后感
2015/06/09 职场文书
小学班主任心得体会
2016/01/07 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers