js面向对象编程之继承

2018-04-01  本文已影响0人  夏liao夏天

一.子类的原型对象--类式继承

//类式继承
//声明父类
function SuperClass() {
    this.superValue = true;
}
//为父类添加共有方法
SuperClass.prototype.getSuperValue = function() {
     return this.superValue;
};
//声明子类
function SubClass() {
    this.subValue = false;
}

//继承父类
SubClass.prototype = new SuperClass();
//为子类添加共有方法
SubClass.prototype.getSubValue = function() {
    return this.subValue;
};

类式继承就是将子类的原型_ proto_指向父类的原型对象,这个新创建的对象可以访问父类原型上的属性和方法与从父类构造函数中复制的属性和方法。

缺点:

二.创建即继承--构造函数继承

//构造函数式继承
//声明父类
function SuperClass(id) {
    //引用类型共有属性
    this.books = [ 'js', 'html', 'css' ];
    //值类型共有属性
    this.id = id;
}
//父类声明原型方法
SuperClass.prototype.showBooks = function() {
    console.log(this.books);
}
//声明子类
function SubClass(id) {
    //继承父类
    SuperClass.call(this, id);
}

SuperClass.call(this, id);这条语句是构造函数式继承的精华,call这个方法可以更改函数的作用环境,这个方法的作用就是将子类的变量在父类中执行一遍,继承父类的共有属性。由于没有涉及原型prototype,子类不继承父类的原型方法。

三.组合继承

//声明父类
function SuperClass(name) {
    //值类型共有属性
    this.name = name;
    // 引用类型共有属性
    this.books = [ 'js', 'html', 'css' ];
}
//父类原型共有方法
SuperClass.prototype.getName = function() {
    console.log(this.name);
};
//声明子类
function SubClass(name, time) {
    //构造函数式继承父类name属性
    SuperClass.call(this,name);
   //子类中新增共有属性
   this.time = time;
}
//类式继承 子类原型继承父类
SubClass.prototype = new SuperClass();
//子类原型方法
SubClass.prototype.getTime = function() {
    console.log(this.time);
};

组合式继承就是在子类构造函数中执行父类构造函数,在子类的原型上实例化父类。

缺点:

在使用构造函数继承时执行了一遍父类的构造函数,而在实现子类原型的类式继承时又调用了一遍父类构造函数,因此父类构造函数调用了两遍。

四.原型式继承

//原型是继承
function inheritObject(o) {
    //声明一个过渡函数对象
    function F() {}
   //过渡对象的原型继承父对象
   F.prototype = o;
   //返回过渡对象的一个实例,该实例的原型继承了父对象
   return new F();
}

原型式继承是对类式继承的一个封装,其中的过渡对象就相当于类式继承中的子类。跟类式继承一样,父类对象中的值类型的属性被复制,引用类型的属性被共用。

五.寄生式继承

//声明基对象
var book = {
      name: "js book",
      alikeBook: [ 'js', 'html', 'css' ]
};
function createBook(obj) {
    //通过原型继承方式创建新对象
    var o = new inheritObject(obj);
   //拓展新对象
   o.getName = function() {
      console.log(name);
   }
   //返回拓展后的新对象
   return o;
}

寄生式继承就是对原型继承的第二次封装,在这个过程中对继承的对象进行了拓展,这样新创建的对象不仅仅有父类中的属性和方法而且还添加新的属性和方法。

六.终极继承者--寄生组合式继承

function inheritObject(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

function inheritPrototype(subClass, superClass) {
  var p = inheritObject(superClass.prototype);
  p.constructor = subClass;
  subClass.prototype = p;
}

function SuperClass(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

SuperClass.prototype.getName = function(){
  console.log(this.name);
};

function SubClass(name, time){
  SuperClass.call(this, name);
  this.time = time;
}

inheritPrototype(SubClass, SuperClass);
SubClass.prototype.getTime = function() {
  console.log(this.time);
};

组合式继承中,通过构造函数继承了父类的属性和方法,并且通过寄生式继承重新继承父类的原型。由于在构造函数中我们已经调用了父类的构造函数,因此我们需要的就是父类原型对象的一个副本。在寄生式继承中要对复制对象p修复其constructor属性指向不正确的问题,最后将得到的复制对象p赋值给子类的原型,这样子类的原型就继承了父类的原型并且没有执行父类的构造函数。

上一篇下一篇

猜你喜欢

热点阅读