深入剖析 JavaScript 继承之谜：解锁五种经典方法

2023-11-11 15:17:41

在浩瀚的软件开发领域，JavaScript以其跨平台、灵活性强等优点脱颖而出。作为一名JavaScript开发者，掌握继承技术是必不可少的。本文将带领您深入探索JavaScript中的继承世界，解析五种经典的继承方式，助您轻松驾驭面向对象编程的精髓。

原型链继承：追根溯源

JavaScript采用原型链来实现继承。原型链本质上是一条对象与对象之间的链接，每个对象都拥有一个原型对象，而原型对象又拥有自己的原型对象，如此层层递进，直到最顶层的原型对象——Object.prototype。

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const john = new Person('John', 30);
john.greet(); // Hello, my name is John and I am 30 years old.

在上述代码中，Person对象是父对象，而john对象是子对象。john继承了Person对象的所有属性和方法，并且可以通过john.greet()调用父对象的方法。

构造函数继承：借用构造函数

构造函数继承是一种通过调用父对象的构造函数来实现继承的方式。这种方式相对简单，但也有其局限性。

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

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

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

const john = new Student('John', 30, 'Computer Science');
john.greet(); // Hello, my name is John and I am 30 years old.
console.log(john.major); // Computer Science

在上述代码中，Student对象是子对象，而Person对象是父对象。Student对象通过调用Person对象的构造函数来实现继承。需要注意的是，这种方式会覆盖Student对象的prototype属性，因此我们需要手动将其还原为Person.prototype的副本。

组合继承：集两家之长

组合继承结合了原型链继承和构造函数继承的优点，弥补了各自的不足。

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

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

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

const john = new Student('John', 30, 'Computer Science');
john.greet(); // Hello, my name is John and I am 30 years old.
console.log(john.major); // Computer Science

在上述代码中，Student对象是子对象，而Person对象是父对象。Student对象通过调用Person对象的构造函数来实现继承，并且手动将Student对象的prototype属性还原为Person.prototype的副本。最后，通过将Student.prototype.constructor属性设置为Student，确保instanceof运算符能够正确判断对象的类型。

原型式继承：直接继承

原型式继承是一种通过直接复制父对象来实现继承的方式。这种方式非常简单，但仅适用于浅拷贝。

const person = {
  name: 'John',
  age: 30
};

const student = Object.create(person);
student.major = 'Computer Science';

console.log(student.name); // John
console.log(student.age); // 30
console.log(student.major); // Computer Science

在上述代码中，student对象是子对象，而person对象是父对象。student对象通过直接复制person对象来实现继承。需要注意的是，这种方式会将person对象的所有属性和方法都复制到student对象中，因此如果person对象发生改变，student对象也会受到影响。

ES6类继承：面向对象新篇章

ES6引入了class，为JavaScript带来了面向对象的特性。使用class关键字可以更轻松地实现继承。

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

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

const john = new Student('John', 30, 'Computer Science');
john.greet(); // Hello, my name is John and I am 30 years old.
console.log(john.major); // Computer Science