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

前言

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

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,一经查实,立即删除!

相关文章

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 …

用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…

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

前言&#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;…

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;&#…

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

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

SpringBoot知识

1、Spring和SpringBoot对比 2、版本调整 &#xff08;1&#xff09;先排除是否是JDK与SpringBoot的版本不一致导致的&#xff1a;如JDK1.8和SpringBoot3.1.5冲突&#xff1b; &#xff08;2&#xff09;调整编译版本 &#xff08;3&#xff09;调整maven的jdk &#xff08;4&…

Vscode运行调试文件

文章目录 vscode调试运行流程vscode 执行报错settings.json成功截图 vscode调试运行流程 vscode左侧菜单栏点击运行调试icon&#xff0c;点击菜单右侧栏运行和调试按钮&#xff0c;选择node调试器&#xff0c;js文件行数左边点击添加红色断点&#xff0c;运行当前文件 vscode…

【docker实战】01 Linux上docker的安装

Docker CE是免费的Docker产品的新名称&#xff0c;Docker CE包含了完整的Docker平台&#xff0c;非常适合开发人员和运维团队构建容器APP。 Ubuntu 14.04/16.04&#xff08;使用 apt-get 进行安装&#xff09; # step 1: 安装必要的一些系统工具 sudo apt-get update sudo ap…

湘潭大学-2023年下学期-c语言-作业0x0a-综合1

A 求最小公倍数 #include<stdio.h>int gcd(int a,int b) {return b>0?gcd(b,a%b):a; }int main() {int a,b;while(~scanf("%d%d",&a,&b)){if(a0&&b0) break;printf("%d\n",a*b/gcd(a,b));}return 0; }记住最大公约数的函数&…

如何编写一个javaAgent jar工具包超详细教程

介绍 Java Agent技术 Java Agent技术是JDK提供的用来编写Java工具的技术&#xff0c;使用这种技术生成一种特殊的jar包&#xff0c;这种jar包可以让Java程序 运行其中的代码。 Java Agent技术的两种模式 Java Agent技术实现了让Java程序执行独立的Java Agent程序中的代码…

【机组期末速成】CPU的结构与功能|CPU结构|指令周期概述|指令流水线|中断系统

&#x1f3a5; 个人主页&#xff1a;深鱼~&#x1f525;收录专栏&#xff1a;计算机组成原理&#x1f304;欢迎 &#x1f44d;点赞✍评论⭐收藏 前言&#xff1a; 最近在备战期末考试&#xff0c;所以本专栏主要是为了备战期末计算机组成原理这门考试&#xff0c;讲的比较浅显&…

详解Keras3.0 Layer API: Dropout layer

Dropout layer 图1 标准的神经网络 图2 加了Dropout临时删除部分神经元 Dropout层的作用是在神经网络中引入正则化&#xff0c;以防止过拟合。它通过随机丢弃一部分神经元&#xff08;如图2&#xff09;的输出来减少模型对训练数据的依赖性。这样可以提高模型的泛化能力&#x…

C++初阶——基础知识(函数重载与引用)

目录 1.命名冲突 2.命名空间 3.缺省参数 4.函数重载 1.函数重载的特点包括&#xff1a; 2.函数重载的好处包括&#xff1a; 3.引用 引用的特点包括 引用的主要用途包括 引用和指针 引用 指针 类域 命名空间域 局部域 全局域 第一个关键字 命名冲突 同一个项目之间冲…

二分查找--二分查找算法(朴素二分模板)

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 本题题目链接https://leetcode.cn/problems/binary-search/description/ 算法原理 二段性&#xff0c;我们发现这个数组可以找到某种规律将其分为两段&#xff0c;不断划分下去&#xff0c;最终可以找到target 图示 我们分…