正文

揭秘JS原型链：如何理解原型对象与实例之间的关系

/0 浏览量
0419

JavaScript 的原型链（Prototype Chain）是其核心特性之一，对于理解 JavaScript 对象的创建和继承机制至关重要。本文将深入浅出地解析原型对象与实例之间的关系，帮助读者揭开原型链的神秘面纱。

一、什么是原型对象？

在 JavaScript 中，每个函数都有一个名为 prototype 的属性，该属性是一个对象。这个对象包含了由该函数创建的所有实例对象共有的属性和方法。简单来说，prototype 是函数的公共属性集，而实例则是函数的私有属性集。

二、实例与原型之间的关系

当我们创建一个函数时，JavaScript 引擎会自动为该函数创建一个原型对象。当我们创建该函数的实例时，这个实例对象会自动继承其原型对象的属性和方法。

1. 使用 __proto__ 属性

JavaScript 中每个对象都有一个内置的 __proto__ 属性，该属性指向其原型对象。当我们访问一个实例对象上的属性或方法时，如果该实例对象上不存在这个属性或方法，那么就会沿着 __proto__ 属性向上查找，直到找到该属性或方法，或者到达原型链的尽头。

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

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

const person1 = new Person('Alice');
console.log(person1.__proto__ === Person.prototype); // true
console.log(person1.__proto__.__proto__ === Object.prototype); // true

2. 使用 Object.getPrototypeOf() 方法

除了 __proto__ 属性外，JavaScript 还提供了 Object.getPrototypeOf() 方法，该方法可以获取一个对象的原型对象。

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

const person1 = new Person('Alice');
console.log(Object.getPrototypeOf(person1) === Person.prototype); // true

三、原型链的继承

原型链的继承是 JavaScript 中的一个重要概念，它允许我们创建具有共享属性和方法的继承关系。通过原型链继承，子对象可以继承父对象的属性和方法。

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

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

function Child(name, age) {
  Parent.call(this, name); // 继承 Parent 的属性和方法
  this.age = age;
}

Child.prototype = new Parent(); // 通过原型链继承
Child.prototype.constructor = Child; // 修正构造函数

const child1 = new Child('Bob', 10);
child1.sayHello(); // Hello, my name is Bob

四、总结

通过本文的讲解，相信大家对原型对象与实例之间的关系有了更深入的了解。原型链是 JavaScript 中的一个核心概念，掌握原型链的原理对于理解 JavaScript 的继承机制、对象创建等方面具有重要意义。希望本文能够帮助读者更好地掌握 JavaScript 原型链的相关知识。

-- 展开阅读全文 --