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 相关文章推荐
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
vue视图不更新情况详解
May 16 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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
第十四节--命名空间
2006/11/16 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python 登录网站详解及实例
2017/04/11 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
中学生校园广播稿
2014/01/16 职场文书
2014年教师节寄语
2014/04/03 职场文书
数字化校园建设方案
2014/05/03 职场文书
图书室标语
2014/06/21 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python