快速理解JS中的原型和原型链

news2024/11/18 18:36:51

快速理解JS中的原型和原型链

在我们学习JS的过程中,我们总会接触到一些词:“原型”,“原型链”。那么今天我就来带大家来学习学习原型和原型链的知识吧!

在开始之前,我们明确一下我们接下来想要学习的目标:

  • 什么是原型?
  • 什么是原型链?
  • 原型和原型链之间有什么关系?
  • 原型和原型链有什么作用?

原型

什么是原型呢?每个构造函数创建的对象都会在创建的时候自带(创建)一个 prototype 属性,这个属性是一个对象,这个对象就是我们要说的原型。是不是有点绕?来看下面这个例子:

function Person(){}										

Person.prototype.name="zhangsan"
Person.prototype.sayName=function(){
	console.log("lisi")
}

const p1 = new Person()
console.log(p1.name)//zhangsan
console.log(p1.__proto__)// {name:"zhnagsan"}
console.log(p1.constructor)// [Function: Person]
console.log(Person.prototype===p1.__proto__)// true
console.log(Person.prototype.contructor===Person)// true

从这个例子可以看出,p1 是构造函数Peron()的实例对象,而实例对象通过__proto__Personprototype 属性连接起来了。看到这里,你是不是还是很疑惑,它们两个怎么就连接起来了?这就需要了解一下下面的知识点了:

  • 构造函数通常会有两个原型对象,一个是隐式原型__proto__,一个是显示原型prototype。而隐式原型是每一个对象都会拥有的。
  • 原型的一个作用大致可以理解成作为实例对象和构造函数之间的桥梁,但是请注意:实例对象与构造函数原型有直接联系,但是实例对象和构造函数之间没有直接联系!
  • 使用原型对象的还有一个好处是,在它上面定义的属性和方法可以被对象实例共享。也就是Person.prototype上面的属性和方法都会共享给实例对象,而且一个原型对象可以有多个实例的指向。
  • Person.prototype是 Person 构造函数的原型
  • p1.__proto__是实例对象 p1 的隐式原型,通过隐式原型可以访问对象的原型
  • 如上所述,构造函数有一个prototype属性引用其原型对象,而这个原型对象也有一个constructor属性,引用这个构造函数。也就是两者相互循环引用。
    在这里插入图片描述

原型链

看完了上面内容,相信你已经对原型已经有了大概的了解,接下来我们进阶了解一下原型链吧。看完上面的内容其实就很好理解原型链了,我们知道在使用实例对象的时候可以使用一些方法,像 toString、valueOf等,但是我们并没有在实例对象中定义这些方法,那这些方法是那里来的呢,实际上这些方法都是实际对象通过原型链到Object那里“拿”的。当我们调用一个对象中没有定义的方法时,JS 引擎会沿着原型链向上查找,直到找到该方法或达到原型链的顶端。
在这里插入图片描述
所以原型链也就是上图中右边一直向上“链条"。

到这里,我相信大家已经可以回答文章开头所提出的几个问题了。

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

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

相关文章

Redis从入门到精通(八)Redis实战(五)分布式锁误删与原子性问题、Redisson

↑↑↑请在文章开头处下载测试项目源代码↑↑↑ 文章目录 前言4.4 分布式锁4.4.4 分布式锁的误删问题4.4.4.1 问题说明4.4.4.2 解决方案4.4.4.3 代码实现 4.4.5 Redis分布式锁的原子性问题4.4.5.1 问题说明4.4.5.2 解决方案4.4.5.3 代码实现 4.4.6 分布式锁小结 4.5 分布式锁-R…

C++要点细细梳理(下)(内存分配、异常处理、template和文件读写)

4. 类动态内存分配 4.1 C语言动态内存分配:malloc和free 4.2 C动态内存分配:new和delete 思考:定义一个对象和定义一个普通变量有何区别? 普通变量:分配足够空间即可存放数据对象:除了需要空间,还要构造/析构 类比:…

windows下部署mongoDB

目录 1. 下载zip安装包并解压:Download MongoDB Community Server | MongoDB 2. 在解压后的文件夹中新建文件夹data及下级文件夹db和log 3. 新建一个mongod.cfg文件,并配置以下内容 4. 在cmd中启动mongodb,并进行验证 5. 部署到本地服务器…

物联网实战--驱动篇之(二)Modbus协议

目录 一、modbus简介 二、功能码01、02 三、modbus解析 四、功能码03、04 五、功能码05 六、功能码06 七、功能码16 一、modbus简介 我们在网上查阅modbus的资料发现很多很杂,modbus-RTU ASCII TCP等等,还有跟PLC结合的,地址还分1开…

WCH恒沁单片机-CH32V307学习记录2----FreeRTOS移植

RISC-V 单片机 FreeRTOS 移植 前面用了 5 篇博客详细介绍了 FreeRTOS 在 ARM Cortex-M3 MCU 上是如何运行的。 FreeRTOS从代码层面进行原理分析系列 现在我直接用之前的 RISC-V MCU 开发板子(CH32V307VCT6)再次对 FreeRTOS 进行移植,其实也…

《图解Vue3.0》- 调试

