实现继承的多种方式及工作原理详解

2023-12-15 20:26:16

在面向对象编程中，继承是一种重要的机制，它允许子类从父类继承属性和方法，从而实现代码的重用和扩展。在 JavaScript 中，继承可以通过多种方式实现，包括原型继承、构造函数继承、组合继承和寄生继承。

原型继承

原型继承是 JavaScript 中最简单、最常用的继承方式。它通过创建一个子类的原型对象来实现继承，该原型对象继承了父类的原型对象的所有属性和方法。子类的实例对象可以通过原型对象访问父类的属性和方法。

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

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

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

Student.prototype = Object.create(Person.prototype);

const student = new Student('John Doe', 'Computer Science');
student.greet(); // Hello, my name is John Doe.

在上面的例子中，Student 类继承了 Person 类的原型对象。Student 类的实例对象 student 可以通过原型对象访问 Person 类的 greet() 方法。

构造函数继承

构造函数继承是另一种常用的继承方式。它通过在子类的构造函数中调用父类的构造函数来实现继承。子类的实例对象通过父类的构造函数来初始化，并继承父类的属性和方法。

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

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

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

const student = new Student('John Doe', 'Computer Science');
student.greet(); // Hello, my name is John Doe.

在上面的例子中，Student 类的构造函数调用了 Person 类的构造函数，将 name 参数传递给了 Person 类的构造函数。Student 类的实例对象 student 通过 Person 类的构造函数来初始化，并继承了 Person 类的属性和方法。

组合继承

组合继承是原型继承和构造函数继承的结合。它通过在子类的构造函数中调用父类的构造函数，并同时将子类的原型对象设置为父类的实例对象来实现继承。这种继承方式可以同时实现原型继承和构造函数继承的优点。

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

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

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

Student.prototype = new Person();

const student = new Student('John Doe', 'Computer Science');
student.greet(); // Hello, my name is John Doe.

在上面的例子中，Student 类的构造函数调用了 Person 类的构造函数，将 name 参数传递给了 Person 类的构造函数。同时，Student 类的原型对象被设置为 Person 类的实例对象。这样，Student 类的实例对象 student 既可以访问 Person 类的属性和方法，也可以访问 Student 类的属性和方法。

寄生继承

寄生继承是一种特殊的继承方式，它通过创建一个新的对象，并将父类对象的属性和方法复制到该对象中来实现继承。这种继承方式可以避免子类直接继承父类，从而实现更灵活的继承。

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

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

function Student(name, major) {
  const person = new Person(name);
  person.major = major;
  return person;
}

const student = Student('John Doe', 'Computer Science');
student.greet(); // Hello, my name is John Doe.

在上面的例子中，Student 函数创建一个新的对象 person，并将 Person 类的 name 参数传递给了 Person 类的构造函数。然后，Student 函数将 major 参数添加到 person 对象中。最后，Student 函数返回 person 对象。student 变量引用了 person 对象，因此 student 变量可以访问 Person 类的属性和方法，也可以访问 Student 函数添加的 major 属性。