【JavaScript】原型对象 => 原型链的深入浅出解读

news2025/2/7 14:04:24

在这里插入图片描述

在这里插入图片描述

文章目录

  • 先知概念:
  • 原型 prototype
  • 隐式原型 __ proto __
  • 原型链

先知概念:

在了解原型与原型链之前,我们应该要先明确以下几个概念:

1. 在 JS中 所有的普通对象 都是 通过 new 一个函数来创建的
2. 在 JS中 所有的函数 本质上也是一个对象,它是通过 new Function产生的

诠释【1】

我们平时所写的 let a = {};,其实本质上 相当于 let a = new Object(); 我们所简写的 {} 算是一个语法糖,同理 let b = [];,相当于 let b = new Array();,我们简写的 [] 也是一个语法糖

let a = {}; //等同 new Object()
console.log(a);

let b = []; //等同 new Array()
console.log(b);

案例说明:当我们自定义一个函数,并通过 new 来创建一个对象。

问:下面 new test()是否会产生一个对象,并且是哪个构造函数的对象?

const test = function () {
  return {};
};
let obj = new test();
console.log(obj);      //  Object  

首先 通过new 一个函数肯定会产生一个对象。因为我们说过对象也一定是通过 new 一个函数产生的。

在这一段代码中 有的小伙伴可能会认为这就是 new test 所以 构造函数 是test,其实非也。因为,如果一个函数中的返回值 是一个对象的话,那么我们通过 new 得到的就是它的返回值本身,此处的函数返回值是一个{},相当于是 new Object(),就是说 obj 等于 new Object() 产生的 一个 普通的 Object 对象
在这里插入图片描述

—__—同理反之:
如果此处的函数返回值是一个非对象 的值或者 没有返回值,那么得到的就是当前构造函数的对象

const test = function () {
  //return 123;
};
let obj = new test();
console.log(obj);      //  test

在这里插入图片描述

诠释【2】 ( 在 JS中 所有的函数 本质上也是一个对象,它是通过 new Function产生的)

我们平时写法定义的函数 function fn() {},其实本质上 相当于 let fn = new Function(); 我们定义函数的 function 关键字,其实也属于一个语法糖,再结合我们上面讲的,只要 new 一个函数,一定会产生一个对象,因为 函数也是通过 new得来的,所以说函数本质上也是一个对象

从这里开始,我们就可以区分出在 JS 中,对象可以被分为 普通对象函数对象。再说的通俗一点就是,函数本质上既是一个函数也是一个对象,而对象本质上是一个对象,但不一定是一个函数。

图例:
在这里插入图片描述

结论:普通对象是一个对象,他通过 new 一个函数 来创建。函数也是一个对象,它通过 new Function 来创建。

看到图例这里,或许有的小伙伴又产生疑问:大写的 Function 其实本质上也是一个函数及构造函数,同时上面说过函数也是一个对象,而对象也一定是通过,new 一个函数创建的 ,那么好奇 Function 又是怎么来的呢?他又是 new 谁创建的呢?其实在这里,需要说明一下的就是 Function 是一个比较特殊的存在,它是 JS 引擎 启动的时候,被直接放在 内存中的,它不通过任何东西来创建。

补充
只有普通函数 才能够被 new,用来作为一个构造函数使用。
由于函数也是一个对象,所以函数身上可以有属性或方法
所有对象都是引用类型,赋值的时候实际上是赋值的一个地址,用来指向一块内存空间


原型 prototype

所有函数身上都有一个属性:prototype,被称之为 函数原型

在这里插入图片描述

默认情况下,prototype 是一个普通的 Object 对象,并且在 prototype 中默认会携带一个属性 叫做 constructor 的属性,它也是一个对象(函数对象),它指向当前构造函数自身。

在这里插入图片描述
在这里插入图片描述

理解图例:
在这里插入图片描述


隐式原型 __ proto __

所有对象都有一个属性 __proto__,他被称之为隐式原型

在这里插入图片描述

默认情况下 隐式原型指向创建该对象构造函数原型

在这里插入图片描述
图例:
在这里插入图片描述

