JS三座大山 —— 原型和原型链

系列文章目录

内容链接
2023前端面试笔记HTML5
2023前端面试笔记CSS3

文章目录

  • 系列文章目录
  • 前言
  • 一、原型是什么?
  • 二、原型链是什么?
    • 2.1 原型链全方面解析
    • 2.2 为什么构造函数也有原型?
  • 总结


前言

理解原型和原型链可以帮助我们更好地理解 JavaScript 中的面向对象编程,实现属性和方法的共享和继承。同时,掌握原型和原型链的知识也是深入学习 JavaScript 的关键。


一、原型是什么?

在 JavaScript 中,每个对象(除了 null 和 undefined)都有一个原型对象(prototype)。原型对象是一个普通的对象,它包含了共享的属性和方法。

现在有1个类A,我想要创建一个类B,这个类B是以类A为原型的,并且能进行扩展。我们称B的原型为A。

  class Student {constructor(name, score) {this.name = name;this.score = score;}introduce() {console.log(`我是${this.name},我考了${this.score}`);}}const student = new Student("张三", 99);

现在有一个Student类,以及它的实例化对象student,当你在student身上使用了它不存在的属性或方法,就会去隐式原型对象__proto__上找
__proto__ =>(指向student实例化对象的原型 => Student类)
在这里插入图片描述

student这个实例化对象身上并没有introduce方法,但是它却能够使用,因为它的隐式原型对象__proto__身上有该方法,__proto__之所以有该方法,是因为它指向的是Student类的原型对象,而原型对象身上有introduce方法
在这里插入图片描述
student实例化对象的隐式原型对象全等于Student类的显示原型对象
在这里插入图片描述

   function person(name, age) {this.name = name;this.age = age;}person.prototype.saying = function () {console.log("你好呀,我是person显示原型对象上的saying函数");};person.prototype.work = "前端开发工程师";const p1 = new person("前端百草阁", 21);

在这里插入图片描述
这里把saying方法挂到了p1的原型身上,我们也可以挂到person构造函数的身上,但是这样就会有一个问题,每次调用构造函数时都会为新的对象创建一个新的方法。如果有多个对象实例,它们将各自拥有自己的方法。这可能会导致内存占用增加,因此在一些情况下,将方法定义在构造函数的原型上更为常见和推荐。

   function person(name, age) {this.name = name;this.age = age;this.saying = function () {console.log("");};}const p1 = new person("前端百草阁", 21);

在这里插入图片描述

在这里插入图片描述

二、原型链是什么?

2.1 原型链全方面解析

