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 相关文章推荐
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
js的回调函数详解
Jan 05 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
一个改进的UBB类
2006/10/09 PHP
开发大型 PHP 项目的方法
2007/01/02 PHP
php 中的str_replace 函数总结
2007/04/27 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
python如何实现图片压缩
2020/09/11 Python
在购买印度民族服饰:Soch
2020/09/15 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
好人好事事迹材料
2014/02/12 职场文书
电力安全事故反思
2014/04/27 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
2014年公务员工作总结
2014/11/18 职场文书
2014年会计工作总结
2014/11/27 职场文书
医生个人年终总结
2015/02/28 职场文书
辞职信范文大全
2015/03/02 职场文书