尝试一图理清prototype、proto、原型对象之间的关系

原型和原型链的关系错综复杂,最近借鉴了网上各位大神的文章,终于感觉搞懂了,于是马上写了这篇文章理清思路。

图示

js 复制代码
function Foo(){};
let foo = new Foo();

概念

在开始讲解之前我们要理清一些概念:

  1. 函数即是对象
  2. 原型对象(prototype object) :顾名思义就是 prototype 指向的对象,在 JavaScript 中,每当定义一个对象(函数) 时候,对象中都会包含一些预定义的属性,我们可以想象这些预定义的属性都在一个叫原型对象的地方存着,也就是说把对象当成两块去理解,一块是本体,一块是原型对象。原型对象本身又是一个普通对象,所以它也有自己的原型对象。
  3. __proto__constructor属性是对象独有的
  4. prototype 属性是函数独有的
  5. 构造函数:用来初始化新创建的对象的函数是构造函数。在例子中,Foo()函数是构造函数
  6. 实例对象:通过构造函数的new操作创建的对象是实例对象。可以用一个构造函数,构造多个实例对象

因此,对象拥有__proto__constructor属性。 函数拥有__proto__constructor以及prototype属性。 关于__proto__constructor以及prototype属性的作用,可以参考这篇文章里面关于它们的解释 尝试一篇文章说清JS继承(文字、内存、图片三方面解析__proto__、constructor、prototype) - 掘金 (juejin.cn)

于是我们就可以一点一点的补充出上面的图了。

从0绘出关系图

js 复制代码
function Foo(){};
let foo = new Foo();

最初版乞丐图

我们先从foo实例对象 ,以及Foo构造函数Foo的原型对象的关系下手:

验证一下:

js 复制代码
function Foo() {}
let foo = new Foo()
console.log(foo.constructor === Foo)
console.log(Foo.prototype === foo.__proto__)
console.log(Foo.prototype.constructor === Foo)

结果:

分析:

第三行中foo.constructor === Foo,foo上是没有constructor的,它的constructor是继承而来的,顺着__proto__找到Foo的原型对象,它有constructor属性,并且指向Foo构造函数,所以成立。

路径完善图

上图离我们最终形态差的还是有点远,前面说到对象应该有__proto__constructor,函数应该有__proto__constructorprototype属性,现在我们补齐:

验证一下:

js 复制代码
function Foo() {}
let foo = new Foo()
console.log(Foo.__proto__ === Function.prototype)
console.log(Foo.constructor === Function)
console.log(Foo.prototype.__proto__ === Object.prototype)

结果:

分析:

Foo的构造函数是Function函数,所以Foo的__proto__指向Function的原型对象,Foo的constructor指向Function函数,Foo的原型对象也是一个普通对象,它的构造函数是Object函数,所以Foo的原型对象的__proto__指向Object的原型对象。

现在可以看到foo,Foo,Foo原型对象都不差属性了,但又引入了Object和Function函数及其原型对象,接下来画的这部分就是JS规定好了的,无需纠结,记住就行。画的时候记住一点,所有的函数的构造函数源头都是Function函数,所有的对象的原型对象源头都是Object的原型就行。

最终实现图

把每个对象和函数需要的属性补齐。

验证一下:

js 复制代码
function Foo() {}
let foo = new Foo()
console.log(Function.constructor === Function)
console.log(Function.prototype === Function.__proto__)
console.log(Function.prototype.__proto__ === Object.prototype)
console.log(Object.prototype.__proto__ === null)
console.log(Object.constructor === Function)

结果:

分析:

Function函数的constructor指向它本身。

Function函数的prototype__proto__都指向Function 函数的原型对象。

Function函数的原型对象的__proto__指向Object的原型对象。

Object函数的原型对象的__proto__指向null

Object函数的constructor指向Function函数

上面的分析一部分是JS规定的,还有一部分就遵循画之前说的的原则了。

最后

总之,终于把它们之间的关系理清除了,如果有什么不对的地方欢迎指正。

参考资料

理解prototype、proto和constructor的关系

尝试一篇文章说清JS继承(文字、内存、图片三方面解析__proto__、constructor、prototype)

相关推荐
m0_7414122420 小时前
大文件上传与文件下载
前端
wu_jing_sheng020 小时前
Python中使用HTTP 206状态码实现大文件下载的完整指南
开发语言·前端·python
90后的晨仔20 小时前
Vue3项目全面部署指南:从构建到上线
前端·vue.js
小于小于091220 小时前
npx 与 npm 区别
前端·npm·node.js
望获linux21 小时前
【实时Linux实战系列】实时 Linux 在边缘计算网关中的应用
java·linux·服务器·前端·数据库·操作系统
qq_2529241921 小时前
PHP 8.0+ 现代Web开发实战指南 引
android·前端·php
Jeled21 小时前
Android 本地存储方案深度解析:SharedPreferences、DataStore、MMKV 全面对比
android·前端·缓存·kotlin·android studio·android jetpack
Mintopia21 小时前
🎨 AIGC 内容过滤技术:当创作的洪流遇上理性的堤坝
前端·javascript·aigc
Mintopia21 小时前
⚙️ Next.js 缓存与队列:当数据与请求跳起“低延迟之舞”
前端·全栈·next.js
Shi_haoliu21 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office