JS - 原型对象、原型链是什么

news2024/10/7 12:17:14

一 阅读掘金

https://juejin.cn/post/7007416743215759373
https://juejin.cn/post/7007416743215759373

二 阅读掘金小册原型知识点

原型
涉及面试题:如何理解原型?如何理解原型链?
当我们创建一个对象时 let obj = { age: 25 },我们可以发现能使用很多种函数,但是我们明明没有定义过它们,对于这种情况你是否有过疑惑?
在这里插入图片描述

当我们在浏览器中打印 obj 时你会发现,在 obj 上居然还有一个 __proto__ 属性,那么看来之前的疑问就和这个属性有关系了。
其实每个 JS 对象都有 __proto__ 属性,这个属性指向了原型。这个属性在现在来说已经不推荐直接去使用它了,这只是浏览器在早期为了让我们访问到内部属性 [[prototype]] 来实现的一个东西。
讲到这里好像还是没有弄明白什么是原型,接下来让我们再看看 __proto__ 里面有什么吧。
在这里插入图片描述

看到这里你应该明白了,原型也是一个对象,并且这个对象中包含了很多函数,所以我们可以得出一个结论:对于 obj 来说,可以通过 __proto__ 找到一个原型对象,在该对象中定义了很多函数让我们来使用。
在上面的图中我们还可以发现一个 constructor 属性,也就是构造函数
在这里插入图片描述
打开 constructor 属性我们又可以发现其中还有一个 prototype 属性,并且这个属性对应的值和先前我们在 __proto__ 中看到的一模一样。所以我们又可以得出一个结论:原型的 constructor 属性指向构造函数,构造函数又通过 prototype 属性指回原型,但是并不是所有函数都具有这个属性,Function.prototype.bind() 就没有这个属性。

构造函数通过 prototype 属性指回原型:
在这里插入图片描述

其实原型就是那么简单,接下来我们再来看一张图,相信这张图能让你彻底明白原型和原型链
在这里插入图片描述

看完这张图,我再来解释下什么是原型链吧。其实原型链就是多个对象通过 __proto__ 的方式连接了起来。为什么 obj 可以访问到 valueOf 函数,就是因为 obj 通过原型链找到了 valueOf 函数。
对于这一小节的知识点,总结起来就是以下几点:

  • Object 是所有对象的爸爸,所有对象都可以通过 __proto__ 找到它
  • Function 是所有函数的爸爸,所有函数都可以通过 __proto__ 找到它
  • 函数的 prototype 是一个对象
  • 对象的 __proto__ 属性指向原型, __proto__ 将对象和原型连接起来组成了原型链

三 记住一句话

JavaScript 里万物皆对象,万物皆有__proto__,只有function才会有prototype。

四 面试语录梳理 - 原型对象和原型链概念总结

1. 原型对象

  • JS中new一个对象经过4个步骤:1.创建一个空对象。2.空对象继承构造函数的prototype属性,构造函数中的this指向这个空对象。3.开始执行内部的代码。4.如果该函数没有返回对象,则返回this。
  • 原型对象就是构造函数的显式原型prototype和其实例对象的隐式原型__proto__是指向的地方。
    (构造函数的显式原型prototype和其实例的隐式原型__proto__是指向同一个地方的,这个地方就叫做原型对象。)
    在这里插入图片描述

2. 解释原型链

其实俗话说就是:_proto__的路径就叫原型链
每个对象都有一个_proto_属性指向原型对象(构造函数.prototype),那么原型对象也有_proto_指向原型对象的原型对象,直到指向null,这才到达原型链的顶端。
( [[prototype]]即_proto_ )
在这里插入图片描述在这里插入图片描述

3.知识点

  • 原型模式的执行流程
    1.先查找构造函数实例里的属性或方法,如果有,立刻返回;
    2.如果构造函数实例里没有,则去它的原型对象里找,如果有,就返回;

  • instanceof 检测类型
    要检测一个变量的类型,我们可以通过typeof运算符来判别。诸如:

varbox='Lee';
alert(typeof box);//string

