细数Javascript实现继承的七种方式，掌握全面进阶技巧

2023-11-19 15:20:59

JavaScript中的继承方式

原型链继承

原型链作为实现继承的主要方法，其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。例如，我们可以创建一个Person类，然后创建一个Student类继承自Person类。这样，Student类就可以继承Person类的属性和方法。

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

function Student(name, major) {
  Person.call(this, name); // 调用超类构造函数
  this.major = major;
}

Student.prototype = new Person(); // 继承Person类的原型

var student = new Student("John", "Computer Science");

student.sayHello(); // 输出: Hello, my name is John

借用构造函数继承

为解决原型中包含引用类型值所带来的问题，人们开始用一种叫做借用构造函数的技术来实现继承。这种技术的基本思想非常简单，即在子类构造函数内部调用超类构造函数。这样，子类就可以继承超类的属性和方法，而不会出现原型链中的问题。

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

function Student(name, major) {
  Person.call(this, name); // 调用超类构造函数
  this.major = major;
}

var student = new Student("John", "Computer Science");

student.sayHello(); // 输出: Hello, my name is John

组合继承

组合继承就是将原型链和借用构造函数结合起来使用。这种方法可以继承超类的属性和方法，同时避免原型链中的问题。

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

function Student(name, major) {
  Person.call(this, name); // 调用超类构造函数
  this.major = major;
}

Student.prototype = new Person(); // 继承Person类的原型

var student = new Student("John", "Computer Science");

student.sayHello(); // 输出: Hello, my name is John

原型式继承

原型式继承是通过创建一个新对象并将其原型指向另一个对象来实现继承。这样，新对象就可以继承另一个对象的属性和方法。

var person = {
  name: "John",
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};

var student = Object.create(person); // 创建一个新对象并将其原型指向person
student.major = "Computer Science";

student.sayHello(); // 输出: Hello, my name is John

寄生式继承

寄生式继承是通过创建一个新对象并将其属性和方法添加到另一个对象来实现继承。这样，新对象就可以继承另一个对象的属性和方法。

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

var student = {
  __proto__: new Person("John"), // 创建一个新对象并将其原型指向Person
  major: "Computer Science"
};

student.sayHello(); // 输出: Hello, my name is John

函数式继承

函数式继承是通过创建一个函数并将其作为另一个函数的原型来实现继承。这样，新函数就可以继承另一个函数的属性和方法。

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

function Student(name, major) {
  Person.call(this, name); // 调用超类构造函数
  this.major = major;
}

Student.prototype = Person.prototype; // 将Student的原型指向Person的原型

var student = new Student("John", "Computer Science");

student.sayHello(); // 输出: Hello, my name is John

类式继承

类式继承是使用class来创建类，然后使用extends关键字来继承另一个类。这是ES6中引入的一种新的继承方式。

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

  sayHello() {
    console.log("Hello, my name is " + this.name);
  }
}

class Student extends Person {
  constructor(name, major) {
    super(name); // 调用超类构造函数
    this.major = major;
  }
}

var student = new Student("John", "Computer Science");

student.sayHello(); // 输出: Hello, my name is John