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中的屏蔽的使用示例
Jul 30 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
Javascript模块模式分析
2008/05/16 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
Javascript的闭包详解
2014/12/26 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
Python自动发送邮件的方法实例总结
2018/12/08 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
Java程序员面试题
2013/07/15 面试题
医药营销个人求职信
2014/04/12 职场文书
安全保证书范文
2014/04/29 职场文书
投标承诺书怎么写
2014/05/24 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle