分享JavaScript 中的几种继承方式

分享JavaScript 中的几种继承方式

为什么需要继承？

在编写代码的过程中，我们不可能每一次都从零开始写。很多时候，我们需要利用现有的代码来实现新的功能，这就是继承的一个重要应用场景。

我们之所以需要继承，是因为继承可以让我们复用代码，避免重复劳动和代码冗余。当我们需要对某一种对象进行扩展时，继承就是我们的好选择。

继承的几种方式

在JavaScript中，实现继承的方式主要有以下几种：

原型继承

原型继承是JavaScript中最常见的一种继承方式，是以原型链为基础实现的。

示例：使用原型继承创建一个对象

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayName = function() {
  console.log(`My name is ${this.name}`);
};

function Student(name, age, school) {
  this.school = school;
  Person.call(this, name, age);
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.saySchool = function() {
  console.log(`I am studying in ${this.school}`);
};

const student1 = new Student('Tom', 18, 'MIT');
student1.sayName(); // My name is Tom
student1.saySchool(); // I am studying in MIT

构造函数继承

构造函数继承是通过借用构造函数来实现继承的，能够一次性地继承实例属性和方法。

示例：使用构造函数继承创建一个对象

function Person(name) {
  this.name = name;
  this.sayName = function() {
    console.log(`My name is ${this.name}`);
  };
}

function Student(name, school) {
  Person.call(this, name);
  this.school = school;
  this.saySchool = function() {
    console.log(`I am studying in ${this.school}`);
  }
}

const student1 = new Student('Tom', 'MIT');
student1.sayName(); // My name is Tom
student1.saySchool(); // I am studying in MIT

组合继承

组合继承是把原型继承和构造函数继承结合在一起，既可以继承实例属性和方法，也可以继承原型属性和方法。

示例：使用组合继承创建一个对象

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

Person.prototype.sayName = function() {
  console.log(`My name is ${this.name}`);
};

function Student(name, school) {
  Person.call(this, name);
  this.school = school;
}

Student.prototype = new Person();
Student.prototype.constructor = Student;
Student.prototype.saySchool = function() {
  console.log(`I am studying in ${this.school}`);
};

const student1 = new Student('Tom', 'MIT');
student1.sayName(); // My name is Tom
student1.saySchool(); // I am studying in MIT

extends关键字继承

ES6的class语法提供了一种更为简洁的继承方式——extends关键字。通过extends关键字可以快速实现原型继承。

示例：使用extends关键字继承创建一个对象

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

  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

class Student extends Person {
  constructor(name, school) {
    super(name);
    this.school = school;
  }

  saySchool() {
    console.log(`I am studying in ${this.school}`);
  }
}

const student1 = new Student('Tom', 'MIT');
student1.sayName(); // My name is Tom
student1.saySchool(); // I am studying in MIT

以上就是JavaScript中常用的几种继承方式，选择哪种方法要根据实际需求来定。