JS 原型的原理

news2024/11/24 6:10:55

接下来,我们要说一个很重要的东西,就是原型,也就是 prototype。

原型这个东西在 js 里面是非常有用的一个东西,也非常的重要。

对于前端来说,原型肯定不会陌生。

但是有几个问题:这玩意到底是干啥的?它的原理是什么?都用在哪里?

首先,这里用一句话特别明确的告诉大家:

原型这个东西,它可以给类添加或修改东西,这样的话,这个类它所有的实例就都会有这个东西,这是它的根本作用。

那么我们就直接来一个例子看看:
在这里插入图片描述
可以看到,当我们在数组的原型上面加了一个 a = ‘123’ 之后,它就有了。

最厉害的是,以后我再蹦出来一些别的数组实例,只要它还是个数组,那它上面就也会有这个 a:
在这里插入图片描述
这个就是原型的作用,它可以给类添加东西,添加完之后,这个类所 new 出来的,所有实例上面都有这个东西。
那么现在我们就有一个问题,怎么做到的,它的原理是什么?

它的原理其实非常的简单,就是在你这个实例需要某个东西的时候(这个东西可以是个属性,也可以是个方法),它是这样的一个顺序:
首先,从自己身上找, 如果自己身上有,那就直接拿来用。如果没有,它会继续去我的这个类身上找。如果类身上有,那自然就好。如果还没有,它还会再去父类的原型上面试着找一下。如果还没有,在往上找,一直找到最后,能找到 Object.prototype 上,这是它最终的一个归宿(因为 Object 其实是所有人间接的祖宗,它是最上面的)。一直找到 Object 身上,如果还没有,不好意思,undefined,没找到就是 undefined。
说白了,先在自己身上找,没有就找它爹要,找他爹其实就是在找它爹的原型,还没有,就找它爷爷,一直找到 Object 身上,还没有,就是 undefined。

既然了解了原型,那我什么时候会用到它?可以用它来干啥?

以前的时候可能还会用的多一点,现在有专门的class了,方法直接写里面,那还要原型干啥?

当然有用,用途也非常的简单,就是给类去添加方法。

一般情况下,分成 2 种用途:
1,添加一些公共的方法。
假设我现在有一个方法,它的作用是统计一下我这个字符串里面有几个 a,那么注意,我有两种方法来做这个事:

首先第一个方法,我可以把它封装成一个函数:
在这里插入图片描述
这种方法是可以的,但是有 2 个问题:

1,太啰嗦了。人家每次用的时候都是括号罗括号,如果层级深一点,变量名长一点,看起来就一大堆,很麻烦。

2,你直接把 function countA(){} 这个函数给露在全局外面,这个时候其实很容易重名的。

所以第二种方法可以这么来写,我们可以直接把它扔到原型上面去:
在这里插入图片描述
可以看到,一样的可以去解决问题。

并且,在用法上 str.countA() 比 countA(str) 用起来比较方便和自然。

而且最重要的是,不容易重名。因为如果是一个全局的变量,那就很容易重名。

比如现在这个是统计字符串的 a,如果我还有一个 countA 是用来统计数组有几个 a 的呢?
在这里插入图片描述
这样就不会重名。

所以,原型的第一种用途就是,可以去给一些类,不管是系统类,还是你自己的类,去添加一些公共的方法。
然后第二种用途就是,可以去修补系统的函数
什么意思呢?

这种用法其实用的还蛮多的,有人给它起了个专门的名词叫 polyfill,补充系统函数的功能
相信大家经常看到 polyfill 这个词,其对应的中文也有很多,比如适配器,垫片等等。刚开始的时候百思不得其解,啥玩意啊?
其实说白了,polyfill 就是兼容。
比如 map 函数在高级浏览器中是没问题的:
在这里插入图片描述
可以看到,这个结果在谷歌浏览器上面是 OK 的。

但是,低级浏览器是不认识 map 的,它是 ES6 才出现的函数,比如 IE:
在这里插入图片描述
那么如果我们用了这种方法之后,是不是在低级浏览器上也能使用 map 了:
在这里插入图片描述
就是这么简单。

当然这时候还有个问题,就是我们自己实现的方法,虽然说功能是一致的,但是它的性能远不如原生提供的方法来的高。
所以,我们可以这么写:
在这里插入图片描述
说的直白点,如果本身你就有 map,那就用系统那套,因为系统那套性能高。

如果没有,Array.prototype.map 是 undefined,那我就用后面自己实现的这个。

