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 动画基础教程
Dec 25 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
jQuery动画与特效详解
Feb 01 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 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/10/09 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
js数组的操作指南
2014/12/28 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
Python中的引用知识点总结
2019/05/20 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
《哪吒闹海》教学反思
2014/02/28 职场文书
2015年试用期工作总结
2014/12/12 职场文书
党员评议自我评价
2015/03/03 职场文书
关于倡议书的范文
2015/04/29 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS