资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

JS如何访问对象原型方法和属性

创作时间:

作者:

@小白创作中心

JS如何访问对象原型方法和属性

引用

来源

https://docs.pingcode.com/baike/2370465

在JavaScript开发中，理解对象原型的访问方法对于掌握面向对象编程至关重要。本文将详细介绍如何通过Object.getPrototypeOf()、Object.prototype和Object.setPrototypeOf()等方法访问对象原型，并通过丰富的示例和实践场景帮助读者深入理解这一核心概念。

一、对象原型的概念

在JavaScript中，每个对象都有一个原型（Prototype），原型是对象的继承基础。通过原型链，JavaScript对象可以继承其他对象的属性和方法。这种机制使得JavaScript具有强大的扩展性和灵活性。

1. 什么是对象原型

对象原型是一个用于实现对象继承的机制。每个对象在创建时都关联到一个原型对象，这个原型对象可以是另一个对象，也可以是null。当访问一个对象的属性或方法时，如果在对象本身找不到，它就会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（即null）。

2. 原型链的作用

原型链是指对象与其原型之间的链式关系。通过原型链，JavaScript对象可以继承其他对象的属性和方法。这种继承机制使得代码复用和扩展变得更加容易。例如，所有的数组对象都继承自Array.prototype，这意味着数组对象可以访问Array.prototype上的所有方法和属性。

二、如何访问对象的原型

1. 使用`Object.getPrototypeOf()`

Object.getPrototypeOf()是获取对象原型的标准方法。它接受一个对象作为参数，并返回该对象的原型。

const obj = {};
const prototype = Object.getPrototypeOf(obj);
console.log(prototype); // 输出：{constructor: ƒ, ...}

通过Object.getPrototypeOf()，我们可以轻松获取对象的原型，从而访问原型上的方法和属性。

2. 使用`Object.prototype`

每个对象都有一个__proto__属性，该属性指向对象的原型。然而，这种方式不被推荐使用，因为它不是标准化的，并且在某些浏览器中可能不兼容。标准化的方法是使用Object.getPrototypeOf()和Object.setPrototypeOf()。

const obj = {};
const prototype = obj.__proto__;
console.log(prototype); // 输出：{constructor: ƒ, ...}

尽管不推荐使用，但__proto__在某些情况下仍然可以派上用场，特别是在快速原型开发和调试时。

3. 使用`Object.setPrototypeOf()`

Object.setPrototypeOf()是设置对象原型的标准方法。它接受两个参数：第一个是要修改的对象，第二个是新的原型对象。

const newPrototype = { greet: function() { console.log('Hello!'); } };
const obj = {};
Object.setPrototypeOf(obj, newPrototype);
obj.greet(); // 输出：Hello!

通过Object.setPrototypeOf()，我们可以动态地修改对象的原型，从而改变对象的行为和属性。

三、访问原型上的方法和属性

1. 直接访问原型方法和属性

当我们获取到对象的原型后，可以直接访问原型上的方法和属性。例如，我们可以通过Object.getPrototypeOf()获取一个对象的原型，然后调用原型上的方法。

const obj = {};
const prototype = Object.getPrototypeOf(obj);
console.log(prototype.hasOwnProperty('constructor')); // 输出：true

2. 使用`Object.create()`创建具有特定原型的对象

Object.create()是创建一个具有指定原型的新对象的标准方法。它接受一个对象作为参数，并返回一个新的对象，该对象的原型是传入的对象。

const prototype = { greet: function() { console.log('Hello!'); } };
const obj = Object.create(prototype);
obj.greet(); // 输出：Hello!

通过Object.create()，我们可以创建具有特定原型的新对象，从而实现对象的继承和扩展。

3. 原型链的查找机制

当访问一个对象的属性或方法时，JavaScript引擎会首先查找对象本身。如果找不到，它会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（即null）。

const prototype = { greet: function() { console.log('Hello!'); } };
const obj = Object.create(prototype);
console.log(obj.hasOwnProperty('greet')); // 输出：false

在上述示例中，obj对象本身没有greet方法，因此引擎会沿着原型链向上查找，最终在prototype对象上找到greet方法。

四、实践中的应用场景

1. 扩展内置对象

通过访问和修改内置对象的原型，我们可以为内置对象添加新的方法和属性。例如，我们可以为Array对象添加一个新的方法，用于计算数组的平均值。

Array.prototype.average = function() {
  const sum = this.reduce((acc, val) => acc + val, 0);
  return sum / this.length;
};
const arr = [1, 2, 3, 4, 5];
console.log(arr.average()); // 输出：3

这种方式可以有效地扩展内置对象的功能，从而简化开发过程。

2. 实现继承

通过设置对象的原型，我们可以实现对象的继承。例如，我们可以创建一个Person构造函数，然后通过设置Student构造函数的原型来继承Person的属性和方法。

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};
function Student(name, studentId) {
  Person.call(this, name);
  this.studentId = studentId;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
const student = new Student('John', '12345');
student.greet(); // 输出：Hello, my name is John
console.log(student.studentId); // 输出：12345

通过这种方式，我们可以实现面向对象编程中的继承，从而提高代码的可复用性和扩展性。