一文搞懂原型和原型链

在了解原型和原型链之前首先得明确它俩是什么东西:

原型:prototype
又称显示原型
1、原型是一个普通对象
2、只有构造函数才具备该属性
3、公有属性可操作

隐式原型:__proto__
1、只有对象(普通对象、函数对象)具备
2、私有的对象属性,不可操作

有了上面的概念之后,我们再来探讨一下什么是原型和原型链。

原型(显示原型) : prototype

我们定义一个字符串变量的时候,该字符串本身是不具备任何方法的,但是可以调用字符串方法。

let str = 'hello'  // new String()
console.log(str);
console.log(str.length);

在这里插入图片描述

其实我们在定义一个字符串变量的时候,隐式的实例化了new String()这个构造函数,所以我们才可以使用字符串方法。

 console.log(new String());

在这里插入图片描述

这个length就是String的原型方法ptototype,字符串本身有没有这个方法不重要,字符串的原型上有个方法就可以了。
原型的本质是一个普通对象,所以我们可以利用对象.属性的方式调用方法。
如果我们用字符串调用一个DCodes(),该方法在字符串属性上没有并不存在,调用该方法会报错。
在这里插入图片描述
我们给String的原型添加一个DCodes方法,字符串就可以调用该方法了。

String.prototype.DCodes = function(){
       console.log('你好DCodes');
}
str.DCodes() // 你好DCodes

利用原型可以干什么呢?上面也说了,构造函数才具备原型,我们创建一个构造函数,可以通过实例化这个构造函数来调用原型方法和原型属性。

// 构造函数
function Person(){
         this.name = '东方不败'
}
let per = new Person()
console.log(per);

在这里插入图片描述
原型的本质是一个对象,那么给Person这个原型添加一个方法

function Person(){
         this.name = '东方不败'
}
Person.prototype.sum = function(a,b){return a + b}
let per = new Person()
console.log(per);
console.log(per.sum(1,2));

在这里插入图片描述
构造函数记录了当前原型对象产生的归属,原型是基于那个构造函数构建的,那么constructor指向的就是那个构造函数,这里的constructor指向的就是Person()函数。


__proto__隐式原型

隐式原型只有对象(普通对象、函数对象)才具备,并且隐式原型是一个私有的对象属性,不可操作。
上面也提到过,我们定义了一个字符串,实际上是隐式的new String()String()的原型上有length,所以字符串可以调用length方法,显示原型prototype是构造函数才具备的,普通对象是没有的,那么普通对象是怎么调用构造函数的原型方法的呢?答案就是普通对象具有隐式原型,隐式原型全等于显示原型

let hello = 'hello'
console.log(hello.__proto__ === String.prototype);  // true

在这里插入图片描述
也就是说,普通对象的隐式原型__proto__等于构造函数的显示原型prototype,普通对象就可以调用构造函数的原型方法。
谷歌浏览器中,隐式原型__proto__的写法为: [[Prototype]]
在这里插入图片描述
到这里就构成了原型链,用字符串调用字符串方法的时候,字符串会在__proto__寻找对应的字符串方法,__proto__等于prototype,也就是String()构造函数,如果String()的构造函数没有该方法,那么String()会继续向上寻找,原型prototype是一个对象,那么对象就会有隐式原型__proto__String()的隐式原型__proto__Object(),然后会在Object()的原型prototype上寻找,如果Object()的原型prototype上不存在该属性,那么就会通过隐式原型__proto__继续向上寻找,直到找到对应的方法为止,如果没有找到,那么就会报错,该方法不存在。(这一段需要好好理解)
这样向上寻找,最终总会有尽头,万物的原型终点是谁呢?
字符串、数组、构造函数的原型最终都会指向Object,而Object的原型指向的是null
在这里插入图片描述

console.log(Object.prototype);

在这里插入图片描述

最后我们来看一下prototype、__proto__之间的关系:

__proto__ === prototype 
prototype == {}
{}.__proto__ == Object.prototype
......

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《Spring系列》第2章 解析XML获取Bean

