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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 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
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
关于python中remove的一些坑小结
2021/01/04 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
留学推荐信写作指南
2014/01/25 职场文书
幼儿教育感言
2014/02/05 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
趣味运动会开幕词
2015/01/28 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python