这样的话,既照顾了低级浏览器,高级浏览器下面也还是用的系统那套,性能不会受到影响。

这个就是原型的一个用法。

到现在,我们基本上来说,就算是理解了原型各种各样的一些东西,那么我们来总结一遍:

原型在以前的版本当中,其实它更主要的是帮我们来实现这个类本身。

而现在,我们有了 class 之后,理论上,在我写这个类的时候,其实是用不着原型了,但是原型它自己也有很大的作用。

原型的作用其实非常的简单,就是给这个类去添加方法。
它不是去给某一个实例加,它是给类加东西,加完之后,所有的实例它都会有。

当然这里面我们不光要了解它的一个作用,我们也得知道它为什么能起这个作用,这个也是一件很重要的事。

这个过程其实特别的简单,当然这个过程不用我们来完成,都是由 js,由语言自身来支撑这些功能的,不用我们来做。

就是说它其实会往上找,就这三个字,就能体现它这功能的原理。
说白了就是说,它会先去找实例本身,如果有,那自然最好。如果没有,没关系,我可以找实例所对应的那个类,它的原型,然后找它的原型上有没有。如果还没有的话,它还会继续往上再来找,这样的一个过程。

所以说原型这个东西,其实也并不复杂。

然后原型的功能,或者说我们什么时候去用它,它一般来说有 2 个大用途:

  • 第一个,我可以去给这个类去添加一些公共的方法
  • 第二个,给系统类去打补丁。你有就用你的,因为系统自带的,肯定性能最高,没有就再用我这个。

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

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

相关文章

【论文笔记】图神经网络采样相关工作整理9.19

【论文笔记】图神经网络采样相关工作整理9.19 GraphSAGE NIPS2017 论文:Inductive Representation Learning on Large Graphs 目前引用数:11628 本文提出了一种称为GraphSAGE的新的图嵌入方法,该方法可以在大型图上进行高效的无监督和有监…

STM32F103RCT6学习笔记1:GPIO认识—点灯

今日开始快速掌握这款STM32F103RCT6芯片的环境与编程开发,有关基础知识的部分不会多唠,直接实践与运用!文章贴出代码测试工程与测试效果图: 目录 STM32F103RCT6参数解读: GPIO的基础认识与分类: 串口相…

新老用户看过来~最实用的 Milvus 迁移手册来啦!

毫无疑问,Milvus 已经成为全球诸多用户构建生产环境时必不可少的向量数据库。 近期,Milvus 发布了全新升级的 Milvus 2.3 版本,内核引擎加速的同时也加入了诸如支持 GPU 这样实用且强大的特性。可以说,以 Milvus 2.3 为代表的 Mil…

如何第一时间把DLL插件注入到目标进程

在windows下,把DLL插件注入到一个进程的方法有很多,比较常用的比如用远程线程(CreateRemoteThread)注入,或者用windows的API:SetWindowsHookEx来注入,如下图,可以用RemoteDll这个注入工具进行注入操作&…

【双分支混合CNN-transforme:Pansharpening】

DBCT-Net:A dual branch hybrid CNN-transformer network for remote sensing image fusion (DBCT-Net:一种用于遥感图像融合的双分支混合CNN-transformer网络) 遥感图像融合是指将高空间分辨率的单波段全色图像与光谱信息丰富的多光谱图像进行融合,生成…

HTTPS 的加密流程的总结

什么是HTTPS 和HTTP一样也是应用层协议,但在HTTP协议的基础上引入了一个加密层(SSL/TLS). HTTP协议内容都是按照文本的方式明文传输的这导致在传输过程第三方者能够轻易获取传输的内容,而HTTPS在HTTP协议基础上引入一个加密以防止传输内容泄露或被篡改。 因此HTTPS…

项目经理不容错过的一个认证——《研发效能(DevOps)工程师国家职业技术认证》

一、引言 在当今的商业环境中,软件研发已成为企业保持竞争力的关键因素之一。项目经理在软件研发中扮演着重要角色,而随着企业对于研发效率的追求,考取《研发效能(DevOps)工程师国家职业技术认证》对于项目经理的职业发展具有重要意义。本文…

许战海战略文库|无增长则消亡:大型制造集团增长困境

竞争环境不是匀速变化,而是加速变化。企业的衰退与进化、兴衰更迭在不断发生,这成为一种不可避免的现实。在过去的100年里,全球经济周期的时间长度明显缩短,周期内的波动也更为剧烈。联合国教科文组织的研究表明,18世纪知识更新的周期约为80到…

