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 触发select onchange事件代码
Mar 20 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
JS删除String里某个字符的方法
Jan 06 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面向对象编程快速入门
2006/12/14 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
Javascript的this用法
2017/01/16 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
python解析json实例方法
2013/11/19 Python
Python判断Abundant Number的方法
2015/06/15 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
应届护士推荐信
2013/11/16 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
高校教师个人总结
2015/02/10 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
Redis 常见使用场景
2021/08/30 Redis
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技