prototype，__proto__，constructor到底是什么关系（图解）-优快云博客

本文链接：https://blog.youkuaiyun.com/EcbJS/article/details/105113789

本文深入探讨JavaScript中prototype、__proto__与constructor的作用与关系，通过实例化对象f1，清晰展示函数、对象间的原型链查找机制及共享方法实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇博客基于以下博客学习而来，这里面的解释更为详细。

https://blog.youkuaiyun.com/cc18868876837/article/details/81211729
文章目录

以下代码是通过构造函数，实例化一个f1对象，其中的关系图表如下（图片是上面博客中的，我为了加强记忆，自己默背画了一份）

function Foo () {...};
let f1 = new Foo();

在这里插入图片描述

先看总结

	特点	指向	作用
prototype	函数独有	函数–>对象	含义是函数的原型对象，可以给函数的所有实例添加共享的属性和方法（函数在创建的时候，就会默认创建其prototype对象）
_ _proto _ _	对象独有	对象–>对象	当访问对象的属性的时候，如果没有，就会去 _ _proto _ _所指向的对象中去找，找不到的话再往上层 _ _proto _ _去找，直到找到null为止。
constructor	对象独有	对象–>函数	含义是指向该对象的构造函数，其中constructor可以从 _ _proto _ _中继承而来

函数也是对象，所有函数三种属性都具有

具体分析

1. _ _proto _ _

在这里插入图片描述
实例对象可以通过 _ _proto _ _一层一层往上找，当找到 null 的时候，就完整的循环了一遍原型链，平时调用的字符串方法，数组方法，对象方法，函数方法等，都是靠 _ _proto _ _继承而来的。

2. prototype

在这里插入图片描述
由上图可以看出， prototype只有函数才有，有了这个函数的原型对象，那么所有通过函数实例化的对象才能找到共享的方法，而且当需要添加公共方法的时候也需要通过 prototype添加，下方代码则是在数组的原型对象中，添加了一个去重的方法

//数组去重
Array.prototype.unique = function () {
    return Array.from(new Set(this));
};
let arr = [1, 2, 3, 4, 1];
let arrU = arr.unique();
console.log('arrU', arrU); //arrU [1, 2, 3, 4]

3. constructor

在这里插入图片描述

constructor是指向对象的构造函数，每个对象都可以找到其对应的构造函数，由上图可知， Function的构造函数是它自身，因为它既是函数，又是对象。最终所有的构造函数都是 Function
弄清楚了prototype，__proto__，constructor之间的关系后，我们可以开始梳理JavaScript中的继承，请移步我的下一篇博文。
JavaScript原型继承，构造函数继承，组合继承，ES6继承，我能学会你也可以