虽然typeof运算符在检查基本数据类型的时候非常好用,但检测引用类型的时候,它就不是那么好用了。通常,我们并不想知道它是不是对象,而是想知道它到底是什么类型的对象。因为数组也是object,null也是Object等等。
这时我们应该采用instanceof运算符来查看。
instanceof 作用:A instanceof B 判断B的prototype是否在A的原型链上

var box=[1,2,3];
alert(box instanceof Array);//是否是数组
var box2={};
alert(box2 instanceof Object);//是否是对象
var box3=/g/;
alert(box3 instanceof RegExp);//是否是正则表达式
var box4=newString('Lee');
alert(box4 instanceof String);//是否是字符串对象
PS:当使用instanceof检查基本类型的值时,它会返回false。

五 再去看看△原型-重点(结合李炎恢老师笔记)!!! 笔记 & js李炎恢老师视频笔记第15章面向对象与原型

https://note.youdao.com/s/2PADqnvd
https://note.youdao.com/s/XIuqn0ko

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

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

相关文章

设备太分散?如何一站式管理边缘 OS、K8s 和应用?

作者简介 张志龙,SUSE 大中华区资深解决方案架构师,CNCF 官方认证的 CKA&CKAD 工程师,深耕以 Kubernetes 为代表的云原生领域,具备丰富的架构设计、业务容器化改造和项目落地实践经验。 据 Gartner 预测,到 2025 年…

【GlobalMapper精品教程】053:打开dbf文件并生成有坐标系的shp数据

本文讲解在globalmapper汇总打开dbf文件并生成有坐标系的shp数据。 文章目录一、dbf文件解读二、打开dbf文件二、另存为shp文件一、dbf文件解读 我们可以通过Excel或FME等多种软件查看dbf的结构,字段有:Name,kind,Lat&#xff0c…

事理知识图谱

事理知识图谱能够有力第建模各类事件之间的演化关联关系为事理逻辑推理提供更好的数据基础。 事理图谱定义 事理知识图谱可以将文本中对事件以及事件之间的关系抽取并抽象出来,构建成一个有向图形式的事理知识库。在结构上,事理知识图谱是一个有向有环…

SparkSQL

第1章 SparkSQL 概述1.1 SparkSQL 是什么Spark SQL 是 Spark 用于结构化数据(structured data)处理的 Spark 模块。1.2 Hive and SparkSQLSparkSQL 的前身是 Shark,给熟悉 RDBMS 但又不理解 MapReduce 的技术人员提供快速上手的工具。Hive 是早期唯一运行在 Hadoop …

vue项目中引入字体包

问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步 一 下载对应的字体包文件,放置到我们的项目中 ​ 比如我需要PingFangSC的系列字体&#…

交叉编译 cJSON

交叉编译 cJSON 概述 JSON 是一种轻量级数据交换格式。它可以表示数据、字符串、有序的值序列以及名称/值对的集合。 cJSON 是 ANSI C 中超轻量级的 JSON 解析器。cJSON 旨在成为您可以完成任务的最简单的解析器。它是一个 C 文件和一个头文件。作为一个库,cJSON…

VR全景+汽车,打造汽车销售新模式

在国内汽车市场竞争越来越激烈的背景下,传统汽车、混动汽车、新能源汽车等各类汽车市场正在不断壮大,汽车行业企业必须抓住机遇、迎接挑战,而营销引流则是关键步骤之一。未来,汽车行业的营销方式将更加高效数字化,采用…

Python学习-----lambda式匿名函数

