【JavaScript】原型对象中的 constructor 属性详解

JavaScript 是一种基于原型继承的语言，原型链是其面向对象系统的重要基础。本文将深入探讨 JavaScript 原型对象中的 constructor 属性。constructor 是每个对象和函数的默认属性之一，能够帮助开发者理解对象和类之间的关系，并在实际开发中发挥作用。

一、原型对象与 constructor 属性的基本概念

1. 什么是原型对象？

在 JavaScript 中，每个对象都与一个原型对象相关联。这个原型对象包含了该对象的共有方法和属性。当我们调用一个对象的某个属性或方法时，JavaScript 引擎会首先在该对象自身查找。如果找不到，就会沿着原型链查找，直到找到为止。

2. constructor 属性的定义

constructor 是 JavaScript 中所有对象的一个重要属性，通常指向创建该对象的构造函数。也就是说，通过某个构造函数创建的对象，其 constructor 属性指向这个构造函数本身。

例如：

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

let person1 = new Person('Alice');
console.log(person1.constructor); // 输出：function Person(name) { ... }

在这个例子中，person1 对象是通过 Person 构造函数创建的，因此它的 constructor 属性指向 Person 函数。

二、constructor 属性的用途与原理

1. 确定对象的构造函数

constructor 属性通常用于确定对象是由哪个构造函数创建的。通过这个属性，开发者可以了解对象的类型和来源，进而进行相应的操作。

function Animal(type) {
  this.type = type;
}

let dog = new Animal('dog');
console.log(dog.constructor === Animal); // 输出：true

在上面的代码中，通过比较 dog.constructor 是否等于 Animal，可以确认 dog 对象是由 Animal 构造函数创建的。

2. 创建新的实例

constructor 属性不仅指向构造函数，还允许开发者利用它创建相同类型的新实例。这个特性在某些需要动态生成对象的场景下非常有用。

function Car(make, model) {
  this.make = make;
  this.model = model;
}

let car1 = new Car('Toyota', 'Camry');
let car2 = new car1.constructor('Honda', 'Civic');

console.log(car2); // 输出：Car { make: 'Honda', model: 'Civic' }

这里，car2 通过 car1 的 constructor 属性创建，确保了 car2 的构造函数与 car1 相同。

三、原型对象中的 constructor 属性详解

1. 原型对象如何影响 constructor 属性

当我们创建一个构造函数时，JavaScript 会自动为该构造函数生成一个原型对象，并且该原型对象的 constructor 属性会指向这个构造函数。

function Fruit(name) {
  this.name = name;
}

console.log(Fruit.prototype.constructor === Fruit); // 输出：true

在这个例子中，Fruit 构造函数的原型对象包含一个 constructor 属性，指向 Fruit 函数。这种机制保证了通过 new 操作符创建的每个对象，都可以通过其原型链访问到正确的 constructor。

2. 修改原型对象时的 constructor 属性

在开发过程中，开发者可能会自定义对象的原型。当我们手动修改对象的原型时，如果没有显式地设置 constructor 属性，原型对象的 constructor 属性可能会丢失。

function Shape() {}

Shape.prototype = {
  draw: function() {
    console.log('Drawing shape');
  }
};

let shape1 = new Shape();
console.log(shape1.constructor); // 输出：[Function: Object]

在这个例子中，由于我们重写了 Shape 的原型，默认的 constructor 属性也被覆盖了，导致 shape1.constructor 指向了 Object 而不是 Shape。为了避免这种情况，我们可以手动设置 constructor 属性：

Shape.prototype = {
  constructor: Shape,
  draw: function() {
    console.log('Drawing shape');
  }
};

console.log(shape1.constructor); // 输出：[Function: Shape]

通过这种方式，我们恢复了 constructor 属性的正确指向。

四、constructor 属性与 instanceof 操作符

1. constructor 与 instanceof 的关系

instanceof 操作符用于判断某个对象是否是由某个构造函数创建的。它会沿着对象的原型链查找，直到找到与构造函数原型匹配的对象。尽管 constructor 和 instanceof 经常一起使用，但它们是不同的概念。

function Vehicle() {}
let car = new Vehicle();

console.log(car instanceof Vehicle); // 输出：true
console.log(car.constructor === Vehicle); // 输出：true

在这个例子中，car 是 Vehicle 的实例，因此 instanceof 返回 true，并且 car.constructor 也指向 Vehicle。

2. constructor 与 instanceof 的区别

尽管 constructor 和 instanceof 都能确定对象的构造函数来源，但它们的作用有所不同。constructor 是对象的属性，而 instanceof 是基于原型链的查找。如果对象的 constructor 属性被修改，instanceof 依然可以通过原型链正确判断对象的类型。

function Bird() {}
let sparrow = new Bird();

sparrow.constructor = Object; // 修改 constructor 属性
console.log(sparrow instanceof Bird); // 输出：true
console.log(sparrow.constructor === Bird); // 输出：false

如上例所示，修改 constructor 属性不会影响 instanceof 的结果，因为 instanceof 是通过对象的原型链进行判断的。

五、constructor 属性的实际应用场景

1. 类继承中的使用

在现代 JavaScript 中，我们可以使用 class 语法定义类，而类本质上是构造函数的语法糖。因此，constructor 在类中依然扮演着重要角色。

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

let dog1 = new Dog('Buddy', 'Golden Retriever');
console.log(dog1.constructor); // 输出：class Dog extends Animal

在类继承中，子类会继承父类的 constructor，并可以通过 super() 调用父类的构造函数。

2. 动态生成对象

constructor 属性也可以用于在运行时动态生成与原对象类型相同的实例。在某些场景下，这种方式可以用于复制对象或生成特定类型的对象。

function Computer(brand) {
  this.brand = brand;
}

let pc1 = new Computer('Dell');
let pc2 = new pc1.constructor('HP');

console.log(pc2); // 输出：Computer { brand: 'HP' }

六、总结

JavaScript 中的 constructor 属性是理解对象与构造函数之间关系的关键。它帮助开发者在原型继承的体系中追溯对象的来源，并提供了动态生成对象的能力。在实际开发中，合理使用 constructor 属性可以帮助我们编写更具可读性和维护性的代码。

推荐：

• JavaScript
• react
• vue

---