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 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
MooTools 1.2介绍
Sep 14 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 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内核解析:PHP中的哈希表
2014/01/30 PHP
php实现encode64编码类实例
2015/03/24 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
prototype class详解
2006/09/07 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
Python字符串格式化
2015/06/15 Python
详解Python爬虫的基本写法
2016/01/08 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
幼儿园儿童节主持词
2014/03/21 职场文书
土建工程师岗位职责
2014/06/10 职场文书
节约用水标语
2014/06/11 职场文书
跑出一片天观后感
2015/06/08 职场文书
800字作文之大雪
2019/12/04 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
Java字符串逆序方法详情
2022/03/21 Java/Android
SQL Server中使用表变量和临时表
2022/05/20 SQL Server