透过不同的镜片: 探索访问JavaScript原型对象的两种方法

2024-02-15 07:32:00

在JavaScript的奇妙世界里，原型对象扮演着举足轻重的角色。原型对象为JavaScript对象提供了一种共享属性和方法的机制，从而实现对象之间的继承。说到访问原型对象，您可能会遇到两个关键的语法：实例对象.proto和构造函数.prototype。虽然它们都指向同一原型对象，但它们的使用方式和目的却大有不同。

实例对象.proto：通往对象原型的直接门票

实例对象.proto属性为我们提供了一条直接访问对象原型的途径。它指向当前实例对象的原型对象，您可以通过它来访问和修改原型对象中的属性和方法。

const person = {
  name: "John Doe",
  age: 25,
};

console.log(person.proto); // 输出：Object { constructor: function }

构造函数.prototype：通往原型对象的通用桥梁

构造函数.prototype属性则为我们提供了一种通过构造函数访问原型对象的方式。它指向构造函数的原型对象，所有由该构造函数创建的实例对象都共享这个原型对象。

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

console.log(Person.prototype); // 输出：Object { constructor: function }

两种方式的异同对比：微妙差别，深刻影响

对象与构造函数： 实例对象.proto直接指向当前实例对象的原型对象，而构造函数.prototype指向构造函数的原型对象。
增、删、改、查： 通过实例对象.proto访问原型对象时，对属性和方法的增、删、改、查只影响当前实例对象。而通过构造函数.prototype访问原型对象时，对属性和方法的增、删、改、查会影响所有由该构造函数创建的实例对象。
对象行为定制与原型继承： 实例对象.proto主要用于修改当前实例对象的行为，而构造函数.prototype主要用于修改所有由该构造函数创建的实例对象的行为。

实例探究：揭秘两种方式的实战应用

定制对象行为： 如果您希望定制某个特定实例对象的行为，那么可以使用实例对象.proto属性。例如，如果您希望为某个特定用户对象添加一个自定义方法，可以使用如下方式：

const user = {
  name: "Jane Doe",
};

user.proto.greet = function() {
  console.log(`Hello, my name is ${this.name}!`);
};

user.greet(); // 输出：Hello, my name is Jane Doe!

修改原型行为： 如果您希望修改所有由某个构造函数创建的实例对象的行为，那么可以使用构造函数.prototype属性。例如，如果您希望修改所有用户对象的默认年龄，可以使用如下方式：

function User(name) {
  this.name = name;
  this.age = 25;
}

User.prototype.age = 30;

const user1 = new User("John Doe");
const user2 = new User("Jane Doe");

console.log(user1.age); // 输出：30
console.log(user2.age); // 输出：30