首页 > 代码库 > js 封装类实现原型继承
js 封装类实现原型继承
实现原理:定义一个封装函数extend;该函数有2个参数,Child代表子类,Parent代表父类;在函数内,先定义一个空函数F, 用来实现功能中转,设置F的原型为父类的原型,然后把空函数的实例传递给子类的原型,使用空函数的好处:避免直接实例化父类可能会带来系统性能问题,比如父类的实例很大的话,实例化会占用很多内存;
function extend(Child,Parent) {
//Child表示子类,Parent表示父类
// 首先定义一个空函数
var F = function(){};
// 设置空函数的原型为父类的原型
F.prototype = Parent.prototype;
// 实例化空函数,并把父类原型引用传递给子类
Child.prototype = new F();
// 重置子类原型的构造器为子类自身
Child.prototype.constructor = Child;
// 在子类中保存父类的原型,避免子类与父类耦合
Child.parent = Parent.prototype;
if(Parent.prototype.constructor !== Parent) {
// 检测父类原型的构造器是否为原型自身
Parent.prototype.constructor = Parent;
}
}
测试代码如下:
// 下面我们定义2个类A和类B,我们目的是实现B继承于A
function A(x) {
this.x = x;
this.getX = function(){
return this.x;
}
}
A.prototype.add = function(){
return this.x + this.x;
}
A.prototype.mul = function(){
return this.x * this.x;
}
// 构造函数B
function B(x){
A.call(this,x); // 继承构造函数A中的所有属性及方法
}
extend(B,A); // B继承于A
var b = new B(10);
console.log(b.getX()); // 10
console.log(b.add()); // 20
console.log(b.mul()); //100
js 封装类实现原型继承