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实现获取窗口的大小和位置代码分享
Dec 04 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
JS函数式编程实现XDM一
Jun 16 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
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
JavaScript触发器详解
2007/03/10 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
vue路由中前进后退的一些事儿
2019/05/18 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
前端性能优化建议
2020/09/17 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
Python查询IP地址归属完整代码
2017/06/21 Python
anaconda如何查看并管理python环境
2019/07/05 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Python中常见的数制转换有哪些
2020/05/27 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
房屋委托书范本
2014/04/04 职场文书
奥林匹克的口号
2014/06/13 职场文书
科学育儿宣传标语
2014/10/08 职场文书
归元寺导游词
2015/02/06 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS