详解Javascript继承的实现

当我们需要创建一个对象并让它继承另一个对象的属性和方法时，就需要使用到继承。

Javascript中有多种继承实现方式，本篇攻略将详细讲解Javascript继承的实现过程。

什么是继承？

继承是一种面向对象编程概念，它表明了一种对象可以从另外一个对象中获取属性和方法。在Javascript中，继承是指子类（派生类）可以使用父类（基类）的属性和方法，同时子类也可以拥有自己的属性和方法。

Javascript继承实现

在Javascript中，有多种继承实现方式，常见的有原型继承、构造函数继承、组合继承、寄生组合继承等。

原型继承

原型继承是最简单的继承实现方式之一，它的原理是将父对象的实例作为子对象的原型。这样子对象就可以继承父对象的属性和方法。

// 父对象
function Fruit(name) {
  this.name = name;
}
Fruit.prototype.showName = function() {
  console.log(this.name);
};

// 子对象
var apple = new Fruit('apple');
apple.showName(); // apple

上面的代码中，我们定义了一个Fruit构造函数作为父对象，同时在父对象的原型上添加了一个showName方法。然后我们定义了一个apple对象作为子对象，通过new Fruit()的方式将apple的原型指向了父对象Fruit的原型。这样子对象apple就可以继承父对象Fruit的属性和方法了。

构造函数继承

构造函数继承是通过在子对象的构造函数中调用父对象的构造函数来实现继承。在子对象的构造函数中调用父对象的构造函数可以使用call()或apply()方法。

// 父对象
function Fruit(name) {
  this.name = name;
}
Fruit.prototype.showName = function() {
  console.log(this.name);
};

// 子对象
function Apple(name, color) {
  Fruit.call(this, name);
  this.color = color;
}
Apple.prototype.showColor = function() {
  console.log(this.color);
};

// 实例化子对象
var apple = new Apple('apple', 'red');
apple.showName(); // TypeError: apple.showName is not a function
apple.showColor(); // red

上面的代码中，我们定义了一个Fruit构造函数作为父对象，同时在父对象的原型上添加了一个showName方法。

然后我们定义了一个Apple构造函数作为子对象，通过在子对象的构造函数中调用父对象Fruit的构造函数来实现继承，同时在子对象的原型上添加了一个showColor方法。

最后我们实例化了一个apple对象作为子对象，可以看出它成功地继承了父对象Fruit的属性name，但是却无法继承父对象Fruit的方法showName。

这是因为在构造函数继承中，只能继承父对象的属性，无法继承父对象的原型上的方法。

组合继承

组合继承是将原型继承和构造函数继承结合起来，通过在子对象的构造函数中调用父对象的构造函数来继承父对象的属性，同时通过将子对象的原型指向父对象的原型来继承父对象的方法。

// 父对象
function Fruit(name) {
  this.name = name;
}
Fruit.prototype.showName = function() {
  console.log(this.name);
};

// 子对象
function Apple(name, color) {
  Fruit.call(this, name);
  this.color = color;
}

// 子对象继承父对象的方法
Apple.prototype = new Fruit();
Apple.prototype.constructor = Apple;
Apple.prototype.showColor = function() {
  console.log(this.color);
};

// 实例化子对象
var apple = new Apple('apple', 'red');
apple.showName(); // apple
apple.showColor(); // red

上面的代码中，我们定义了一个Fruit构造函数作为父对象，同时在父对象的原型上添加了一个showName方法。

然后我们定义了一个Apple构造函数作为子对象，通过在子对象的构造函数中调用父对象Fruit的构造函数来继承父对象的属性，同时通过将子对象的原型指向父对象的原型来继承父对象的方法，最后在子对象的原型上添加一个showColor方法。

最后我们实例化了一个apple对象作为子对象，可以发现它成功地继承了父对象Fruit的属性和方法。

寄生组合继承

在组合继承中，我们通过将子对象的原型指向父对象的原型来实现继承，而这样做可能会造成不必要的内存浪费，因为我们创建了一个父对象的实例作为子对象的原型，但是在子对象的构造函数中并没有对这个实例做任何操作。

因此我们可以使用寄生组合继承来避免这个问题。在寄生组合继承中，我们先创建一个父对象的副本，并将这个副本作为子对象的原型，这样子对象就可以继承父对象的属性和方法了。

// 父对象
function Fruit(name) {
  this.name = name;
}
Fruit.prototype.showName = function() {
  console.log(this.name);
};

// 子对象
function Apple(name, color) {
  Fruit.call(this, name);
  this.color = color;
}

// 子对象继承父对象的方法
Apple.prototype = Object.create(Fruit.prototype);
Apple.prototype.constructor = Apple;
Apple.prototype.showColor = function() {
  console.log(this.color);
};

// 实例化子对象
var apple = new Apple('apple', 'red');
apple.showName(); // apple
apple.showColor(); // red

上面的代码中，我们定义了一个Fruit构造函数作为父对象，同时在父对象的原型上添加了一个showName方法。

然后我们定义了一个Apple构造函数作为子对象，通过在子对象的构造函数中调用父对象Fruit的构造函数来继承父对象的属性，同时使用Object.create()方法创建一个父对象原型的副本，并将这个副本作为子对象的原型，然后在子对象的原型上添加一个showColor方法。

最后我们实例化了一个apple对象作为子对象，可以发现它成功地继承了父对象Fruit的属性和方法。

总结

Javascript中有多种继承实现方式，常见的有原型继承、构造函数继承、组合继承、寄生组合继承等。不同的继承实现方式都有各自的优缺点，我们需要根据实际的情况选择合适的继承方式。