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 核心函数以及jQuery对象
Mar 23 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
前台js调用后台方法示例
Dec 02 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
解决Vue watch里调用方法的坑
Nov 07 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
解析php多线程下载远程多个文件
2013/06/25 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
JS操作数据库的实例代码
2013/10/17 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python logging模块学习笔记
2014/05/24 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python之列表实现栈的工作功能
2019/01/28 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
如何启动时不需输入用户名与密码
2014/05/09 面试题
中学教师培训制度
2014/01/31 职场文书
财务部总监岗位职责
2014/03/12 职场文书
模具专业求职信
2014/06/26 职场文书
2019公司管理制度
2019/04/19 职场文书