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 网站换肤功能实现代码
Nov 02 Javascript
javascript call方法使用说明
Jan 11 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
vuex 中插件的编写案例解析
Jun 10 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
file_get_contents("php://input", "r")实例介绍
2013/07/01 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
js实现批量删除功能
2020/08/27 Javascript
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
浅谈python数据类型及类型转换
2017/12/18 Python
详解python中的Turtle函数库
2018/11/19 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
怎样创建、运行java程序
2014/08/01 面试题
会计职业生涯规划范文
2014/01/04 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
主题教育活动总结
2014/05/05 职场文书
学校评语大全
2014/05/06 职场文书
商业用房租赁协议书
2014/10/13 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
追悼会家属答谢词
2015/09/29 职场文书