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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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
缅甸的咖啡简史
2021/03/04 咖啡文化
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
Bootstrap表单布局
2016/07/19 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
虚拟机下载python是否需要联网
2020/07/27 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
《长相思》听课反思
2014/04/10 职场文书
查摆剖析材料范文
2014/09/30 职场文书
公积金接收函格式
2015/01/30 职场文书
导游欢送词
2015/01/31 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
Python安装使用Scrapy框架
2022/04/12 Python