JavaScript 原型继承之构造函数继承

JavaScript 原型继承之构造函数继承攻略

什么是构造函数继承

构造函数继承（也称为经典继承）是一种使用构造函数来创建对象并继承来自父类的属性和方法的方法。这种方式通过在子类的构造函数中调用父类构造函数以继承属性，然后将子类原型设置为父类实例来继承方法。

如何进行构造函数继承

在子类构造函数中，通过调用父类构造函数，来继承父类的属性：

function Parent(name) {
  this.name = name;
}

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

在这个示例中，Child 构造函数继承 Parent 构造函数中的 name 属性，通过 Parent.call(this, name) 调用父类构造函数。

同时，在子类的原型上设置对象 new Parent()，将父类实例的方法继承到子类：

Child.prototype = new Parent();

这种方法存在一个问题，即子类的原型引用了一个父类的实例，这个实例可能会持有不必要的、甚至是有害的属性和方法。因此，建议在上述方式进行原型继承的时候，在将父类的实例赋给子类原型时，应该使用一个不包含任何实例属性和方法的中介函数：

function inherit(C, P) {
    function F() {};
    F.prototype = P.prototype;
    C.prototype = new F();
    // 将子类原型的构造器指向子类
    C.prototype.constructor = C;
}

使用这个 inherit 函数进行构造函数继承示例：

function Parent(name) {
  this.name = name;
}

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

inherit(Child, Parent);

构造函数继承示例

示例一

function Animal(name) {
  this.name = name;
}

Animal.prototype.getName = function() {
  return this.name;
}

function Cat(name, color) {
  Animal.call(this, name);
  this.color = color;
}

// 关键：继承父类的原型
Cat.prototype = new Animal();

var cat = new Cat('Tom', 'White');
console.log(cat.getName()); // 'Tom'
console.log(cat.color); // 'White'

在上述示例中，Cat 继承了 Animal 的构造函数以及原型上定义的 getName 方法，并且在 Cat 构造函数中添加了自己的属性 color。最终通过实例化 Cat 类，来创建一个名字为 Tom、颜色为 White 的猫，并通过 getName 方法来获取猫的名字。

示例二

function Animal(name) {
  this.name = name;
}

Animal.prototype.getName = function() {
  return this.name;
}

function Cat(name, color) {
  Animal.call(this, name);
  this.color = color;
}

// 关键：继承父类的原型
function inherit(child, parent) {
  var F = function() {};
  F.prototype = parent.prototype;
  child.prototype = new F();
  child.prototype.constructor = child;
}

inherit(Cat, Animal);

var cat = new Cat('Tom', 'White');
console.log(cat.getName()); // 'Tom'
console.log(cat.color); // 'White'

在第二个示例中，通过构造函数继承的方式，也成功的继承了 Animal 的构造函数和方法。

总结

构造函数继承是 JavaScript 类继承的经典方式之一。通过继承父类的构造函数属性和将子类的原型属性设置为父类的实例，使子类继承了父类的全部属性和方法。在实践中，建议使用 inherit 函数来帮助进行正确的原型继承。