探秘七个继承的玄妙：直击关键代码，解读差异

2023-10-31 08:08:35

继承：面向对象编程中的基石

简介

继承是面向对象编程 (OOP) 中的一项至关重要的概念，它允许类从另一个类中继承属性和方法。在 JavaScript 中，继承提供了代码复用、简化程序构建以及增强代码可维护性等好处。本文将深入探讨 JavaScript 中的各种继承方式，分析它们的优缺点，并提供实用示例。

原型链继承

基本原理：
原型链继承是 JavaScript 中最简单的继承方式。通过创建一个新对象的实例并将其指向父类实例来实现。子类对象通过原型链访问父类的方法和属性。

优点：

实现简单，开销最小。

缺点：

子类无法访问父类的私有属性。
所有原型属性都是共享的，修改原型属性会影响所有子类。

示例代码：

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

Parent.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

function Child() {
  this.age = 20;
}

Child.prototype = new Parent();

const child = new Child();
child.greet(); // "Hello, my name is John."

构造函数继承

基本原理：
构造函数继承通过在子类构造函数中显式调用父类构造函数来实现。这种方式提供了对父类私有属性的访问。

优点：

子类可以访问父类的私有属性和方法。

缺点：

由于多次调用构造函数，代码可能冗余。

示例代码：

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

Parent.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

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

const child = new Child("John", 20);
child.greet(); // "Hello, my name is John."

组合继承

基本原理：
组合继承结合了原型链继承和构造函数继承。它先通过原型链继承建立父类属性的访问，然后再在子类构造函数中调用父类构造函数。

优点：

可以访问父类的私有属性和方法，同时避免代码冗余。

缺点：

代码实现复杂。

示例代码：

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

Parent.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

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

Child.prototype = new Parent(); // 建立原型链继承

const child = new Child("John", 20);
child.greet(); // "Hello, my name is John."

寄生式继承

基本原理：
寄生式继承通过创建一个新对象并将其设为子类的原型对象来实现。这种方式不会污染父类原型，但子类无法访问父类的私有属性和方法。

优点：

实现简单，不会污染父类原型。

缺点：

子类无法访问父类的私有属性和方法。

示例代码：

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

Parent.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

function Child(name, age) {
  const parent = new Parent(name); // 创建父类实例
  parent.age = age; // 为父类实例添加属性
  return parent; // 返回父类实例
}

const child = new Child("John", 20);
child.greet(); // "Hello, my name is John."

寄生组合继承

基本原理：
寄生组合继承结合了寄生式继承和组合继承。它通过创建父类实例并将其设为子类的原型对象来实现，同时在子类构造函数中调用父类构造函数。

优点：

可以访问父类的私有属性和方法，避免代码冗余和污染父类原型。

缺点：

代码实现复杂。

示例代码：

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

Parent.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

function Child(name, age) {
  const parent = new Parent(name); // 创建父类实例
  parent.age = age; // 为父类实例添加属性
  Child.prototype = parent; // 寄生式继承
  this.constructor = Child; // 修正子类构造函数
  return parent; // 返回父类实例
}

const child = new Child("John", 20);
child.greet(); // "Hello, my name is John."

ES6 类继承

基本原理：
ES6 引入了类，可以通过 extends 实现类继承。这种方式类似于组合继承，但语法更简洁。

优点：

语法简洁，可以访问父类的私有属性和方法。

缺点：

不兼容旧版本的 JavaScript。

示例代码：

class Parent {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 调用父类构造函数
    this.age = age;
  }
}

const child = new Child("John", 20);
child.greet(); // "Hello, my name is John."

Mixin 继承

基本原理：
Mixin 继承允许通过混合多个对象的属性和方法来创建新对象。这种方式可以实现多重继承。

优点：

实现多重继承，增强代码可重用性。

缺点：

代码实现复杂。

示例代码：

const ParentMixin = {
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

const ChildMixin = {
  play() {
    console.log("I am playing.");
  }
};

function Child(name) {
  this.name = name;

  // Mixin 继承
  Object.assign(this, ParentMixin, ChildMixin);
}

const child = new Child("John");
child.greet(); // "Hello, my name is John."
child.play(); // "I am playing."