揭开 JS 继承的奥秘：深入剖析不同继承方式

2023-12-08 01:33:00

前言

继承是面向对象编程（OOP）中至关重要的概念，它允许新创建的对象从现有对象继承属性和方法。在 JavaScript 中，继承提供了代码重用和模块化的强大机制。然而，对于初学者来说，理解 JavaScript 中的继承可能会令人望而生畏。本文旨在深入剖析不同继承方式的细微差别，帮助读者全面掌握继承概念，提升代码的可重用性和灵活性。

构造函数

构造函数是 JavaScript 中最基本的继承方式。它通过使用 new 创建新对象，并为该对象分配一个自定义的 this 值。构造函数可以定义自己的属性和方法，这些属性和方法将继承到由该构造函数创建的所有对象中。

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

// 创建一个 Person 对象
const person1 = new Person('John Doe', 30);

// 访问继承的属性和方法
console.log(person1.name); // 'John Doe'
console.log(person1.age); // 30

优点：

简单易懂，易于实现。
可以创建具有私有属性和方法的对象。

缺点：

重复代码，因为每个构造函数都需要定义相同的属性和方法。
难以向现有对象添加新属性或方法。

原型对象

原型对象是一种更灵活的继承方式。它通过在构造函数的 prototype 属性上定义属性和方法来实现继承。当使用 new 关键字创建新对象时，该对象的 __proto__ 属性指向构造函数的 prototype 属性。

function Person() {}

// 向 Person.prototype 添加属性和方法
Person.prototype.name = 'John Doe';
Person.prototype.age = 30;

// 创建一个 Person 对象
const person2 = new Person();

// 访问继承的属性和方法
console.log(person2.name); // 'John Doe'
console.log(person2.age); // 30

优点：

代码可重用性高，因为属性和方法只定义一次。
可以在运行时向现有对象添加新属性或方法。

缺点：

难以创建具有私有属性和方法的对象。
可能导致意外的原型污染。

原型链

原型链是 JavaScript 中的一种继承机制，它利用 __proto__ 属性在对象之间创建链条。当访问一个对象的属性或方法时，JavaScript 会沿着原型链向上搜索，直到找到该属性或方法。

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

// 访问属性和方法
console.log(person3.name); // 'John Doe'
console.log(person3.age); // 30

优点：

简单易用，无需显式定义继承关系。
可以向现有对象动态添加属性或方法。

缺点：

难以创建具有私有属性和方法的对象。
可能会导致意外的原型污染。

Class 关键字

ES6 引入了 class 关键字，它提供了一种更简洁的方式来定义类和实现继承。类本质上只是语法糖，它在幕后使用原型对象实现继承。

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

// 创建一个 Person 对象
const person4 = new Person('John Doe', 30);

// 访问属性和方法
console.log(person4.name); // 'John Doe'
console.log(person4.age); // 30