当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 写类方式之四

Javascript
javascript比较文档位置
关于document.cookie的使用javascript
js让一行页脚保持在底部
多浏览器兼容的右下角广告代码(已测)
javascript onkeydown实现键盘快捷键控制页面
javascript的键盘控制事件说明
不懂JavaScript应该怎样学
用javascript实现截取字符串包含中文处理的函数
摘自启点的main.js
js tab效果代码增强版
慢慢展开再慢慢收起的javascript广告效果
javascript String 对象
JS查看对象功能代码
javascript点击才出现验证码
js实现双击单元格变成文本输入框效果代码
js通用滑动门类
js动画效果打开层 关闭层
js插入字符到textarea的效果代码
javascript 获取网页标题
js调用flash的效果代码

Javascript 中的 javascript 写类方式之四


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 252 ::
收藏到网摘: n/a

构造函数 + 原型 直接组装一个类;同一构造函数将组装出同一类型 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;
}