javascript 写类方式之四


Posted in Javascript onJuly 05, 2009

4、构造函数 + 原型 直接组装一个类;同一构造函数将组装出同一类型
通过前面几篇得知javascript写类无非基于构造函数 和原型 。既然这样,我们写个工具函数来写类。

/** 
* $class 写类工具函数之一 
* @param {Object} constructor 
* @param {Object} prototype 
*/ 
function $class(constructor,prototype) { 
var c = constructor || function(){}; 
var p = prototype || {}; 
c.prototype = p; 
return c; 
}

嗯。工具类写好了,来组装下:用构造函数来生成类实例的属性(字段),原型对象用来生成类实例的方法。
//构造函数 
function Person(name) { 
this.name = name; 
} 
//原型对象 
var proto = { 
getName : function(){return this.name}, 
setName : function(name){this.name = name;} 
} //组装 
var Man = $class(Person,proto); 
var Woman = $class(Person,proto);

ok,这时候已经得到了两个类Man,Woman。并且是同一个类型的。测试如下:
console.log(Man == Woman);//true 
console.log(Man.prototype == Woman.prototype);//true

创建对象看看,
var man = new Man("Andy"); 
var woman = new Woman("Lily"); 
console.log(man instanceof Man);//true 
console.log(woman instanceof Woman);//true 
console.log(man instanceof Person);//true 
console.log(woman instanceof Person);//true

ok一切如我们所期望。但是有个问题,下面代码的结果输出false,
console.log(man.constructor == Person);//false

这让人不悦:从以上的代码看出man的确是通过Man类new出来的 var man = new Man("Andy"),那么对象实例man的构造器应该指向Man,但为何事与愿违呢?
原因就在于$class中重写了Person的原型:c.prototype = p;
好了,我们把$class稍微改写下,将方法都挂在构造器的原型上(而不是重写构造器的原型),如下:
function $class(constructor,prototype) { 
var c = constructor || function(){}; 
var p = prototype || {}; 
// c.prototype = p; 
for(var atr in p) 
c.prototype[atr] = p[atr]; 
return c; 
}
Javascript 相关文章推荐
js继承的实现代码
Aug 05 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
javascript 写类方式之三
Jul 05 #Javascript
javascript 写类方式之二
Jul 05 #Javascript
javascript 写类方式之一
Jul 05 #Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 #Javascript
jQuery DIV弹出效果实现代码
Jul 03 #Javascript
Javascript 遍历对象中的子对象
Jul 03 #Javascript
javascript web页面刷新的方法收集
Jul 02 #Javascript
You might like
php验证手机号码
2015/11/11 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
三年级数学教学反思
2014/01/31 职场文书
行政办公室岗位职责
2014/03/18 职场文书
毕业自我鉴定书
2014/03/24 职场文书
婚纱店策划方案
2014/05/22 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
2014年售票员工作总结
2014/11/19 职场文书
长征观后感
2015/06/09 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python
一条 SQL 语句执行过程
2022/03/17 MySQL