什么国产工作流引擎好?

要想提升办公协作效率,获得高效发展,可以借助低代码技术平台的力量。它的轻量级、灵活、易维护、好操作等优势特点都是现代化办公环境里的得力助手,也可以帮助大家打破信息孤岛,连接内部数据资源,为企业未来发展提供强…

在编译源码的环境下,搭建起Discuz!社区论坛和WordPress博客的LNMP架构

目录 一.编译安装nginx 二.编译安装MySQL 三.编译安装PHP 四.安装论坛 五.安装wordpress博客 六.yum安装LNMP架构(简要过程参考) 一.编译安装nginx 1)关闭防火墙,将安装nginx所需软件包传到/opt目录下 systemctl stop fire…

Xcode15+iOS17适配以及遇到的问题

今天更新了 Xcode15,遇到了一些问题,做下记录希望大家少走点坑。 1.iOS17 SDK 安装失败 Xcode更新完成后,打开项目一直显示 no fund iOS17 sdk,根据项目不同提示可能有区别,根据提示下载后提示安装失败,…

【vue+elementUI】输入框样式、选择器样式、树形选择器和下拉框样式修改

输入框样式、选择器样式和下拉框样式修改 1、输入框和选择器的样式修改:2、下拉弹框样式A. 选择器的下拉弹框样式修改B. 时间选择器的下拉弹框样式修改C. vue-treeselect树形下拉框样式 1、输入框和选择器的样式修改: 写在style中不能加scoped&#xff0…

力扣:103. 二叉树的锯齿形层序遍历(Python3)

题目: 给你二叉树的根节点 root ,返回其节点值的 锯齿形层序遍历 。(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行)。 来源:力扣(LeetCode&#…

远程监控电脑软件有哪些?远程桌面监控软件哪个好用

随着科技的发展,远程桌面监控软件已经成为企业和个人用户的重要工具。它们可以帮助用户在任何地方、任何时间监控和管理远程计算机。本文将详细介绍远程桌面监控软件是什么,有哪些常见的远程桌面监控软件。 首先,我们来了解一下什么是远程桌面…

win系统环境搭建(一)——Windows安装一些小工具

windows环境搭建专栏🔗点击跳转 win系统环境搭建(一)——Windows安装一些小工具 本系列windows环境搭建开始讲解如何给win系统搭建环境,本人所用系统是腾讯云服务器的Windows Server 2022,你可以理解成就是你用的wind…

gpu cuda 数组求和优化

欢迎关注更多精彩 关注我&#xff0c;学习常用算法与数据结构&#xff0c;一题多解&#xff0c;降维打击。 问题描述 给定1个数组&#xff0c;利用gpu求和并返回结果。 cpu 算法 #include <math.h> #include<vector> #include<time.h> #include <stdio…

了解:iperf网络性能测试工具

当进行网络性能测试时&#xff0c;可以使用iperf这个开源工具。iperf是一款网络测试工具&#xff0c;它能够测试TCP或UDP带宽质量&#xff0c;以及单向和双向吞吐量。使用iperf进行网络性能测试首先需要在被测试的两台计算机上安装iperf。 如何安装iperf&#xff1f; 在Debia…

HTTP请求行详解

目录 一、认识URL 二、认识方法 2.1 GET方法 2.2 POST方法 2.3 其他方法 请求行也就是HTTP请求的第一行&#xff0c;接下来将对第一行内容进行详细解释 一、认识URL 平时我们俗称的 "网址" 其实就是说的 URL (Uniform Resource Locator 统一资源定位符)。互联网上的…

利用哈希表封装unordered_map和unordered_set

目录 一、迭代器1.1 普通迭代器1.1.1 operator 1.2 const迭代器1.3 代码实现 二、封装unordered_set三、封装unordered_map 一、迭代器 1.1 普通迭代器 1.1.1 operator 对于哈希桶结构&#xff0c;它的迭代器应该如何设计呢&#xff1f;我们仅封装一个Node的指针就行了吗&am…

扬帆配资:首个国家层面电力现货市场 建设规则出炉

9月18日&#xff0c;国家发改委、国家动力局发布了已于近日印发的《电力现货商场底子规则&#xff08;试行&#xff09;》&#xff08;下称《规则》&#xff09;&#xff0c;作为国家层面的首个电力现货商场制作规则文件&#xff0c;推进构建全国一致电力商场系统。 扬帆配资&…