高效掌握前端必刷手写题系列 [19]，轻松应对面试挑战！

2023-10-08 11:54:29

深入了解 JavaScript 中的继承机制

什么是继承？

在面向对象编程 (OOP) 中，继承是一种强大的机制，它允许一个类（称为子类）从另一个类（称为父类）继承属性和方法。在 JavaScript 中，有三种主要的继承方式：原型继承、构造函数继承和类继承。

原型继承

原型继承是 JavaScript 中最基本的继承方式。它通过将子对象的原型对象设置为父对象的实例来工作。原型对象是存储属性和方法的特殊对象，当子对象访问属性或方法时，它会在其自己的属性中查找，然后在其原型对象中查找。

代码示例：

// 父类
function Person(name) {
  this.name = name;
}

// 子类
function Employee(name, jobTitle) {
  Person.call(this, name);
  this.jobTitle = jobTitle;
}

// 设置原型继承
Employee.prototype = Object.create(Person.prototype);

构造函数继承

构造函数继承是一种更高级的继承方式。它通过在子类的构造函数中调用父类的构造函数来工作。这确保了子类继承了父类的所有属性和方法。

代码示例：

// 父类
function Person(name) {
  this.name = name;
}

// 子类
function Employee(name, jobTitle) {
  // 调用父类的构造函数
  Person.call(this, name);
  this.jobTitle = jobTitle;
}

类继承

类继承是 JavaScript 中最新引入的继承方式。它使用了 class 和 extends 关键字。它类似于构造函数继承，但语法更简洁，并且可以更好地处理私有属性和方法。

代码示例：

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

// 子类
class Employee extends Person {
  constructor(name, jobTitle) {
    super(name);
    this.jobTitle = jobTitle;
  }
}

每种继承方式的比较

继承方式	优点	缺点
原型继承	简单易用	无法继承私有属性和方法
构造函数继承	可继承私有属性和方法	语法复杂，可能导致代码重复
类继承	语法简洁，支持私有属性和方法	相对较新，可能不适用于所有浏览器