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 firefox兼容ie的dom方法脚本
May 18 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
详解Javascript实践中的命令模式
May 05 Javascript
js实现自动锁屏功能
Jun 02 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
使用PHP模拟HTTP认证
2006/10/09 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
深入理解python对json的操作总结
2017/01/05 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
应届生人事助理求职信
2013/11/09 职场文书
中式结婚主持词
2014/03/14 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
交通事故和解协议书
2014/09/25 职场文书
我爱我班主题班会
2015/08/13 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python