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

前言

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

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   //functionfunction sum(a,b){return a+b
}const sum2 = new Function('a','b','return a+b')sum(1,2)  //3sum2(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.mzph.cn/news/586199.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React项目打包流程

一、React项目打包流程 一、React项目打包流程1. 项目打包打包命令:npm run build2. 预览接着命令行会提示执行: 先:npm install -g serve 然后执行此命令:serve -s build二、打包优化 - 配置路由懒加载 二、打包优化 - 配置路…

RIS 系列 See-Through-Text Grouping for Referring Image Segmentation 论文阅读笔记

RIS 系列 See-Through-Text Grouping for Referring Image Segmentation 论文阅读笔记 一、Abstract二、引言三、相关工作3.1 Semantic Segmentation and Embeddings3.2 Referring Expression Comprehension3.3 Referring Image Segmentation 四、方法4.1 视觉表示4.2 文本表示…

【yolofastest上手】

一、前言 yolofastest网上资料比较少,也没有视频教学,所以想要使用参考了很多资料,只能说各资料都不尽全,让刚接触的小白无从下手。 参考资料: github地址 yolo-fastest 快速上手 修改参数遇到的问题 能在ARM-CPU上实时识别图像的…

销售转行上位机编程:我的学习与职业经历分享

同学们好,我是杨工,原先是一名销售。 通过在华山编程培训中心学习,成功转行上位机编程,对此我想分享学习和职业经历。 在职业生涯的早期,我并没有考虑将技术融入到我的工作中。然而,在几次创业的失败后&a…

{MySQL}索引事务和JDBC

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、索引1.1索引是什么1.2作用1.3代码 二、事务2.1什么是事务2.2使用 三.JDBC总结 前言 接着上次,继续讲下MySQL 提示:以下是本篇文章正…

Jmeter吞吐量控制器总结

吞吐量控制器(Throughput Controller) 场景: 在同一个线程组里, 有10个并发, 7个做A业务, 3个做B业务,要模拟这种场景,可以通过吞吐量模拟器来实现。 添加吞吐量控制器 用法1: Percent Executions 在一个线程组内分别建立两个吞吐量控制器, 分别放业务A和业务B …

多浏览器密码修改,账户Token全部失效解决方案

问题场景: 用户在多个浏览器登录同一个账户时,正常情况下每个浏览器获得token应该是不同的。但若是其中一个浏览器进行了修改密码的操作,就应该删除该账户关联的所有token。该功能如何实现呢? 在这里提供一个解决方案,…

如何基于PyTorch框架自定义数据集类获取数据

在PyTorch框架中,可以通过自定义数据集类来加载和处理数据 要自定义数据集类,需要继承 PyTorch提供的 torch.utils.data.Dataset类,并实现两个主要方法:__len__ 和 __getitem__ 下面是一个示例,展示如何基于PyTorch框…

R503S指纹识别模块的通信协议

1 物理层 物理层采用串口通讯,波特率 57600,8 位数据位,1 位停止位,无奇偶校验位。 2 数据包格式 模块采用 UART 与上位机通讯,对命令、数据、结果的接收和发送,都采用数据包的形式。对于多字节的&#x…

用CSS中的动画效果做一个转动的表

<!DOCTYPE html> <html lang"en"><head><meta charset"utf-8"><title></title><style>*{margin:0;padding:0;} /*制作表的样式*/.clock{width: 500px;height: 500px;margin:0 auto;margin-top:100px;border-rad…

JavaScript(注释,数据类型,运算符,条件语句)

一 注释 1.1 单行注释 //这是单行注释 1.2 多行注释 /*这是多行注释*/ 1.3 嵌套在HTML文件中注释 <!--注释--> 1.4 注释的快捷键 ctrl/ 二 JavaScript输出方式 2.1 在浏览器中展示对话框&#xff0c;弹出要展…

强化学习计划

文章目录 强化学习强化学习解决的是什么样的问题&#xff1f;举出强化学习与有监督学习的异同点。有监督学习靠样本标签训练模型&#xff0c;强化学习靠的是什么&#xff1f;强化学习的损失函数&#xff08;loss function&#xff09;是什么&#xff1f;写贝尔曼方程&#xff0…

【Linux Shell学习笔记】Linux Shell的流控制

1、 if条件判断 1.1 格式 1.1.1 单分支 if [ 判断表达式 ];then 代码块 fi 1.1.2 双分支 if [ 判断表达式 ];then 代码1 else 代码2 fi 1.1.3 多分支 if [ 判断表达式1 ];then 代码1 elif [ 判断表达式2 ];then 代码2 elif [ 判断表达式3 ];then 代…

【数据结构】双向带头循环链表的实现

前言&#xff1a;在前面我们学习了顺序表、单向链表&#xff0c;今天我们在单链表的基础上进一步来模拟实现一个带头双向链表。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:数据结构 &#x1f448; &#x1f4af;代码仓库:卫卫周大胖的…

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

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

修改字符串(c++题解)

题目描述 给你一个长度为 的字符串 &#xff0c;由大写和小写英文字母组成。 对字符串 进行 次修改。由两个整数和一个字符组成的元组 表示 -th 修改 &#xff0c;如下所示。 如果是&#xff0c;则将的个字符改为。如果是 &#xff0c;将 中的所有大写字母转换为小写字…

java中PhantomReference WeakReference SoftReference垃圾回收触发时机以及使用场景

java 中对象引用一般引用分为四种情况 强引用 即我们平常创建的对象 Object obj new Object() 垃圾回收触发时机 在没设置 jvm 参数 -XX:PretenureSizeThreshold 和 -XX:MaxTenuringThreshold 的情况下 -XX:PretenureSizeThreshold 的值为 0&#xff0c;即未设置大对象直接…

三巨头对决:深入了解pnpm、yarn与npm

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 三巨头对决&#xff1a;深入了解pnpm、yarn与npm 前言包管理器简介npm&#xff08;Node Package Manager&#xff09;&#xff1a;Yarn&#xff1a;pnpm&#xff08;Performant Npm&#xff09;&#…

Linux 服务器安全策略技巧:使用数字证书进行认证

什么是数字证书? 数字证书是一种用于验证和加密网络通信的安全工具。它是由认证机构(CA)颁发的一种电子文件,用于证明某个实体的身份。数字证书包含了实体的公钥和其他相关信息,可以用于验证实体的身份和确保通信的机密性。 为什么使用数字证书进行认证? 在Linux服务器…

基于Mapify的在线艺术地图设计

地图是传递空间信息的有效载体&#xff0c;更加美观、生动的地图产品也是我们追求目标。 那么&#xff0c;我们如何才能制出如下图所示这样一幅艺术性较高的地图呢&#xff1f;今天我们来一探究竟吧&#xff01; 按照惯例&#xff0c;现将网址给出&#xff1a; https://www.m…