日期:2014-05-16 浏览次数:20591 次
1.定义一个父类
?
var superClass = function(){ this.superPro = 'super'; } superClass.prototype.pubPro = 'pubPro'; //定义父类公有属性(函数)
?
2.定义一个子类??
?
var subClass = function(){ this.subPro = 'sub'; }?
?
3.通过prototype类型属性实现继承
?? 3.1 子类prototype直接指向父类prototype?
subClass.prototype = superClass.prototype; var subObj = new subClass(); alert(subObj.pubPro); //输出 pubPro ?
???? 注:这种方法存在一个弊端,由于
javascript 中对象赋值是引用赋值方式.
?????? ?会导致子类中的对prototype修改引起所有继承superClass的子类发生变化.
??????? 我们看下一下代码就会发现:
???????
? ?? 3.2 子类prototype直接指向父类实例
??????? 为了解决3.1中的弊端,我们可以给子类的prototype引用指定父类的对象实例.代码如下:
? ? ??? 注:这种方式同样存在一个问题,父类中的函数中定义的(非原型)中定义的属性(函数),将被继承到子类中.这样是不符合利用prototype属性实现的规则(要求继承的属性函数都在prototype中定义).所以有3.3中的方法. ??? 3.3?利用空函数传递prototype
???????
? ?4.继承后指定构造函数. ???? 利用prototype属性实现继承后,会造成子类的构造函数被指向到父类的构造函数.所以在指定prototype属性后,还需还原子类的构造函数.代码参考如下: ? ? 5.封装方法 ? ? ? ? ? ? subClass.prototype.pubPro = 'subPro';//修改子类的原型属性值
var superObj = new superClass(); //获取父类对象实例
alert(superObj.pubPro); // 这里输出 subPro
subClass.prototype = new superClass();
var subObj = new subClass();
alert(subObj.pubPro); // 这里输出 subPro
function F(){};
F.prototype = superClass.prototype; //空行数F原型指向父类原型
subClass.prototype = new F();
alert(subObj.superPro); //输出undefined, superPro是函数体内定义的,不应该被继承.
alert(subObj.pubPro); //输出 pubPro , pubPro 是原型 prototype 中定义的,将被继承.
subClass.prototype.constructor = subClass;
//公共方法函数
function extendFun(subClass,superClass){
if (typeof superClass!= 'function') return subClass;
//保存对父类的引用
subClass.base = superClass.prototype;
subClass.base.constructor = superClass;//这里保存一下父类的构造函数,以便利用
//继承
var f = function () { };
f.prototype = superClass.prototype;
subClass.prototype = new f();
subClass.prototype.constructor = subClass;//指定子类构造函数
}
//封装到js对象中
Function.prototype.extendFun = function (superClass){
if (typeof superClass != 'function') return this;
//保存对父类的引用
this.base = superClass.prototype;
this.base.constructor = superClass;//这里保存一下父类的构造函数,以便利用
//继承
var f = function () { };
f.prototype = superClass.prototype;
this.prototype = new f();
this.prototype.constructor = subClass;//指定子类构造函数
}
?
?
?
?