提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript写类方式之四

JavaScript 方式 之四 写类
2023-06-13 09:14:10 时间
4、构造函数+原型直接组装一个类；同一构造函数将组装出同一类型
通过前面几篇得知javascript写类无非基于构造函数和原型。既然这样，我们写个工具函数来写类。
复制代码代码如下:

/**
*$class写类工具函数之一
*@param{Object}constructor
*@param{Object}prototype
*/
function$class(constructor,prototype){
varc=constructor||function(){};
varp=prototype||{};
c.prototype=p;
returnc;
}

嗯。工具类写好了，来组装下：用构造函数来生成类实例的属性（字段），原型对象用来生成类实例的方法。
复制代码代码如下:

//构造函数
functionPerson(name){
this.name=name;
}
//原型对象
varproto={
getName:function(){returnthis.name},
setName:function(name){this.name=name;}
}

//组装
varMan=$class(Person,proto);
varWoman=$class(Person,proto);

ok，这时候已经得到了两个类Man，Woman。并且是同一个类型的。测试如下：
复制代码代码如下:
console.log(Man==Woman);//true
console.log(Man.prototype==Woman.prototype);//true

创建对象看看，
复制代码代码如下:
varman=newMan("Andy");
varwoman=newWoman("Lily");
console.log(maninstanceofMan);//true
console.log(womaninstanceofWoman);//true
console.log(maninstanceofPerson);//true
console.log(womaninstanceofPerson);//true

ok一切如我们所期望。但是有个问题，下面代码的结果输出false，
复制代码代码如下:
console.log(man.constructor==Person);//false

这让人不悦：从以上的代码看出man的确是通过Man类new出来的varman=newMan("Andy")，那么对象实例man的构造器应该指向Man，但为何事与愿违呢？
原因就在于$class中重写了Person的原型：c.prototype=p;
好了，我们把$class稍微改写下，将方法都挂在构造器的原型上（而不是重写构造器的原型），如下：
复制代码代码如下:
function$class(constructor,prototype){
varc=constructor||function(){};
varp=prototype||{};
//c.prototype=p;
for(varatrinp)
c.prototype[atr]=p[atr];
returnc;
}

相关文章