返回

JavaScript 中的原型链:揭秘 prototype、__proto__ 和 constructor

前端

JavaScript 中的原型链:prototype、proto 和 constructor

在 JavaScript 中,理解对象的创建和继承至关重要,而 prototype、proto 和 constructor 在这其中扮演着关键角色。本文将深入探讨这些属性,为您提供 JavaScript 中原型继承机制的清晰理解。

constructor:创建对象的蓝图

constructor 属性代表对象的构造函数。每个对象都拥有一个 constructor 属性,该属性指向创建该对象的构造函数。例如:

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

const person = new Person('John');

console.log(person.constructor); // Person

proto:指向对象的原型

proto 属性指向对象的原型对象。原型对象包含所有与其构造函数关联的方法和属性。通过 proto 属性,对象可以访问原型对象中的属性和方法。例如:

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person = new Person('John');

person.__proto__.greet(); // Hello, my name is John

prototype:构造函数的原型对象

prototype 属性是构造函数的原型对象。所有通过该构造函数创建的对象都继承了该原型对象中的属性和方法。例如:

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('John');
const person2 = new Person('Mary');

person1.greet(); // Hello, my name is John
person2.greet(); // Hello, my name is Mary

总结

  • constructor: 指向创建对象的构造函数。
  • proto 指向对象的原型对象。
  • prototype: 构造函数的原型对象,所有通过该构造函数创建的对象都继承了它的属性和方法。

这些属性共同构成了 JavaScript 中的原型链,使对象能够继承和重用属性和方法。通过理解原型链,您可以更深入地了解 JavaScript 中对象是如何创建和交互的。