React组件为何存在prototype属性？与JS原型机制的疑问解析

MDN提到，每个JavaScript对象都有一个内置的原型关联，但这个关联的访问方式并不是用prototype这个属性名——浏览器里常用__proto__，标准的访问方法是Object.getPrototypeOf()。但这和你看到的React组件的prototype属性完全是两码事：

JavaScript中的每个对象都有一个内置属性，称为其原型。……指向对象原型的属性并不叫prototype，它的名称没有标准化，但实际上所有浏览器都使用__proto__。访问对象原型的标准方法是Object.getPrototypeOf()方法。

要分清两个完全不同的概念 #

你混淆了两个和prototype相关的核心概念：

• 对象的原型链指向：这就是MDN说的每个对象都有的内置关联，它是对象用来继承属性的内部链接，和prototype这个属性名无关，只能通过__proto__（非标准）或Object.getPrototypeOf()（标准）访问。
• 函数/类的prototype属性：所有JavaScript函数（包括ES6类，因为类本质是构造函数的语法糖）都自带一个prototype属性，它的值是一个对象。当你用new关键字调用这个函数/类创建实例时，实例的原型链会自动指向这个prototype对象。

React组件的prototype属性从哪来？ #

在React项目里：

• 如果你的App是类组件，那App本质就是一个ES6类，也就是构造函数，自然会有prototype属性，这个属性指向类的原型对象，组件实例会继承这里的方法和属性。
• 如果你的App是函数组件，函数本身也是JavaScript的函数对象，所有函数默认都自带prototype属性（虽然React函数组件不会被实例化，这个属性几乎用不上，但它依然存在）。

你在控制台打印App.prototype时看到的对象，就是这个函数/类的prototype属性对应的对象，和MDN说的对象内置原型指向不是同一个东西。

内容的提问来源于stack exchange，提问作者Giorgio