JS 继承剖析：循序渐进掌握 7 种方法

前端

2023-11-17 23:42:20

JavaScript 继承：掌握面向对象编程的指南

什么是继承？

想象一下，你需要创建一个新的对象，它具有另一个现有对象的某些属性和功能。这就是继承的作用——它允许你在创建新对象时利用现有对象的代码和数据。在 JavaScript 中，继承是实现面向对象编程的关键。

JavaScript 中的 7 种继承方法

原型式继承： 就像克隆一样，创建一个新对象，继承另一个对象的属性和方法。
构造函数继承： 创建一个子类对象，调用父类的构造函数，继承父类的属性和方法（但不是原型属性和方法）。
组合继承： 结合原型式继承和构造函数继承，继承父类的所有属性和方法。
原型链继承： 通过将子类的原型对象设置为父类的实例，建立一个父-子对象关系。
寄生继承： 创建一个新对象，直接引用另一个对象，继承所有属性和方法。
寄生组合继承： 结合寄生继承和组合继承，继承所有属性和方法。
**ES6 的 class ** 一种简单的语法，用于定义一个类及其可被继承的属性和方法。

选择正确的继承方法

代码示例：

原型式继承

const obj1 = {
  name: "John",
  age: 30
};

const obj2 = Object.create(obj1);
obj2.job = "Developer";

console.log(obj2.name); // John
console.log(obj2.age); // 30
console.log(obj2.job); // Developer

构造函数继承

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

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

const employee = new Employee("John", 30, "Developer");

console.log(employee.name); // John
console.log(employee.age); // 30
console.log(employee.job); // Developer

**ES6 的 class **

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

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

const employee = new Employee("John", 30, "Developer");

console.log(employee.name); // John
console.log(employee.age); // 30
console.log(employee.job); // Developer