js 封装类实现原型继承

Posted 2020-09-28

实现原理：定义一个封装函数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