说明原型、原型和构造者之间的三角关系

javascript中有许多混乱的关系。范围链是单向链关系，简单明了；这种机制的调用关系略显复杂。至于原型，是原型、原型和构造者之间的三角关系。本文从一幅图开始，然后详细说明原型的三角关系

插图

概念

上图中的复杂关系实际上来自两行代码

function Foo(){ }；var f1=new Foo[构造函数]

用于初始化新创建的对象的函数是构造函数。在示例中，Foo()函数是一个构造函数

[实例对象]

由构造函数的新操作创建的对象是一个实例对象。您可以使用一个构造函数来构造多个实例对象

function Foo(){ }；var f1=new Foovar f2=new Fooconsole . log(f1===F2)；//false[原型对象和原型]

构造函数有一个原型属性，指向实例对象的原型对象。由同一构造函数实例化的多个对象具有相同的原型对象。原型对象通常用于实现继承

function Foo(){ }；foo . prototype . a=1；var f1=new Foovar f2=new Fooconsole . log(Foo . prototype . a)；//1 con sole . log(f1 . a)；//1 con sole . log(F2 . a)；//1【建造师】

原型对象有一个构造函数属性，它指向对应于原型对象的构造函数

function Foo(){ }；console . log(Foo . prototype . constructor===Foo)；//true因为实例对象可以继承原型对象的属性，所以实例对象也有构造函数属性，该属性也指向原型对象的相应构造函数

function Foo(){ }；var f1=new Fooconsole . log(f1 . constructor===Foo)；//真【原型】

实例对象有一个指向对应于实例对象的原型对象的proto属性

function Foo(){ }；var f1=new Fooconsole.log(f1。_ _ proto _ _===Foo . prototype)；//真

解释

在介绍了这个概念之后，我们现在将详细解释这种关系

function Foo(){ }；var f1=new Foo[第一部分：Foo]

实例对象f1由构造函数Foo()的新操作创建。构造函数Foo()的原型对象是Foo.prototype；实例对象f1还通过__proto__属性指向原型对象Foo.prototype

function Foo(){ }；var f1=new Fooconsole.log(f1。_ _ proto===Foo . prototype)；//true实例对象f1本身没有构造函数属性，但可以继承原型对象Foo.prototype的构造函数属性

function Foo(){ }；var f1=new Fooconsole . log(Foo . prototype . constructor===Foo)；//true console . log(f1 . constructor===Foo)；//true console . log(f1 . HasownProperty('构造函数'))；//false下图显示了实例对象f1的控制台效果

[第二部分：目标]

Foo.prototype是f1的原型对象，也是一个实例对象。实际上，任何对象都可以被视为由Object()构造函数的新操作实例化的对象。因此，Foo.prototype是实例对象，其构造函数是object()，其原型对象是object.prototype，相应地，构造函数Object()的prototype属性指向原型对象；实例对象Foo.Prototype的proto属性也指向原型对象

function Foo(){ }；var f1=new Fooconsole . log(foo . prototype . _ _ proto _ _===object . prototype)；//true实例对象Foo.prototype本身有一个构造函数属性，因此它会覆盖从原型对象Object.prototype继承的构造函数属性

function Foo(){ }；var f1=new Fooconsole . log(Foo . prototype . constructor===Foo)；//true console . log(Object . prototype . constructor===Object)；//true console . log(Foo . prototype . Hasownproperty('构造函数'))；//true下图显示了实例对象Foo.prototype的控制台效果

如果Object.prototype是一个实例对象，那么它的原型对象是什么，结果为空。就个人而言，这可能是null类型的结果是“object”的原因之一

console . log(object . prototype . _ _ proto _ _===null)；//真

[第三部分：功能]

如前所述，函数也是对象，只是具有特殊功能的对象。通过函数()构造函数的新操作，任何函数都可以被视为实例化的结果

如果把函数富（中国姓氏)当成实例对象的话，其构造函数是Function()，其原型对象是函数。原型；类似地，函数目标的构造函数也是Function()，其原型对象是功能。原型

function Foo(){ }；var f1=新的Foonconsole . log(Foo ._ _ proto _ _===函数。原型)；//trueconsole.log(对象_ _ proto _ _===函数。原型)；//真原型对象功能。原型的构造器属性指向构造函数function()；实例对象目标和富（中国姓氏)本身没有构造器属性，需要继承原型对象功能。原型的构造器属性

function Foo(){ }；var f1=新的Fooconsole。日志(功能。原型。构造函数===函数)；//真控制台。日志(Foo。构造函数===函数)；//真控制台。日志(Foo。HasownProperty(“”构造函数'));//假控制台。日志(对象。构造函数===函数)；//真控制台。日志(对象。hasown属性(“”构造函数'));//false所有的函数都可以看成是构造函数函数()的新的操作的实例化对象。那么功能可以看成是调用其自身的新的操作的实例化的结果

所以，如果功能作为实例对象，其构造函数是功能，其原型对象是功能。原型

控制台日志（功能_ _ proto _ _===函数。原型)；//真控制台。日志(功能。原型。构造函数===函数)；//真控制台。日志(功能。原型===函数)；//真如果功能。原型作为实例对象的话，其原型对象是什么呢？和前面一样，所有的对象都可以看成是对象()构造函数的新的操作的实例化结果。所以，函数。原型的原型对象是对象。原型，其原型函数是对象()

控制台。log(函数。原型。_ _ proto _ _===对象。原型)；//真第二部分介绍过，对象。原型的原型对象是空

控制台。日志(对象。原型。_ _ proto _ _===null)；//真总结

【1】函数（功能也是函数)是新功能的结果，所以函数可以作为实例对象，其构造函数是Function()，原型对象是功能。原型

【2】对象（函数也是对象)是新对象的结果，所以对象可以作为实例对象，其构造函数是Object()，原型对象是对象。原型

【3】对象。原型的原型对象是空