一、基础代码 Spring加载bean实例的代码 public static void main(String[] args) throws IOException {// 1.获取资源Resource resource new ClassPathResource("bean.xml");// 2.获取BeanFactoryDefaultListableBeanFactory factory new DefaultListableBeanFa…

Airtest自动化测试工具实战演练

一开始知道Airtest大概是在年初的时候,当时,看了一下官方的文档,大概是类似Sikuli的一个工具,主要用来做游戏自动化的,通过截图的方式用来解决游戏自动化测试的难题。最近,移动端测试的同事尝试用它的poco库…

iwebsec靶场-命令执行漏洞

漏洞简介 命令执行漏洞(Command Injection)是一种常见的安全漏洞,也被称为代码注入漏洞。它允许攻击者将恶意代码注入到受攻击的应用程序中,从而可以在应用程序的上下文中执行任意命令。 命令执行漏洞通常出现在Web应用程序中&…

好的表单设计应该遵循什么规则?

在数字化时代,表单已经成为了人们生活中不可或缺的一部分。它们可能是网站注册表格、调查问卷、订单表格或者其他类型的表格。无论表单的类型是什么,都必须经过精心设计才能提供良好的用户体验。在本文中,我们将探讨如何设计一份用户体验好的…

Redis缓存双写一致性

目录双写一致性Redis与Mysql双写一致性canal配置流程代码案例双写一致性理解缓存操作细分缓存一致性多种更新策略挂牌报错,凌晨升级先更新数据库,在更新缓存先删除缓存,在更新数据库先更新数据库,在删除缓存延迟双删策略总结双写一致性 Redis与Mysql双写一致性 canal 主要是…

低代码开发公司:用科技强力开启产业分工新时代!

实现办公自动化,是不少企业的共同追求。低代码开发公司会遵循时代发展规律,注入强劲的科技新生力量,在低代码开发市场厚积爆发、努力奋斗,推动企业数字化转型升级,为每一个企业的办公自动化升级创新贡献应有的力量。 一…

【数据结构与算法】堆的实现(附源码)

目录 一.堆的概念及结构 二.接口实现 A.初始化 Heapinit 销毁 Heapdestroy B.插入 Heappush 向上调整 AdjustUp 1.Heappush 2.AdjustUp C.删除 Heappop 向下调整 AdjustDown D.堆的判空 Heapempty 堆顶数据 Heaptop 堆的大小 Heapsize 三.源码 Heap.h He…

【模板】带权并查集

文章目录1. 奇偶游戏2. 银河英雄传说1. 奇偶游戏 239. 奇偶游戏 题意: 依次给出多个区间的含 111 的个数的奇偶性,找出第一个不符合的答案的回答。 思路: 已知区间[a,b][a,b][a,b][b,c][b,c][b,c]的奇偶性,那么具有传递性&…

分享一个国内可用的免费ChatGPT网站(自己写的)

背景 ChatGPT作为一种基于人工智能技术的自然语言处理工具,近期的热度直接沸腾🌋。 作为一个程序员,我也忍不住做了一个基于ChatGPT的网站,免费!免登陆!!国内可直接对话ChatGPT,也…

10.线性表代码实战

10.1 与408关联解析及本节内容介绍 链表比顺序表出现的顺序更加的频繁。 10.2线性表地顺序表示原理解析 线性表的特点: (1)表中的元素的个数是有限的 (2)表中元素的数据类型相同。意味着每一个元素占用相同大小的空…

使用Dism++和360安全卫士搞定Windows10离线升级

Windows10有很多版本,常见的由1903、1909、20H1、21H2等,在离线状态下,很难下载到匹配的升级补丁。期间尝试多种方法均失败,最后用Dism和360安全卫士组合拳搞定。 1、使用下载补丁,升级失败 比如这里介绍了常见补丁&a…

【SL101】 传感器接入chirpstack平台

【SL101】 传感器接入chirpstack平台使用硬件SL100工程师答疑chirpstack 中 net-server 使能 80-87 频段网关开启80-87 频段设备传感器端配置频点连接成功测试结果---chirpstackSL100系列温湿度传感器产品(墨水屏版)接入chirpstack 平台笔记记录 使用硬件…

mysql学习之数据系统概述

☀️马上要成为打工人,这几天把前面的知识都捡了捡,发现自己对关系数据库这块的学习还有所缺失,于是本章开始学习mysql 这里写目录标题1. 数据库系统的发展1.1 人工管理阶段1.2 文件系统阶段1.3 数据库阶段1.4 大数据阶段2 数据库系统的组成2…

了解这7个Node.js库,让你的开发效率提升不止一点点

Node.js是一个流行的JavaScript运行时环境,拥有庞大的生态系统和丰富的库,使得在Node.js上构建高效、可靠的应用程序变得非常容易。在这篇文章中,我们将分享七个有用的Node.js库,它们可以提高您的工作效率,让您更轻松地…

android:手搓一个即时消息聊天框(包含消息记录)

先看一下效果 1.后端 要实现这个,先说一下后端要实现的接口 1.创建会话id 传入“发送id”和“接收id”给服务端,服务端去创建“会话id” 比如 get请求:http://xxxx:8110/picasso/createSession?fromUserId1&toUserId2 返回seesionId…

【SSconv:全色锐化:显式频谱-空间卷积】

SSconv: Explicit Spectral-to-Spatial Convolution for Pansharpening (SSconv:用于全色锐化的显式频谱-空间卷积) 全色锐化的目的是融合高空间分辨率的全色(PAN)图像和低分辨率的多光谱(LR-MS&#xff…

HTML5 Web 存储

HTML5 Web 存储 在HTML5之前,主要是使用cookies存储,cookies的缺点有:需要在请求头上带着数据,存储大小不过,在4k之内。本节, HTML5 web 存储,一个比cookie更好的本地存储方式。 什么是 HTML5 …

Redis技术详解

Redis技术详解 Redis是一种支持key-value等多种数据结构的存储系统。可用于缓存,事件发布或订阅,高速队列等场景。支持网络,提供字符串,哈希,列表,队列,集合结构直接存取,基于内存&…

Proxmox VE 超融合集群虚拟的NFS服务性能很差的问题解决

作者:田逸(formyz) 场景描述 五节点Proxmox VE集群,万兆网络,数据网络与存储网络独立,接口两两bond,交换机堆叠。 单机配置两颗AMD 宵龙CPU,核心数48,单台线程数192,单台…

服务器版RstudioServer安装与配置详细教程

Docker部署Rstudio server 背景:如果您想在服务器上运行RstudioServer,可以按照如下方法进行操作,笔者测试时使用腾讯云服务器(系统centos7),需要在管理员权限下运行 Rstudio 官方提供了使用不同 R 版本的 …