当访问一个对象的属性成员时。

  1. 首先会在当前对象自身上查找,如果属性存在,则直接使用。
  2. 如果不存在,则会在当前对象的 隐式原型 上查看自己的构造函数身上有没有该属性,如果找到了就使用,没找到就继续向顶层查找,直到找到顶层的 Object 的身上,如果还没找到,这时候就会报错抛出异常。

原型链

所谓的原型链 其实就是 一个对象 由下逐步向上层逐层查找属性成员的一种形式描述

在这里插入图片描述

__proto__ 在进行向上查找时,由于 __proto__ 自身也是对象,所以也可以调用 自身的 __proto__,这样的过程,由于看起来,像是一个链条一样,故而被称之为 原型链

图例分析:
在这里插入图片描述
补充:

  • Function 隐式原型指向自身的原型(特殊点)
  • Obiect.prototype.__proto__ 指向 null (查找到顶层了,实在是没有了)

在这里插入图片描述


在这里插入图片描述


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

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

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

相关文章

开源问答类知识网站源码系统 附带完整的搭建教程

人们对知识的需求和获取方式也在发生改变。问答类知识网站成为了人们获取答案、解决问题的重要途径之一。然而,由于问答类知识网站需要处理大量的用户提问和回答,因此对于技术的要求也相对较高。小编给大家分享一款开源问答类知识网站源码系统&#xff0…

【Git版本控制】

Day10_Git版本控制 知识点01:课程内容大纲与学习目标 #课程内容大纲版本控制工具Git ​ #学习目标了解下git的背景以及作用了解下git基本使用 知识点02:项目开发中的版本问题 目标:了解项目开发中遇到的开发版本问题 举例:你在大…

广播测试信令记录一文全解

语音广播基本要求 语音广播功能实现用户通过语音输入设备向前端语音输出设备的语音广播。语音流发送者向语音流接收者发送通知消息,语音流接受者在收到通知消息后,进行判断处理。若能够接收广播,则向语音流发送者发起呼叫请求,获…

408数据结构错题知识点拾遗

408相关: 408数据结构错题知识点拾遗 408计算机网络错题知识点拾遗 对于数据结构的学习,个人认为要对概念性的东西进行理解,特别是树的性质、图的相关性质和考察的相应算法。应用题强化的话,对于每一章节尾的应用小节&#xff0c…

【开源】基于JAVA的学校热点新闻推送系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 新闻类型模块2.2 新闻档案模块2.3 新闻留言模块2.4 新闻评论模块2.5 新闻收藏模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 新闻类型表3.2.2 新闻表3.2.3 新闻留言表3.2.4 新闻评论表3.2.5 新闻收藏表 四、系统展…

Unity网格篇Mesh(一)

Unity网格篇Mesh(一) 本文的目标1.渲染仔细看下面的图你会发现,锯齿状 2.创建网格顶点4 x 2网格网格的顶点 3.创建网格网格只在Play模式下显示逆时针和顺时针三角形第一个三角面一个四边形由两个三角面组成第一个四边形填充剩余网格 接下一篇…

Vue使用Element表格Table设置所有单元格内容居中对齐

为单个列的单元格设置居中对齐代码如下&#xff1a; <el-table-columnprop"productInfo.productName"label"中文名"width"100"align"center"></el-table-column>需要设置el-table-column标签里面的属性设置为align"c…

Jenkins Tutorial

什么是Jenkins Jenkins是一个自动化平台&#xff0c;它允许你使用pipelines去部署应用。它也可以自动化其他任务。 BUILDTESTDEPLOYMENT Jenkins 架构 首先&#xff0c;你拥有一个Master Server&#xff0c;它控制pipelines和安排Build到你的Agent上&#xff1b; 其次&…

除法计算器 C语言xdoj48

问题描述 小明的弟弟刚开始学习除法&#xff0c;为了检查弟弟的计算结果是否正确&#xff0c;小明决定设计一个简单计算器程序来验算。 输入说明 输入数据由四个整数m&#xff0c;n&#xff0c;q&#xff0c;r构成&#xff0c;m为被除数&#xff0c;n为除数&#xff0c…

