【前端基础】——原型与原型链详解,看一篇即可【图文版】

前言

本文旨在通过图文的方式,一步步回顾原型链的整个流程是如何运作的,如果你刚好在电脑旁边,不妨跟着我的思路,一起走一遍敲一遍代码流程,你会发现原型链并没有你想的那么复杂。

new关键字

我们先看这一个代码,你要记住的第一点是:所有的对象都是通过new这个关键字出来的

    const a = new A();

这个时候可能会有人说,那我可以这样:

	const b = {}

他实际上是一个语法糖:本质其实是:

 const b = new Object()

那么此时我们可以得到一个关键点就是,对象a是由函数A通过new这个关键字生成的,示例图如下所示:
在这里插入图片描述

原型

我们要记住的第二点是:每一个函数(A)它都有一个原型(箭头函数除外),也就是prototype,它是一个{}

	A.prototype    ///是{}

而通过new这个关键字创建出来的对象(a),它也有一个原型__proto__,它指向的就是函数的原型prototype

也就是:

  a.__proto__ ===  A.prototype //true

至此,你可以成功的画出这个关系网,这就是初步的原型链
在这里插入图片描述

推导

我们进一步拓展,我们需要思考一个问题,prototype是哪里来的呢?

我们通过打印可以知道A有一个prototype属性,并且在控制台显示的是一个{},但是你注意,他并不是纯粹的空对象哦,你直接写{},实际上是新创建了一个空对象,那么肯定是不一样的。
错误的:

A.prototype ==={} //错误的❌

正确的:

A.prototype===Object.getPrototypeOf(a)  //正确✔

那么至此,你可以画出这样的图:
在这里插入图片描述

你要明白一点,对象也是一个特殊的函数,那么他肯定也有prototype属性,那么你就可以顺理成章的画出下面的这个关系:

A.prototype.__proto__===Object.prototype //正确✔

在这里插入图片描述

继续推导,那Object的prototype是哪里来的呢?如果Object的prototype也是Object,那就无限死循环下去了,所以Object.prototype是JS引擎直接安放在内存中的,它指向一个特殊值null

Object.prototype //[Object: null prototype] {}

在这里插入图片描述

那么Object是哪里来的呢,根据官方的说法,对象就是一个可以被调用的函数,我们上面说了,对象是通过new这个关键字得来的(这一点很重要),那Object实际上是由new Funtion()得来的
请你尝试下面这个代码:

typeof Object   //function

function sum(a,b){
    return a+b
}

const sum2 = new Function('a','b','return a+b')

sum(1,2)  //3

sum2(1,2)  //3

那么你又可以拓展这个图,函数也是一个特殊的对象,那么它肯定也有prototype

在这里插入图片描述
那么你会发现,(A)通过new这个关键词创造的东西(a),它(a)的隐式原型(proto)永远跟(A)的prototype相等,你如果发现这点规律,那么恭喜你,你可以直接得出这个图:

Function.prototype==Object.__proto__  //true

在这里插入图片描述

规律

我们总结一个规律A是父亲,这个父亲可以是一个对象,也可以是一个函数,因为函数本身就是一个可以被调用的特殊对象,所以你只需要记住一点,所有的对象都是通过new这个关键字创建的

你可以很轻易的发现,这里存在这些三角关系:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
那么你可以进一步缩略这个图,得到最终的图:

在这里插入图片描述
那到底什么是原型链呢,你看看绿色的部分,是不是连成了一条线,这就是原型链,a找不到的属性会去(A)prototype找,(A)prototype找不到会去(Object)prototype找,如果还是找不到就是null了,就是真的没有了。

如果你再仔细拓展,你会发现,A实际上也是通过new Function创建出来的,这也就是解释了,为什么A身上有bind和call这些东西,也可以解释,为什么也有toString这个方法,因为Funcion也是Object。

那么Function从哪里来的呢?

这也是JS引擎直接放在内存中的。

所以Funcition和null都是JS引擎直接放到内存去的,相当于原始祖先了(女娲)。

道生一,一生万物,链条总归是有终点,跟人的生命一样,总会走到尽头,一切皆空,就是尽头

你可以把原型链想象成人的一生,总归有下一代,下下一代,你可以从你长辈继承知识(继承和共享属性和方法),我们都来自同一个祖先,不断的传递自己的知识,金钱,财富给下一代,然后走到尽头空空如也,但我们仍然会被记住(构建对象之间的关系),这就是人生的价值、也是原型链的价值

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/280485.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

华锐三维云展平台 | VR在线展览云平台提供定制化虚拟展厅制作工具

随着科技的飞速发展,互联网技术的不断革新,广州华锐互动顺应时代需求,开发了VR在线展览云平台,用户可以在平台上自主创建属于自己的3D展厅。VR在线展览云平台正改变着传统展览行业的模式,为参展者提供更高效、更便捷、…

vue3中怎么巧妙的去运用jsx?

文章目录 概要JSX / TSX?安装配置封装JsxRender.vue使用JsxRender.vue怎么巧妙的去使用它?Demo下载 概要 我们都知道vue3是支持用jsx/tsx,但是好像从来都没有人告诉我们应该怎么运用到项目当中,下面是我觉得不错的一种使用方式,分享给大家…

二级路由的配置以及注意项

二级路由 比如说LayOut组件是父亲,LayOut和ArtComp是儿子,那我们怎么给儿子配路由呢? 1、首先在router下的index.js导入组件,配置规则,详细如下 // 导入路由相关组件 import LayOut from /views/LayOut import UserC…

IntelliJ IDEA常用快捷键

