看图了解函数、实例（对象）、原型之间的关系

2023-10-02 10:55:51

在 JavaScript 中，函数、实例（对象）和原型之间存在着密切的关系。

我们先来看一张图：

[图片]

这张图形象地解释了函数、实例（对象）和原型之间的关系。

图中，函数（Function）是一个蓝色的圆圈，它代表了一个 JavaScript 函数。实例（Object）是一个绿色的圆圈，它代表了一个 JavaScript 对象。原型（Prototype）是一个红色的圆圈，它代表了一个 JavaScript 原型对象。

函数（Function）有一个 prototype 属性，指向另一个对象，这个对象就叫函数的原型对象。实例（Object）也有一个 prototype 属性，指向函数的原型对象。

也就是说，每个函数都有一个 prototype 属性，指向另一个对象，这个对象就叫函数的原型对象。由构造函数产生的实例对象，其 [[Prototype]] 内部属性指向构造函数的 prototype 属性所指向的那个原型对象。

我们可以用代码来验证这一点：

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

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

const person1 = new Person('John');

console.log(person1.prototype); // undefined
console.log(person1.__proto__); // Person {}
console.log(Person.prototype); // Person {}

输出结果为：

undefined
Person {}
Person {}

从输出结果可以看出，person1 的 prototype 属性为 undefined，这是因为实例对象没有 prototype 属性。person1 的 proto 属性指向 Person 的 prototype 属性所指向的对象，即 Person 的原型对象。Person 的 prototype 属性指向 Person 的原型对象，即 Person 的原型对象。

函数（Function）、实例（Object）和原型（Prototype）之间的关系可以用以下几点来总结：