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

前言

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

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.xdnf.cn/news/823654.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【温故而知新】vue运用之探讨下单页面应用(SPA)与多页面应用(MPA)

一、概念 1.单页面应用SPA(Single page application) Vue单页面应用是一种采用Vue.js框架开发的Web应用程序,它仅有一个HTML文件,通过前端路由实现页面的切换和渲染。与传统的多页面应用相比,Vue单页面应用在用户体验和开发效率方面有着明显的优势。 在Vue单页面应用中…

【JavaEE】多线程(7) -- 线程池的概念和简单实现

目录 1.线程池是什么 2.标准库中的线程池 2.1ThreadPoolExecutor 2.2构造方法参数介绍 2.3拒绝策略(面试易考) 2.4Executor的使用 3.实现线程池 1.线程池是什么 线程池是一种用来管理线程的机制,它可以有效地控制线程的创建、复用和销毁,从而提高程…

vscode括号颜色突然变成白色的了,怎么解决

更新版本后发现vscode的各种括号都变成了白色,由于分色括号已经使用习惯,突然变成白色非常不舒服,尝试多次后,为大家提供一下几种解决方式,希望能帮到同样受到此种困惑的你: 第一种: 首先打开…

07-C++ 异常

异常 1. 概念 异常事件(如:除 0 溢出,数组下标越界,所要读取的文件不存在,空指针,内存不足等等) 在C 语言对错误的处理是两种方法: 一是使用整型的 返回值标识错误:二是使用 errno…

Spring系列学习四、Spring数据访问

Spring数据访问 一、Spring中的JDBC模板介绍1、新建SpringBoot应用2、引入依赖:3、配置数据库连接,注入dbcTemplate对象,执行查询:4,测试验证: 二、整合MyBatis Plus1,在你的项目中添加MyBatis …

基于uibot知网文论采集机器人设计与实现

摘要 人工智能技术的不断更新迭代为财务数据自动化处理带来了新的机遇和挑战,如何通过人工智能等新兴技术来优化现有的财务流程, 创造更多的企业价值,成为财务信息自动化处理是目前的重点研究方向。机器人流 程自动化作为一种新型的自动化技…

SpringBoot项目部署及多环境

1、多环境 2、项目部署上线 原始前端 / 后端项目宝塔Linux容器容器平台 3、前后端联调 4、项目扩展和规划 多环境 程序员鱼皮-参考文章 本地开发:localhost(127.0.0.1) 多环境:指同一套项目代码在把不同的阶段需要根据实际…

三个故事,谈谈小米汽车技术发布会

都说新年新气象,随着年末消费旺季到来,汽车市场越来越热闹了。 继蔚来12月23日公布旗舰车型ET9,华为26日发布问界M9,小米汽车首款量产车型SU7终于正式亮相。 12月28日,在小米汽车技术发布会上,小米创办人…

【STM32】STM32学习笔记-TIM输出比较(15)

00. 目录 文章目录 00. 目录01. 输出比较简介02. PWM简介03. 输出比较通道(高级)04. 输出比较通道(通用)05. 输出比较模式06. PWM基本结构07. PWM参数计算08. 舵机简介09. 舵机硬件电路10. 直流电机及驱动简介11. 直流电机硬件电路12. 附录 01. 输出比较简介 OC(Ou…

paypal实操常见问题——绑卡篇

1、绑美金提款卡的时候卡号类型怎么选? PayPal在绑定美金提现卡的时候,页面里会出来两个选项,一个是“关联借记卡或信用卡”,一个是“关联银行账户” “关联借记卡或信用卡”这个选项是消费的时候用来付款的卡; “关…

如何使用ArcGIS Pro自动矢量化建筑

相信你在使用ArcGIS Pro的时候已经发现了一个问题,那就是ArcGIS Pro没有ArcScan,在ArcGIS Pro中,Esri确实已经移除了ArcScan,没有了ArcScan我们如何自动矢量化地图,从地图中提取建筑等要素呢,这里为大家介绍…

验证 Mixtral-8x7B-Instruct-v0.1 和 LangChain SQLDatabaseToolkit 的集成效果

验证 Mixtral-8x7B-Instruct-v0.1 和 LangChain SQLDatabaseToolkit 的集成效果 0. 背景1. 验证环境说明2. 验证开始2-1. 准备测试数据库2-2. 读取环境配置信息2-3. 导入依赖包2-3. 创建 SQLDatabaseToolkit 对象和 AgentExecutor 对象2-4. 第1个测试 - 描述一个表2-5. 第2个测…

【动态规划精选题目】3、简单多状态模型

此动态规划系列主要讲解大约10个系列【后续持续更新】 本篇讲解简单多状态模型中的9道经典题,会在讲解题目同时给出AC代码 目录 1、按摩师 2、力扣198:打家劫舍1 3、打家劫舍II 4、删除并获得点数 5、 粉刷房子 6、力扣309:买卖股票的最佳时机含冷冻期 7、 买…

Spring-4-代理

前面提到过,在Spring中有两种类型的代理:使用JDK Proxy类创建的JDK代理以及使用CGLIB Enhancer类创建的基于CGLIB的代理。 你可能想知道这两种代理之间有什么区别,以及为什么 Spring需要两种代理类型。 在本节中,将详细研究代理…

基于策略模式和简单工厂模式实现zip、tar、rar、7z四种压缩文件格式的解压

推荐语 这篇技术文章深入探讨了基于策略模式和简单工厂模式实现四种常见压缩文件格式的解压方法。通过阅读该文章,你将了解到如何利用这两种设计模式来实现灵活、可扩展的解压功能,同时适应不同的压缩文件格式。如果你对设计模式和文件处理感兴趣或刚好…

【JavaEE进阶】 @RequestMapping注解

文章目录 🎄什么是RequestMapping 注解🌳RequestMapping 使⽤🌲RequestMapping 是GET还是POST请求?🚩使用Postman构造POST请求 ⭕总结 🎄什么是RequestMapping 注解 在Spring MVC 中使⽤ RequestMapping 来…

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

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

PathWave Device Modeling (IC-CAP) 建模系统——IC-CAP概述

建模系统 PathWave Device Modeling(IC-CAP)建模系统用于测量半导体器件并分析器件的电路建模特性以及分析所得数据。 要使用PathWave Device Modeling(IC-CAP),您需要以下设置: 一台工作站执行直流、电…

【rosbag】rosbag命令--查看提取bag中的内容

1.查看消息 rosbag info --.bag topics是其中的话题内容,/imu中只写了包含imu的数据,但是imu是9轴的,到底磁力计信息是否包含在其中呢? 2.将bag中的某个话题转为txt 将file_name.bag文件中topic_name话题的消息转换到Txt_name.…

java中的缓冲类HeapByteBuffer和DirectByteBuffer的区别

使用之前写的文章里的例子 https://blog.csdn.net/zlpzlpzyd/article/details/135292683 HeapByteBuffer import java.io.File; import java.io.FileInputStream; import java.io.Serializable; import java.nio.ByteBuffer; import java.nio.channels.FileChannel;public clas…