深入理解 JavaScript 原型与原型链：图表解惑

一张图搞定 JavaScript 原型与原型链

如果你看到这张图表，却一脸茫然，不要担心。这篇文章将逐步引导你了解原型和原型链，让你对 JavaScript 的对象继承机制有一个清晰的认识。

前置知识

在深入探讨 JavaScript 原型和原型链之前，我们先来回顾一下一些前置知识：

• 构造函数： 用于创建对象的蓝图。
• 实例化： 通过构造函数创建对象的过程。
• 对象： 存储数据的容器。
• 属性： 对象的键值对，表示对象的特征。
• 方法： 对象的函数，表示对象的的行为。
• **this ** 指向当前执行上下文中的对象。

原型与原型链的图表解释

图表中的 Parent 表示一个构造函数，p1 是通过 Parent 实例化出来的一个对象。箭头表示原型链中的指向关系。

• 原型： 每个构造函数都有一个 prototype 属性，指向一个原型对象。原型对象包含构造函数创建的所有对象的共享属性和方法。
• 原型链： 当一个对象访问一个不存在的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到该属性或方法。

图表中的关系：

• p1 的原型指向 Parent.prototype 。
• Parent.prototype 有两个属性：name 和 greet 。
• 当 p1 访问 name 属性时，JavaScript 会直接找到 Parent.prototype 中的 name 属性。
• 当 p1 访问 greet 方法时，JavaScript 会沿原型链查找，并在 Parent.prototype 中找到 greet 方法。

实例代码：

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

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

const p1 = new Parent('John');

console.log(p1.name); // John
p1.greet(); // Hello, my name is John

总结

通过这张图表，我们了解了 JavaScript 中原型和原型链的作用。原型链是一种强大的机制，它允许对象继承构造函数的属性和方法，从而实现代码复用和灵活性。掌握原型和原型链的概念对于理解 JavaScript 的对象继承机制至关重要。