一文掌握构造函数、原型链、继承：通俗易懂，深入浅出

2024-02-13 20:26:51

对象创建、代码组织和重用：掌握构造函数、原型链和继承

导言

编程的核心是围绕对象和代码组织的概念。理解如何创建和组织对象以及重用代码对于编写高效、可维护的应用程序至关重要。在这篇文章中，我们将深入探讨三个关键概念：构造函数、原型链和继承。

构造函数：对象的蓝图

想象一下构造函数就像一个蓝图，它定义了对象的结构和行为。当您使用 new 调用构造函数时，您正在创建一个新对象，该对象将具有构造函数中指定的所有属性和方法。

例如，以下 JavaScript 构造函数创建了一个具有类型属性的形状对象：

function Shape() {
  this.type = 'Shape';
}

当您调用此构造函数时，您将创建一个新的形状对象：

const shape = new Shape();
console.log(shape.type); // 输出：'Shape'

原型链：对象的家族树

每个对象都有一个原型，指向另一个对象。这个原型对象包含该对象继承的所有属性和方法。通过原型链，对象可以访问其祖先对象定义的属性和方法。

在上面的示例中，形状对象有 Shape 构造函数作为其原型：

console.log(shape.__proto__ === Shape); // 输出：true

继承：代码重用的艺术

继承允许一个对象（子类）从另一个对象（父类）继承属性和方法。这是一种强大的代码重用和组织技术。

例如，以下 Circle 构造函数从 Shape 构造函数继承，并添加了一个 radius 属性和一个计算圆面积的方法：

function Circle(radius) {
  Shape.call(this);
  this.radius = radius;
}

Circle.prototype.getArea = function() {
  return Math.PI * this.radius ** 2;
};

当您创建 Circle 对象时，它将继承 Shape 对象的属性和方法：

const circle = new Circle(5);
console.log(circle.type); // 输出：'Shape'
console.log(circle.radius); // 输出：5
console.log(circle.getArea()); // 输出：78.53981633974483