JS进阶(2)：深入剖析原型对象的精髓

前端

2023-12-07 13:31:51

在JavaScript的奇妙世界中，原型对象可谓是一个举足轻重的角色，它是前端开发人员必须掌握的重要知识点之一，也是面试中的常客。为了帮助大家更深入地理解原型对象，我们将在本文中对原型对象进行详细的剖析，揭开它的神秘面纱。

一、原型对象：概念与作用

原型对象，顾名思义，就是一个对象的原型，它定义了该对象的一系列默认属性和方法。每个对象都有一个原型对象，而原型对象又可能拥有自己的原型对象，如此层层向上，就形成了原型链。

原型对象的作用是为对象提供默认的行为和属性，当对象没有显式定义某个属性或方法时，就会去原型对象中查找。这种机制使得JavaScript中的对象具有了继承性，我们可以通过原型对象来实现对象的复用。

二、原型对象的创建和使用

在JavaScript中，我们可以通过两种方式来创建原型对象：

直接创建：

const proto = {
  name: "John Doe",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  },
};

这样就创建了一个原型对象proto。

使用构造函数：

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

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

我们创建了一个Person构造函数，并为其添加了prototype属性，该属性指向一个对象，该对象包含了greet()方法。

当我们使用new创建Person对象的实例时，该实例就会继承原型对象中的属性和方法。

三、原型对象的访问与修改

我们可以使用两种方式来访问原型对象：

通过__proto__属性：

const person = new Person("John Doe", 30);

console.log(person.__proto__); // { greet: [Function: greet] }

通过Object.getPrototypeOf()方法：

const person = new Person("John Doe", 30);

console.log(Object.getPrototypeOf(person)); // { greet: [Function: greet] }

我们可以使用Object.setPrototypeOf()方法来修改原型对象：

const person = new Person("John Doe", 30);

Object.setPrototypeOf(person, {
  greet() {
    console.log(`Hello, my name is ${this.name} and I'm a superhero!`);
  },
});

person.greet(); // "Hello, my name is John Doe and I'm a superhero!"

四、原型对象与原型链

原型对象之间形成了一种父子关系，称为原型链。当我们访问对象的属性或方法时，JavaScript会沿着原型链向上查找，直到找到该属性或方法为止。

const person = new Person("John Doe", 30);

person.greet(); // "Hello, my name is John Doe!"

// 检查 person 的原型对象
console.log(person.__proto__); // { greet: [Function: greet] }

// 检查 person 的原型对象的原型对象
console.log(person.__proto__.__proto__); // {}

// 检查 person 的原型对象的原型对象的原型对象
console.log(person.__proto__.__proto__.__proto__); // null