目录 前言: 1.什么是lambda函数 2.使用示例 (1)示例1:与def对比 (2)示例2:与三目运算符 (3)示例3:lambda作为参数传入其他函数 (4&#xff…

linux环境中编译exosip2和osip2库

1 前言 在开发GB/T 28181信令服务或网关时,要使用SIP协议栈。其中一种熟悉的开源库就是exosiposip了。在windows环境中编译eXosip2和osip2比较简便;在linux中,默认方式下编译这2个库,也比较方便。如果要指定库的安装目录&#xf…

网安入门必备的12个kali Linux工具

kali Linux工具帮你评估 Web 服务器的安全性,并帮助你执行黑客渗透测试。 注意:这里不是所提及的所有工具都是开源的。 1. Nmap Nmap ( 网络映射器 )是一款用于 网络发现 和 安全审计 的 网络安全 工具. 主机发现,端口扫描,版本…

mars3d基于vue3.0的widget使用

mars3d在vue3.0生态上开发了两个gis相关开源项目 mars3d-vue-example 和 mars3d-vue-project,在这两个项目中widget都是非常重要的一个模块。通过widget可以在复杂的场景下非常清晰的管理功能模块之间的互斥关系,管理内存,完成不同的功能模块…

ZBC通证月内已翻倍,Nautilus Chain 上线前夕的“开门红”

近日,Zebec Protocol生态通证ZBC迎来了大涨,据悉该通证月内最高涨幅接近了100%,为一众投资者、社区用户、Zepoch节点等带来了可观的回报,并为生态发展注入了十足的信心。我们看到,Zebec Protocol生态在近期宣布了“销毁…

D1s RDC2022纪念版开发板开箱评测及点屏教程

作者new_bee 本文转自:https://bbs.aw-ol.com/topic/3005/ 目录 芯片介绍开发板介绍RT-Smart用户态系统编译使用感想引用 1. 芯片介绍 RISC-V架构由于其精简和开源的特性,得到业界的认可,近几年可谓相当热门。操作系统方面有RT-Thread&am…

Kubernetes 如何通过ingress-nginx实现应用灰度发布?

在日常的工作中,我们会经常对应用进行发版升级,在互联网公司尤为频繁,主要是为了满足快速的业务发展。我们经常用到的发布方式有滚动更新、蓝绿发布、灰度发布。滚动更新:依次进行新旧替换,直到旧的全部被替换为止。蓝…

FATFS函数浅谈 看完学会FATSFS,建议收藏

目录 一、注册工作区域 二、打开文件夹 三、读取文件夹 四、打开\新建一个文件 五、读取文件 六、写文件 七、移动文件指针 八、截断文件 九、刷新缓存消息 十、新建文件夹 十一、删除文件或文件夹 十二、重命名\移动文件或文件夹 十三、获取文件信息 十四、改变…

KNN算法及Python实现

0 建议学时 2学时 1 KNN算法 1.1 KNN原理 KNN:K Nearest Neighbors,即K个最近的邻居; 预测一个新值xxx,根据距离最近的K个点的类别来判断xxx属于哪一类。 算法核心要点: K值的选取非常重要; 距离公式…

山东大学电磁场与电磁波期末试题

文章目录一、电磁场的基本规律二、静态电磁场及其边值问题的解三、分离变量法四、均匀平面波的反射与透射五、时变电磁场与均匀平面波在无界空间中的传播六、导行电磁波七、电磁辐射往年真题回忆复习建议一、电磁场的基本规律 设在 x<0x<0x<0 处为真空&#xff0c;x&…

LeetCode分类刷题----回溯算法

回溯1.回溯问题77.组合216.组合总和|||17.电话号码的字母组合39.组合总和40.组合总和||131.分割回文串93.复原IP地址78.子集90.子集||491.递增子序列46.全排列47.全排列||51.N皇后37.解数独1.回溯问题 77.组合 思路&#xff1a; 回溯的本质是用一棵树来描述&#xff0c;用pat…

Gitee码云 操作

1&#xff1a;Git团队协作机制1.1&#xff1a;团队内协作1.2&#xff1a;跨团队协作2&#xff1a;Gitee码云 操作码云网址&#xff1a; https://githee.com/2.1&#xff1a;创建远程仓库2.2&#xff1a;远程仓库操作命令名称作用git remote -v查看当前所有远程地址别名git remo…

Java缓存面试题——Redis应用

文章目录1、为什么要使用Redis做缓存&#xff1f;2、为什么Redis单线程模型效率也能那么高&#xff1f;3、Redis6.0为什么要引入多线程呢&#xff1f;4、Redis常见数据结构以及使用场景字符串&#xff08;String&#xff09;哈希(Hash)列表&#xff08;list&#xff09;集合&am…