就如上图所说,实例自身访问不到的属性或方法,就会往自己的原型身上找(proto
自己的原型找不到就会往原型的原型身上找,直到找到最顶端(Object)

   function person(name, age) {this.name = name;this.age = age;}person.prototype.saying = function () {console.log("你好呀,我是person显示原型对象上的saying函数");};person.prototype.work = "前端开发工程师";const p1 = new person("前端百草阁", 21);

在这里插入图片描述

  class Person {constructor(name) {this.name = name;}drink() {console.log("每个人都会喝水");}}const person = new Person("普通人");class Teacher extends Person {constructor(name, subject) {super(name);this.subject = subject;}teach() {console.log("每个老师都会教书");}}const teacher = new Teacher("哈基米老师", "猫猫课");

在这里的原型链中,如果你对teacher实例化对象使用了drink方法,对象本身是没有drink方法的,但是他可以通过原型链来查找,谁身上具有这个方法,把它拿过来使用
在这里插入图片描述

任何一个人都可以使用hasownproperty方法,因为他是原型链顶端Object身上的方法,所有人都可以访问到
如果指定的属性是对象的直接属性——即使值为 null 或者 undefined,hasOwnProperty() 方法也会返回 true。如果属性是继承的,或者根本没有声明该属性,则该方法返回 false。与 in 运算符不同的是,该方法不会在对象原型链中检查指定的属性。
在这里插入图片描述

这里附上我自己画的原型链继承图,用图看会清晰很多

在这里插入图片描述

Teacher.prototype.__proto__ === Person.prototype // true

2.2 为什么构造函数也有原型?

p1的原型是构造函数,不知道有没有小伙伴和我一样疑惑 对象有自己的原型很正常 为什么构造函数也有自己的原型呢

  • 函数——JavaScript最关键的概念

函数是第一类对象(first-class object),被称为一等公民。函数与对象共存,我们也可以认为函数就是其他任意类的对象。由此可见,对象有的功能,函数也会拥有

函数也是对象,唯一不同的地方在于,函数是可以调用的(invokable),也就是说函数会被调用以便执行某些动作。


总结

综上所述,构造函数通过 prototype 属性指向原型对象,原型对象包含了共享的属性和方法,而对象实例通过原型链(__proto__属性指向原型对象)继承了原型对象的属性和方法。通过 constructor 属性,我们可以追溯到对象实例的构造函数。这些概念共同构成了 JavaScript 中的原型继承机制

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

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

相关文章

后台管理系统:项目路由搭建与品牌管理

路由的搭建 先删除一些不需要的界面 然后发现跑不起来,我们需要去配置 删减成这样,然后自己新建需要的路由组件 改成这样,这里要注意。我们是在layout这个大的组件下面的,meta 中的title就是我们侧边栏的标题,icon可…

积分游戏小程序模板源码

积分游戏小程序模板源码是一款可以帮助用户快速开发小程序的工具,此模板源码包含五个静态页面,分别是首页、任务列表、大转盘、猜拳等五个页面,非常适合进行积分游戏等相关开发。 此模板源码的前端部分非常简单易用,用户可以根据…

mongodb 分片集群部署

文章目录 mongodb 分片部署二进制安装三台config 配置shard 分片安装shard1 安装shard2 安装shard3 安装mongos 安装数据库、集合启用分片创建集群认证文件创建集群用户部署常见问题 mongodb 分片部署 二进制安装 mkdir -p /data/mongodb tar xvf mongodb-linux-x86_64-rhel7…

数据通信——传输层TCP(可靠传输原理的ARQ)

引言 上一篇讲述了停止等待协议的工作流程,在最后提到了ARQ自动请求重传机制。接下来,我们就接着上一篇的篇幅,讲一下ARQ这个机制 还是这个图来镇楼 ARQ是什么? 发送端对出错的数据帧进行重传是自动进行的,因而这种…

C语言每日一练----Day(13)

本专栏为c语言练习专栏,适合刚刚学完c语言的初学者。本专栏每天会不定时更新,通过每天练习,进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字:数字颠倒 单词倒排 💓博主csdn个人主页:小小uni…

k8s 查看加入主节点命令 k8s重新查看加入节点命令 k8s输入删除,重新查看加入命令 kuberadm查看加入节点命令

1. 使用kuberadm 安装成功后,clear清除了屏幕数据,加入命令无法查看,使用如下,重新查看node如何加入主节点命令: kubeadm token create --print-join-command --ttl 0 2.画圈的全部是,都复制,在…

css中文本阴影特效

文字颜色渐变 .text-clip{color:transparent;font-size: 40px;font-weight: bold;background: linear-gradient(45deg, rgba(0,173,181,1) 0%, rgba(0,173,181,.4) 100%);-webkit-background-clip: text; } 文字模糊 .text-blurry{text-align: center;color: transparent;text-…

Android修改默认gradle路径

Android Studio每次新建项目,都会默认在C盘生成并下载gradle相关文件,由于C盘空间有限,没多久C盘就飘红了,于是就需要把gradle相关文件转移到其他盘 1、到C盘找到gradle文件 具体路径一般是:C:\Users\用户\ .gradle …

[第七届蓝帽杯全国大学生网络安全技能大赛 蓝帽杯 2023]——Web方向部分题 详细Writeup

Web LovePHP 你真的熟悉PHP吗&#xff1f; 源码如下 <?php class Saferman{public $check True;public function __destruct(){if($this->check True){file($_GET[secret]);}}public function __wakeup(){$this->checkFalse;} } if(isset($_GET[my_secret.flag]…

VR司法法治教育平台,沉浸式课堂教学培养刑侦思维和能力

VR司法法治教育平台提供了多种沉浸式体验&#xff0c;通过虚拟现实(Virtual Reality&#xff0c;简称VR)技术让用户深度参与和体验法治知识。以下是一些常见的沉浸式体验&#xff1a; 1.罪案重现 VR司法法治教育平台可以通过重现真实案例的方式&#xff0c;让用户亲眼目睹罪案发…

RabbitMq深度学习

什么是RabbitMq? RabbitMQ是一个开源的消息队列中间件&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;。它被广泛用于分布式系统中的消息传递和异步通信。RabbitMQ提供了一种可靠的、可扩展的机制来传递消息&#xff0c;使不同的应用程序能够相互之间进行…

AR界安卓在中国,Rokid引爆空间计算狂潮

击关注 文丨刘雨琦 你可能很难想象&#xff0c;在一个没有显示屏也没有鼠标的空间&#xff0c;仅凭一副AR眼镜和一台口袋主机&#xff0c;就能完成一篇5000字的文章。 没错&#xff0c;8月26日&#xff0c;在2023 Rokid Jungle 新品发布会现场&#xff0c;这样的场景正在真实…

【C++进阶(二)】STL大法--vector的深度剖析以及模拟实现

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; vector 1. 前言2. 熟悉vector的接口函数2.1 vec…

R语言响应面(RSM)、线性模型lm分析生产过程影响因素可视化

全文链接&#xff1a;https://tecdat.cn/?p33499 响应面&#xff08;Response Surface Methodology&#xff0c;RSM&#xff09;分析是一种常用的统计方法&#xff0c;用于研究和优化生产过程中的影响因素。通过建立数学模型来描述因素与响应之间的关系&#xff0c;RSM可以帮助…

用Cmake build OpenCV后,在VS中查看OpenCV源码的方法(环境VS2022+openCV4.8.0) Part III

用Cmake build OpenCV后&#xff0c;在VS中查看OpenCV源码的方法(环境VS2022openCV4.8.0) Part III 用Cmake build OpenCV后&#xff0c;在VS中查看OpenCV源码的方法&#xff08;环境VS2022openCV4.8.0&#xff09; Part I_松下J27的博客-CSDN博客 用Cmake build OpenCV后&…

③matlab向量和矩阵

目录 手动输入数组 创建等间距向量 数组创建函数 手动输入数组 1.背景 单个称为标量的数值实际上是一个 11 数组&#xff0c;也即它包含 1 行 1 列。 任务 创建一个名为 x 并且值为 4 的变量。 2.您可以使用方括号创建包含多个元素的数组。 x [3 5] x 3 5 任务 …

Python钢筋混凝土结构计算.pdf-混凝土构件计算

计算原理&#xff1a; 代码实现&#xff1a; #钢筋混凝土参数 def c_hrb(): global fcuk,HRB,Ec,fc,ft,ftk,Es,fy,fyp,fyk global a1,epsilon_cu fcukEcfcftftk0.0 HRBEsfyfypfyk0.0 #矩形应力图系数a1&#xff0c;C50以下为1.0 a11.0 #正截面混凝土极限压应变epsilon_cu&#…

uni-app+uView实现点击查看大图片的效果

<u-button text"月落" click"imgPreview()"></u-button> //注意&#xff1a;参数urls 是预览图片的链接地址&#xff0c;是个数组 imgPreview() {uni.previewImage({indicator: "none",loop: false,urls: []&#xff0c;}) },参数说…

纵行科技与山鹰绿能达成合作,提供物联网资产管理数据服务

近日&#xff0c;纵行科技与山鹰绿能宣布双方达成深度合作关系&#xff0c;纵行科技将为山鹰绿能提供专业的物联网技术服务&#xff0c;使用物联网技术帮助山鹰绿能对循环包装载具等资产进行在线管理和数字化运营。 据悉&#xff0c;山鹰绿能是一家由山鹰国际控股的全资子公司…

Kafka3.0.0版本——Follower故障处理细节原理

目录 一、服务器信息二、服务器基本信息及相关概念2.1、服务器基本信息2.2、LEO的概念2.3、HW的概念 三、Follower故障处理细节 一、服务器信息 三台服务器 原始服务器名称原始服务器ip节点centos7虚拟机1192.168.136.27broker0centos7虚拟机2192.168.136.28broker1centos7虚拟…