JVM GC 算法原理概述

对于JVM的垃圾收集&#xff08;GC&#xff09;&#xff0c;这是一个作为Java开发者必须了解的内容&#xff0c;那么&#xff0c;我们需要去了解哪些内容呢&#xff0c;其实&#xff0c;GC主要是解决下面的三个问题&#xff1a; 哪些内存需要回收&#xff1f; 什么时候回收&…

Explain分析——索引优化实践

欢迎大家关注我的微信公众号&#xff1a; 本文通过Explain分析进行索引优化&#xff0c;需要对Explain工具有一定的了解。可以先学习Explain详解之后再进行本文的学习。 传送门&#xff1a;Explain详解 示例表&#xff1a; CREATE TABLE employees (id int(11) NOT NULL AUT…

[RL1]深度强化学习基础

一、强化学习 强化学习(reinforce learning, RL)的本质是互动学习&#xff0c;即让智能体与其外界环境进行交互。智能体根据自己每次感知到的外界环境状态来选择相应的动作&#xff0c;以对环境进行响应&#xff0c;然后观测该动作所造成的结果&#xff0c;并根据结果来调整自身…

docker安装入门及redis,minio,rabbitmq应用安装

部分笔记来自黑马课堂&#xff1a;【黑马程序员Docker快速入门到项目部署&#xff0c;MySQL部署Nginx部署docker自定义镜像DockerCompose项目实战一套搞定-哔哩哔哩】 https://b23.tv/niWEhEF 一、什么是docker&#xff1a; 快速构建、运行、管理应用的工具。--帮助我们快速部…

毕业首选 | CCF推荐1区SCI,IF:6.0,Elsevier出版社,最快仅1个月Accept!

【SciencePub学术】本期&#xff0c;小编给大家解析的是一本Elsevier旗下、CCF-C类、影响因子为6.0的中科院3区SCI。其详情如下&#xff1a; 期刊简介 COMPUTER COMMUNICATIONS ISSN&#xff1a;0140-3664 E-ISSN&#xff1a;1873-703X IF&#xff08;2022&#xff09;&a…

101、nerfstudio——ScaleAndShiftInvariantLoss

github 归一化深度图约束nerf未归一化深度重建 class ScaleAndShiftInvariantLoss(nn.Module):"""Scale and shift invariant loss as described in"Towards Robust Monocular Depth Estimation: Mixing Datasets for Zero-shot Cross-dataset Transfer&…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Toast组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Toast组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Toast组件 Toast 的应用场景也非常广泛&#xff0c;比如网络请求出错了可以弹一个…

1861_什么是H桥

Grey 全部学习内容汇总&#xff1a; GitHub - GreyZhang/g_hardware_basic: You should learn some hardware design knowledge in case hardware engineer would ask you to prove your software is right when their hardware design is wrong! 1861_什么是H桥 H桥电路可以…

MySQL:通过官方mysql server,搭建绿色版mysql服务器(Windows)

1. 官网下载mysql server 下载mysql server的zip文件&#xff0c;地址&#xff1a; https://downloads.mysql.com/archives/community/ 解压后 2. 初始化数据库 运行cmd&#xff0c; 进入bin目录&#xff0c;运行 mysqld --initialize-insecureinitialize-insecure说明如…

windows中修改my.ini出现MySQL服务正在启动或停止中或服务无法启动

问题&#xff1a; 1.修改my.ini 2.在服务里启动MySQL服务正在启动或停止中或服务无法启动 解决办法&#xff1a; 1.修改my.ini编码方式 2.删除 安装目录中的data文件夹 3.winR&#xff08;管理员身份运行cmd&#xff09; cd 到安装目录中的bin文件夹 4.在cmd中运行 mysql…

2023年国赛高教杯数学建模E题黄河水沙监测数据分析解题全过程文档及程序

2023年国赛高教杯数学建模 E题 黄河水沙监测数据分析 原题再现 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变化和人民生活的影响&#xff0c;以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾等方面都具有重要的理论指导…