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实现ajax提交form表单的方法总结
Mar 03 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
小程序实现搜索框
Jun 19 Javascript
js中的this的指向问题详解
Aug 29 Javascript
微信小程序实现轮播图指示器
Jun 25 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
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
python函数与方法的区别总结
2019/06/23 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
知识竞赛活动方案
2014/02/18 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
交通安全月活动总结
2015/05/08 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python