如何对vue3项目进行调试 调试是开发过程中必备的一项技能,掌握了这项技能,可以很好的定义bug所在。一般在开发vue3项目时,有三种方式。 代码中添加debugger;使用浏览器调试:sourcemap需启用vs code 调试:先开启node服…

Android APP加固利器:深入了解混淆算法与混淆配置

Android APP 加固是优化 APK 安全性的一种方法,常见的加固方式有混淆代码、加壳、数据加密、动态加载等。下面介绍一下 Android APP 加固的具体实现方式。 混淆代码 使用 ipaguard工具可以对代码进行混淆,使得反编译出来的代码很难阅读和理解&#xff…

VMwear桥接网络正确配置+静态IP设置

1.桥接网络配置 很多时候在VMware安装完虚拟机之后,会发现配置的桥接网络没有起作用,如果是Linux下输入ifconfig发现只有ipv6的地址而没有ipv4,说明没有桥接没有启用成功,需要按照以下方式来设置 在VMware的左上角打开编辑&#…

注解式 WebSocket - 构建 群聊、单聊 系统

目录 前言 注解式 WebSocket 构建聊天系统 群聊系统(基本框架) 群聊系统(添加昵称) 单聊系统 WebSocket 作用域下无法注入 Spring Bean 对象? 考虑离线消息 前言 很久之前,咱们聊过 WebSocket 编程式…

Nuxt 3 项目中配置 Tailwind CSS

官方文档:https://www.tailwindcss.cn/docs/guides/nuxtjs#standard 安装 Tailwind CSS 及其相关依赖 执行如下命令,在 Nuxt 项目中安装 Tailwind CSS 及其相关依赖 npm install -D tailwindcss postcss autoprefixerpnpm install -D tailwindcss post…

字符迁移.

3.字符迁移【算法赛】 - 蓝桥云课 (lanqiao.cn) 问题描述 小蓝最近获得了一个长度为N 的字符串S,他对它爱不释手。 小桥为了考验小蓝对字符串的处理能力,决定给他提出一个挑战,她会进行 Q次操作: 每次操作给定三个整数 l , r , k …

Vue3调试

如何对vue3项目进行调试 调试是开发过程中必备的一项技能,掌握了这项技能,可以很好的定义bug所在。一般在开发vue3项目时,有三种方式。 代码中添加debugger;使用浏览器调试:sourcemap需启用vs code 调试:先开启node服…

夯实智慧新能源数据底座,TiDB Serverless 在 Sandisolar+ 的应用实践

本文介绍了 SandiSolar通过 TiDB Serverless 构建智慧新能源数据底座的思路与实践。作为一家致力于为全球提供清洁电力解决方案的新能源企业,SandiSolar面临着处理大量实时数据的挑战。为了应对这一问题,SandiSolar选择了 TiDB Serverless 作为他们的数据…

PostgrerSQL基本使用与数据备份

前言 上篇了解了 PostgrerSQL 数据库的部署PostgreSQL关系型数据库介绍与部署-CSDN博客,本篇将继续就其基本操作、备份与还原内容做相关介绍。 目录 一、数据库的操作 1. 本机登录 2. 开启远程登录 2.1 开放远程端口 2.2 编辑配置文件 2.3 修改配置密码 2.…

基于单片机高压输电线路微机保护系统设计

**单片机设计介绍,基于单片机高压输电线路微机保护系统设计 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机高压输电线路微机保护系统设计是一个涉及电力系统继电保护的复杂工程。该系统主要利用单片机作为控制核心&…

【深度学习】海洋生物数据集,图片分类

文章目录 任务描述数据收集数据处理模型训练指标评测web app代码和帮助 任务描述 收集9种以上的海洋生物图片,然后基于深度学习做一个分类模型,训练完成后,分类模型就可以对未知图片进行分类。 在之后随便传一张图片,分类模型就…

MySQL 50 道查询题汇总,足以巩固大部分查询(附带数据准备SQL、题型分析、演示、50道题的完整SQL)

目录 MySQL 50 道查询题,足以巩固大部分查询数据准备:创建表sql添加表数据sql 50道查询题目汇总01 - 05 题:1、查询 “01” 语文成绩比 “02” 数学成绩高的学生的信息及课程分数2、查询 "01语文课程"比"02数学课程"成绩…

【前端】JavaScript(概念+语法+形式+变量+数组+函数+作用域)

文章目录 JavaScript一、JavsScript概念1.JavaScript的开发方向2.JavaScript和CSS、HTML的关系3.JavaScript运行过程4.JavaScript的组成 二、JavaScript的语法1.JS的书写形式1.行内式2.内嵌式3.外部式4.注释5.输入输出1.prompt和alert2.输出: console.log 2.变量的使用1.创建变…

如何使用CSS构建一个瀑布流布局

如何使用CSS构建一个瀑布流布局 瀑布流布局是一种常见的网页布局方式,其中元素以不同的大小排列,且行与列之间没有不均匀的间隙。在瀑布流布局中,即使某一行或列中的元素较短,下一个元素也会占据空间。 如何实现瀑布流布局 实现…

双连通分量算法

1. 连通图概念 连通图:无向图任意两点之间存在通路。 强连通:有向图(前提)中,任意两点都有至少一条通路,则此图为强连通图。 弱连通图:将有向图的有向边换成无向边得到的图是连通图&#xff0c…