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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
ExtJS 下拉多选框lovcombo
May 19 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
javascript面向对象编程代码
Dec 19 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
node.js的事件机制
Feb 08 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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 广告调用类代码(支持Flash调用)
2011/08/11 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
angular 服务随记小结
2019/05/06 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
TensorFlow变量管理详解
2018/03/10 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
高中生的自我评价
2014/03/04 职场文书
人事任命书格式
2014/06/05 职场文书
技术入股合作协议书
2014/10/07 职场文书
志愿者个人总结
2015/03/03 职场文书
法律进社区活动总结
2015/05/07 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
护士岗位竞聘书
2015/09/15 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
Apache自带的ab压力测试工具的实现
2022/07/23 Servers