用显浅的语言，解读JS中的三种继承

2023-11-10 14:06:30

前言

在JavaScript中，继承是一种重要的编程技术，它允许我们创建一个新对象，该对象继承另一个对象的属性和方法。这使得我们可以复用代码并创建更复杂的应用程序。

在JavaScript中，有三种主要的继承方式：

原型继承
构造函数继承
类继承

原型继承

原型继承是JavaScript中最简单的继承方式。它允许我们创建一个新对象，该对象继承另一个对象的属性和方法。这可以通过使用JavaScript的Object.create()方法来实现。

const parentObject = {
  name: "Parent",
  sayHello() {
    console.log("Hello from the parent!");
  },
};

const childObject = Object.create(parentObject);

childObject.name = "Child";

childObject.sayHello(); // Hello from the parent!

在这个示例中，parentObject是一个具有name属性和sayHello()方法的对象。我们使用Object.create()方法创建了一个新对象childObject，该对象继承了parentObject的属性和方法。我们可以通过设置childObject的name属性和调用childObject的sayHello()方法来验证这一点。

原型继承的优点是简单易懂，而且它可以在任何对象上使用，而无需修改对象的构造函数。然而，原型继承也有一个缺点，那就是它不使用构造函数，这意味着我们无法在创建对象时传递参数。

构造函数继承

构造函数继承是JavaScript中另一种继承方式。它允许我们在创建新对象时传递参数，并使用这些参数来初始化对象的属性和方法。这可以通过使用JavaScript的new运算符来实现。

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

  this.sayHello = function() {
    console.log("Hello from the parent!");
  };
}

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

  this.age = 18;

  this.sayGoodbye = function() {
    console.log("Goodbye from the child!");
  };
}

const childObject = new Child("Child");

childObject.sayHello(); // Hello from the parent!
childObject.sayGoodbye(); // Goodbye from the child!

在这个示例中，Parent是一个具有name属性和sayHello()方法的函数。Child是一个具有age属性和sayGoodbye()方法的函数，它继承了Parent的属性和方法。我们使用Parent.call(this, name)来调用Parent的构造函数，并将name参数传递给它。这将初始化Child对象的name属性。然后，我们设置Child对象的age属性和sayGoodbye()方法。

构造函数继承的优点是它允许我们在创建对象时传递参数，并且它可以在任何函数上使用，而无需修改函数的原型。然而，构造函数继承也有一个缺点，那就是它很复杂，而且它需要我们手动调用父类的构造函数。

类继承

类继承是JavaScript中最新的继承方式。它允许我们使用class来创建类，然后使用关键字extends来创建子类。这使得我们可以更轻松地创建和组织我们的代码。

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

  sayHello() {
    console.log("Hello from the parent!");
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);

    this.age = age;
  }

  sayGoodbye() {
    console.log("Goodbye from the child!");
  }
}

const childObject = new Child("Child", 18);

childObject.sayHello(); // Hello from the parent!
childObject.sayGoodbye(); // Goodbye from the child!

在这个示例中，Parent是一个具有name属性和sayHello()方法的类。Child是一个具有age属性和sayGoodbye()方法的类，它继承了Parent的属性和方法。我们使用关键字extends来指定Child类继承自Parent类。我们使用关键字super()来调用Parent类的构造函数，并将name参数传递给它。这将初始化Child对象的name属性。然后，我们设置Child对象的age属性和sayGoodbye()方法。

类继承的优点是它简单易懂，而且它可以让我们更轻松地创建和组织我们的代码。然而，类继承也有一个缺点，那就是它只支持在严格模式下使用。

总结

原型继承、构造函数继承和类继承是JavaScript中的三种主要的继承方式。每种继承方式都有其自身的优缺点。原型继承简单易懂，但它不使用构造函数。构造函数继承允许我们在创建对象时传递参数，但它很复杂，而且它需要我们手动调用父类的构造函数。类继承简单易懂，而且它可以让我们更轻松地创建和组织我们的代码，但它只支持在严格模式下使用。

在实际开发中，我们应该根据自己的需要选择合适的继承方式。如果我们需要在创建对象时传递参数，那么我们应该使用构造函数继承。如果我们需要在严格模式下开发，那么我们应该使用类继承。如果我们不需要在创建对象时传递参数，而且我们也不需要在严格模式下开发，那么我们就可以使用原型继承。