首页 > 代码库 > 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 封装类实现原型继承