【1】创建内容(新建):altinsert 【2】main方法:psvm 【3】输出语句:sout 【4】复制行:ctrld 【5】删除行:ctrly(很多编辑器ctrly是前进操作,如果选择 Delete Line&…

C++内联函数与引用(超详细)

文章目录 前言一、内联函数1.为什么会存在内联函数2.什么是内联函数3.内联函数注意事项 二、引用1.什么是引用2.引用的特性3.常引用4.引用使用场景5.引用与指针 总结 前言 一、内联函数 1.为什么会存在内联函数 🧐🧐首先我们介绍内联函数之前&#xf…

NVMe over Fabrics:概念、应用和实现

对于大部分人来说,NVMe over Fabrics(简称NVMf)还是个新东西,因为其第一个正式版本的协议在今年6月份才发布。但是这并不影响人们对NVMf的关注,因为这项依托于NVMe的技术很可能继续改变存储市场格局。 NVMf的贡献在于…

USB -- STM32F103复合设备(HID+MassStorage)传输讲解(十)

目录 链接快速定位 前沿 1 描述符讲解 1.1 设备描述符 1.2 配置描述符 1.3 接口描述符 1.4 功能描述符 1.5 端点描述符 1.6 字符串描述符 1.7 报告描述符 2 运行演示 链接快速定位 USB -- 初识USB协议(一) 源码下载请参考链接:…

vivado CDC约束-“设置总线倾斜”对话框

“设置总线倾斜”对话框 在AMD Vivado™ IDE中,可以通过多种方式设置总线偏斜约束: •通过时间约束编辑器。选择窗口 → 时间限制 → 断言 → 设置总线倾斜。从“时序约束编辑器”中,可以添加、删除或修改总线扭曲约束。 注意&#…

【VSCode】关闭双击shift出现搜索

原因 有时候总是手滑按两下shift,每次都会弹出如下图的搜索框,导致很不方便 解决办法 找到该文件 C:\Users\admin\.vscode\extensions\k--kato.intellij-idea-keybindings-1.5.12\package.json(admin是自己的用户名) 然后关键字…

【MySQL视图特性】

目录: 前言视图基本使用创建视图查看视图内容修改内容测试删除视图 视图规则和限制 前言 剑指offer:一年又12天 视图 视图是一个虚拟表,其内容由查询定义。同真实的表一样,视图也是带有名称的列和行内容,对视图内容的…

Java集合/泛型篇----第二篇

系列文章目录 文章目录 系列文章目录前言一、说说List,Set,Map三者的区别二、Array与ArrayList有什么不一样?三、Map有什么特点四、集合类存放于 Java.util 包中, 主要有几 种接口前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。…

系列四、Eureka自我保护

一、Eureka自我保护 1.1、故障现象 保护模式主要用于一组客户端和Eureka Server之间存在网络分区场景下的保护。一旦进入保护模式,Eureka Server将会尝试保护其服务注册表中的信息,不再删除服务注册表中的数据,也就是不会注销任何微服务。如…

学生信息管理系统winform+sqlserver

学生信息管理系统winformsqlserver Winform作为一个强大的桌面应用程序开发工具,具有丰富的图形化界面编程组件,可以快速构建出用户友好的界面。使用这个工具,我能够轻松设计出适合学生信息管理系统的各类窗体,比如学生信息录入窗…

------- 计算机网络基础

1.1概述 是什么? 答出独立计算机通信线路连接实现资源共享 计算机网络组成 从组成部分看: 硬件软件协议 从工作方式看: 边缘部分和核心部分 从功能组成看: 通信子网和资源子网 计算机网络性能指标 速率是指数据传输的物理速度,吞吐量是指实际的数据传输…

Redis:原理速成+项目实战——Redis的Java客户端

👨‍🎓作者简介:一位大四、研0学生,正在努力准备大四暑假的实习 🌌上期文章:Redis:原理速成项目实战——Redis常见命令(数据结构、常见命令总结) 📚订阅专栏&…

Qt Creator可视化交互界面exe快速入门5

上一期介绍了加法计算器,本期介绍QObject定时器。 首先一样先建个工程,比如我这项目名为QObject 本期的任务就是制作图片在界面上显示,然后每秒定时切换,点击另一个暂停按钮,可以定格当前图片,即取消定时切换功能。 显示图片的我们可以使用显示里面的label 这个用于显示…

STM32+Codesys工业软件PLC解决方案

工业控制系统在现代制造和自动化领域扮演着关键角色, 基于IEC 61131-3 标准的控制器编程开发软件平台CODESYS,适用于多种行业的控制系统的开发,使用户方便快捷地对自动化工程进行编程和配置,完成项目开发、软件测试和应用调试。 本次STM32联合合作伙伴C…

设计模式(4)--对象行为(8)--状态

1. 意图 允许一个对象在其内部状态改变时改变它的行为。 2. 三种角色 上下文环境(Context)、抽象状态(State)、具体状态(Concrete State) 3. 优点 3.1 将与特定状态相关的行为局部化,并且将不同状态的行为分割开来。 3.2 使得状态转换显式化。 3.3 State对象可被共…

超详细YOLOv8姿态检测全程概述:环境、训练、验证与预测详解

目录 yolov8导航 YOLOv8(附带各种任务详细说明链接) 搭建环境说明 不同版本模型性能对比 不同版本对比 参数解释 模型解释 训练 训练示意代码 训练数据与.yaml配置方法 .yaml配置 数据集路径 标签数据说明 训练参数说明 训练过程示意及输出…

低代码开发中业务蓝图的重要性:业务需求与系统实现的桥梁

在低代码应用开发领域,业务蓝图是一个至关重要的工具,它提供了组织业务流程需求的详细信息。它类似于一份指导开发人员进行应用开发的路线图,确保与业务的战略目标和需求保持一致。 低代码方法学,顾名思义,即减少了传…
最新文章