JS继承之借用构造函数继承和组合继承

什么是继承？

在面向对象编程中，继承是指从一个类中派生出一个或多个新类的过程。派生类会继承父类的一些属性和方法，同时也可以有自己的一些属性和方法。

在JavaScript中，可以使用各种方式来实现继承，包括原型链继承、构造函数继承、组合继承、Class继承等。

借用构造函数继承

借用构造函数继承是指在子类构造函数中调用父类构造函数，并且使用apply或call方法将this关键字指向子类实例。这种方式可以使子类实例拥有父类构造函数中的实例变量和实例方法。

例如：

function Parent(){
    this.name = "parent";
}
Parent.prototype.sayName = function(){
    console.log(this.name);
}
function Child(){
    Parent.call(this); // 借用构造函数继承
    this.age = 18;
}
var child = new Child();
console.log(child.name); // "parent"
console.log(child.age); // 18
child.sayName(); // TypeError: child.sayName is not a function

上面的例子中，Child构造函数借用Parent构造函数，使得child实例拥有了name属性和age属性。但是child实例并没有继承Parent原型中的sayName方法。

组合继承

组合继承是指使用构造函数继承和原型链继承的组合方式来实现继承。

组合继承首先使用借用构造函数继承来继承实例属性和方法，再通过将子类原型设置为父类实例来继承原型属性和方法。

例如：

function Parent(){
    this.name = "parent";
}
Parent.prototype.sayName = function(){
    console.log(this.name);
}
function Child(){
    Parent.call(this); // 借用构造函数继承
    this.age = 18;
}
Child.prototype = new Parent(); // 原型链继承
Child.prototype.constructor = Child; // 修正constructor
var child = new Child();
console.log(child.name); // "parent"
console.log(child.age); // 18
child.sayName(); // "parent"

上面的例子中，Child构造函数借用Parent构造函数，使得child实例拥有了name属性和age属性。而将Child原型设置为Parent的实例，使得child实例还继承了Parent原型中的sayName方法。

同时，需要修正Child原型的constructor属性，指向Child构造函数本身。

示例说明

示例1

function Animal(name) {
  this.name = name;
}
Animal.prototype.eat = function() {
  console.log(this.name + " is eating.");
}

function Dog(name) {
  Animal.call(this, name); // 借用构造函数继承
}
Dog.prototype = new Animal(); // 组合继承
Dog.prototype.constructor = Dog; // 修正constructor

var dog = new Dog('Doudou');
console.log(dog.name); // Doudou
dog.eat(); // Doudou is eating.

上面的例子中，Animal构造函数有一个实例属性name和一个原型方法eat。Dog构造函数通过借用构造函数继承Animal的实例属性name，再通过组合继承继承Animal的原型方法eat。最终，dog实例既拥有了Animal的实例属性name，也拥有了Animal的原型方法eat。

示例2

function Shape(x, y) {
  this.x = x;
  this.y = y;
}
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.log('Shape moved to', this.x, this.y);
}

function Circle(x, y, r) {
  Shape.call(this, x, y); // 借用构造函数继承
  this.r = r;
}
Circle.prototype = new Shape(); // 组合继承
Circle.prototype.constructor = Circle; // 修正constructor
Circle.prototype.area = function() {
  return Math.PI * this.r * this.r;
}

var circle = new Circle(0, 0, 10);
circle.move(5, 5); // Shape moved to 5 5
console.log(circle.area()); // 314.1592653589793

上面的例子中，Shape构造函数有两个实例属性x和y，以及一个原型方法move。Circle构造函数继承Shape构造函数的实例属性x和y，再通过组合继承继承Shape构造函数的原型方法move和自己的原型方法area。最终，circle实例既拥有了Shape的实例属性x和y和原型方法move，也拥有了自己的原型方法area。同时，circle可以调用move方法改变自己的位置，还可以获取自己的面积。