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 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
在Django的session中使用User对象的方法
2015/07/23 Python
Python+django实现文件下载
2016/01/17 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
Django权限机制实现代码详解
2018/02/05 Python
python使用turtle库绘制时钟
2020/03/25 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
如何基于python生成list的所有的子集
2019/11/11 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
自主招生自荐信范文
2013/12/04 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
就业导师推荐信范文
2015/03/27 职场文书
超强台风观后感
2015/06/09 职场文书
运动会广播稿50字
2015/08/19 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
JavaScript的function函数详细介绍
2021/11/20 Javascript