JavaScript中的继承方式：原型链继承、构造函数继承和组合继承的对比

翻滚的胖子
2023-06-20 10:01:14
JavaScript Python

在JavaScript中，继承机制是非常重要的一部分，它能够让我们更好地重用代码并且避免出现冗余的代码。JavaScript中有三种主要的继承方式，它们分别是原型链继承、构造函数继承和组合继承。本文将对这三种继承方式进行详细讲解，并进行对比，帮助初学者更好地理解JavaScript中的继承机制。

一、原型链继承

原型链继承是JavaScript中最常见的继承方式之一，它的实现原理是通过将子类的原型指向父类的实例来实现继承。这样，子类就可以访问到父类的属性和方法。

// 父类构造函数
function Parent() {
  this.name = 'Parent';
}

// 父类原型
Parent.prototype.sayName = function() {
  console.log(this.name);
}

// 子类构造函数
function Child() {
  this.age = 18;
}

// 子类原型指向父类实例
Child.prototype = new Parent();

// 创建子类实例
var child = new Child();

// 子类实例可以访问到父类的属性和方法
child.sayName(); // Parent

以上代码中，我们定义了一个父类构造函数Parent和一个子类构造函数Child。然后，我们通过将子类的原型指向父类的实例来实现继承。这样，子类就可以访问到父类的属性和方法。

二、构造函数继承

构造函数继承是通过在子类构造函数中调用父类构造函数来实现继承。这种方式可以让子类自己拥有一个独立的父类属性副本，从而避免了对父类属性的修改冲突。

// 父类构造函数
function Parent() {
  this.colors = ['red', 'green', 'blue'];
}

// 子类构造函数
function Child() {
  // 调用父类构造函数
  Parent.call(this);
}

// 创建子类实例
var child1 = new Child();
var child2 = new Child();

// 修改子类实例的属性
child1.colors.push('yellow');

// 子类实例之间不会相互影响
console.log(child1.colors); // ['red', 'green', 'blue', 'yellow']
console.log(child2.colors); // ['red', 'green', 'blue']

以上代码中，我们定义了一个父类构造函数Parent和一个子类构造函数Child。然后，我们在子类构造函数中调用父类构造函数，将父类属性赋值给子类。这样，子类就可以拥有一个独立的父类属性副本，从而避免了对父类属性的修改冲突。

三、组合继承

组合继承是原型链继承和构造函数继承的结合体，它的实现原理是通过在子类构造函数中调用父类构造函数来实现继承，并将子类的原型指向父类的实例。

// 父类构造函数
function Parent(name) {
  this.name = name;
  this.colors = ['red', 'green', 'blue'];
}

// 父类原型
Parent.prototype.sayName = function() {
  console.log(this.name);
}

// 子类构造函数
function Child(name, age) {
  // 调用父类构造函数
  Parent.call(this, name);
  this.age = age;
}

// 子类原型指向父类实例
Child.prototype = new Parent();

// 创建子类实例
var child = new Child('Child', 18);

// 子类实例可以访问到父类的属性和方法
child.sayName(); // Child

以上代码中，我们定义了一个父类构造函数Parent和一个子类构造函数Child。我们在子类构造函数中调用父类构造函数，将父类属性赋值给子类。然后，我们将子类的原型指向父类的实例，这样子类就可以访问到父类的属性和方法了。

四、三种继承方式的对比

	原型链继承	构造函数继承	组合继承
实现原理	将子类的原型指向父类的实例	在子类构造函数中调用父类构造函数	在子类构造函数中调用父类构造函数，并将子类的原型指向父类的实例
优点	简单，容易理解	避免了对父类属性的修改冲突	既可以访问到父类的属性和方法，又可以避免对父类属性的修改冲突
缺点	无法实现多继承	无法访问父类原型上的属性和方法	父类构造函数会被调用两次