剖析原型链，从零理解JavaScript原型链

从创建一个函数开始

在JavaScript中，一切皆对象。函数也是对象，它具有与其他对象相同的基本属性和方法。

function greet() {
  console.log('Hello, world!');
}

这是一个简单的greet函数，它没有参数，也没有返回值。我们可以使用typeof运算符来检查greet的类型：

console.log(typeof greet); // "function"

结果是"function"，这表明greet是一个函数对象。

函数的prototype属性

每个函数对象都有一个prototype属性，指向一个对象。这个对象称为函数的原型对象，它包含了函数可以访问的所有属性和方法。我们可以使用greet.prototype来访问greet函数的原型对象：

console.log(greet.prototype); // {}

结果是一个空对象，这表明greet函数还没有定义任何属性或方法。

对象实例的prototype属性

当我们使用new运算符来创建一个函数对象时，这个对象被称为函数的实例。实例对象也具有一个prototype属性，指向函数的原型对象。我们可以使用instance.prototype来访问实例对象的prototype属性：

const instance = new greet();
console.log(instance.prototype); // greet.prototype

结果是greet.prototype，这表明instance实例对象的prototype属性指向greet函数的原型对象。

原型链

函数的prototype属性指向函数的原型对象，实例对象的prototype属性指向函数的原型对象，这形成了一个原型链。原型链是一个从实例对象到函数对象再到函数原型对象的链条。我们可以使用instance.__proto__来访问instance实例对象的prototype属性：

console.log(instance.__proto__); // greet.prototype

结果是greet.prototype，这表明instance实例对象的prototype属性指向greet函数的原型对象。

原型链的意义

原型链的意义在于，它允许实例对象访问函数原型对象中的属性和方法。例如，如果我们给greet函数的原型对象添加一个name属性：

greet.prototype.name = 'John Doe';

那么，instance实例对象就可以通过prototype属性访问name属性：

console.log(instance.name); // "John Doe"

这表明，instance实例对象可以访问greet函数原型对象中的name属性，这是因为instance实例对象的prototype属性指向greet函数的原型对象。

总结

原型链是JavaScript语言中一个重要的概念，它可以帮助我们理解对象之间的关系。在本文中，我们从创建一个函数开始，逐步了解函数与函数的prototype，以及对象实例三者之间形成的原型链关系。通过对原型链的深入理解，我们可以更好地理解JavaScript面向对象编程的思想，并能够更熟练地使用JavaScript语言进行开发。