当前位置： 首页 > news >正文

42.原型对象 prototype

news 2026/2/7 14:42:50

目录

1  面向对象与面向过程

2  原型对象 prototype

3  在内置对象中添加方法

4  constructor 属性

5  实例对象原型 __proto__

6  原型继承

7  原型链与instanceof

7.1  原型链

7.2  instanceof

8  案例-模态框

1  面向对象与面向过程

编程思想有 面向过程 与 面向对象，我们举个把大象从冰箱中拿出来的例子

面向过程就是 开冰箱门->把大象拿出来->关冰箱门 这三个步骤的代码自己写

面向对象就是 找一个会 开冰箱门->把大象拿出来->关冰箱门 的人，写代码的时候只写找人这一步（封装有可能得自己封装）

简单理解就是 面向对象将过程封装成一个整体，每次使用的时候使用整体。面向过程每次使用的时候使用若干个过程

面向对象有三个特性，封装性，继承性，多态性

我们通过下面这个图可以简单理解一下

面向过程与面向对象各有千秋，前端主要用面向过程

2  原型对象 prototype

prototype是构造函数的一个属性，实例对象中没有prototype

JS中通过构造函数体现面向对象的封装性

在构造函数中封装方法会造成内存浪费，因为用构造函数中创造的每个对象都是独立的，创建了两个对象就会有两个方法占用两个内存空间，创建了十个对象就会占用十个内存空间

原型可以让相同的方法放在同一个内存空间中，JS规定每一个构造函数都有一个prototype属性，这个属性指向的是一个对象，所以我们称其为原型对象

我们可以将方法挂载在prototype中，这样方法就会存放在相同的内存空间中

构造函数和原型中的this指向的都是实例化对象

3  在内置对象中添加方法

我们之前用的方法，比如str.split()实质上是str.prototype.split()，我们现在想在内置对象Array添加sum()方法，以便让数组中所有的数字都加起来

4  constructor 属性

每一个实例对象都有constructor属性，constructor属性指向该实例对象的构造函数

constructor是实例对象的一个属性。

构造函数也有constructor，构造函数也是被构造出来的，我们写的构造函数的constructor同样指向上一级构造函数。

原型对象(prototype)也有constructor属性，他的属性内容与实例对象的属性内容相同，都指向实例对象的构造函数

constructor属性可以帮助我们批量增加构造函数中的函数，如果我们不适用constructor，我们可以这样写

上面的写法在创造多个方法的时候会很麻烦，也可以下面这样写

上面那样写很方便，但是会丢失掉constructor属性

我们可以这样写添加construcor属性

这样就可以做到无丢失属性添加方法了

5  实例对象原型 __proto__

__proto__是实例对象的一个属性，构造函数也有__proto__，构造函数也是被构造出来的，我们写的构造函数的__proto__同样指向上一级的对象原型

在实例对象中都有一个属性__proto__指向构造函数的prototype原型对象，这个是 实例对象 可以使用 原型属性与方法的原因

  • 有时候我们会看到 [[prototype]]，[[prototype]]与__proto__意义相同

实例对象的__proto__与构造函数的prototype相同

__proto__只能读取不能修改

6  原型继承

我们现在有一个对象Person，然后创建一个构造函数Man，将Person赋值给Man的原型对象，然后再加一个属性

其中eays与head都是从Person中继承的属性，放在__proto__中。name是自己的属性

像上面那样写，如果你再创建一个对象，对象a与对象b，彼此不相互影响

原型继承不只有这一种方式，但大体上功能差不多

7  原型链与instanceof

7.1  原型链

原型链实际就是继承顺序，最大的是Object，Object再使用proto向上指会得到null，其余的原型对象使用proto均会得到上一级的原型对象

在使用属性的时候，代码会先找你当前级有没有这个属性，如果没有就去你的父类里找，如果都没有才会报错

7.2  instanceof

instanceof的左侧是 类a(或实例对象)，右侧是 类b（不能是实例对象）。意思是 类a属不属于类b

我们再搞一个不属于的例子

下面这个是true

下面这个是false，这个我也不清楚为什么是false

下面这个是true

8  案例-模态框

这里我们使用面向对象的思想，这种思想也就是前端框架中组件的思想

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.Tip_window {position: relative;width:200px;height:100px;margin:100px auto;border:1px solid gray;padding:5px;}.Tip_header button {position: absolute;right:3px;top:0px;font-size:20px;border:1px solid transparent;background-color: transparent;}.Tip_body {margin-top:20px;text-align: center;}</style>
</head>
<body><button id="delete">删除</button><button id="login">登录</button>
</body>
<script>function Tip_window(Tip_header_content='',Tip_body_content='') {this.Tip_window = document.createElement('div')this.Tip_window.className = 'Tip_window'this.Tip_window.innerHTML = `<div class="Tip_header">${Tip_header_content}<button>x</button></div><div class="Tip_body">${Tip_body_content}</div>`}Tip_window.prototype.open = function() {document.body.append(this.Tip_window)this.Tip_window.querySelector('.Tip_header button').addEventListener('click',() => {this.close()})}Tip_window.prototype.close = function() {this.Tip_window.remove()}document.querySelector('#delete').addEventListener('click',function() {const del_Tip_window = new Tip_window('温馨提示','您没有权限删除操作')del_Tip_window.open()})document.querySelector('#login').addEventListener('click',function() {const login_Tip_window = new Tip_window('友情提示','您还没有注册')login_Tip_window.open()})
</script>
</html>

这里使用了箭头函数，箭头函数是this指向上一级的this，由于我们的open使用function写的，所以箭头函数的this一直往上找，找到open的this，也就是Tip_window 就停了

如果使用了function，那么this则指向函数的使用者，也就是 .Tip_header button

相关文章：

42.原型对象 prototype

目录 1 面向对象与面向过程 2 原型对象 prototype 3 在内置对象中添加方法 4 constructor 属性 5 实例对象原型 __proto__ 6 原型继承 7 原型链与instanceof 7.1 原型链 7.2 instanceof 8 案例-模态框 1 面向对象与面向过程 编程思想有 面向过程 与 面向…...

编程日记 2023/4/16 20:48:46

python 读写txt方法

​​​​​​​ 1. Python支持在程序中读写 txt文件。这里有两种方式&#xff1a; 方式一&#xff1a;使用 python内置函数&#xff0c;该函数将一个字符串的长度转换为与这个字符串长度相关的值。 例如&#xff1a;" readme"&#xff08;"r&#xff09;。 prin…...

编程日记 2023/4/16 20:43:45

香橙派pi5下，debian，docker19.03.9版本runc容器逃逸

在香橙派pi5下，debian，docker19.03.9版本下，安装系统后，启动docker，显示一切正常。 当加入k8s集群以后，可以正常连接到集群，node状态显示为ready。看起来一切正常。不过过一会之后，香橙派节点内存飙升，然后挂掉。重连失败，需要重启后才能重连。且swapoff -a命令执行…...

编程日记 2023/4/16 20:38:44

Thinkphp6.0中间件.上

本节课我们来学习一下中间件的用法&#xff0c;定义一下中间件。 一&#xff0e;定义中间件 1. 中间件的主要用于拦截和过滤 HTTP 请求&#xff0c;并进行相应处理&#xff1b; 2. 这些请求的功能可以是 URL 重定向、权限验证等等&#xff1b; 3. 为了进一步了解中间件的用法&…...

编程日记 2023/5/29 21:52:36

十进制到八进制的转换

目录 十进制到八进制的转换 程序设计 程序分析 十进制到八进制的转换 【问题描述】对于输入的任意一个非负十进制整数n(0=<n<100000)，打印输出与其等值的八进制数 【输入形式】非负十进制整数 【输出形式】相应十进制整数转换后的八进制正整数，若输入不符合要求，…...

编程日记 2023/5/31 21:13:25

【从零开始学Skynet】基础篇（四）：网络模块常用API

游戏服务端要处理客户端请求&#xff0c;作为服务端引擎&#xff0c;网络编程也是Skynet的核心功能。1、学习网络模块 skynet.socket模块提供了网络编程的API&#xff0c;常用的API如下表所示&#xff1a;Lua API说明socket.listen(address ,port)监听一个端口&#xff0c;返回…...

编程日记 2023/4/16 20:23:40

怎么免费制作logo？logo免费设计在线生成，从此设计不求人

你有没有因为Logo制作而烦恼过&#xff1f;对于很多人来说&#xff0c;logo制作是一项比较大的工程&#xff0c;需要专门的设计师才能完成。但是请人设计费用高还很费时间&#xff0c;还需多次沟通修改。其实&#xff0c;我们可以自己免费制作logo&#xff0c;下面&#xff0c;…...

编程日记 2023/4/16 20:18:39

【目标检测】目标检测遇上知识图谱：Object detection meets knowledge graphs论文解读与复现

前言 常规的目标检测往往是根据图像的特征来捕捉出目标信息&#xff0c;那么是否有办法加入一些先验信息来提升目标检测的精准度&#xff1f; 一种可行的思路是在目标检测的输出加入目标之间的关联信息&#xff0c;从而对目标进行干涉。 2017年8月&#xff0c;新加波管理大学…...

编程日记 2023/4/16 20:13:38

IDEA重复下载SNAPSHOT包问题

问题现象 reimport 之后 状态栏显示resolving dependencies… 遇到某个比较大的快照包(33M)&#xff0c;同一天的第2个版本时 1.0-xxx-SNAPSHOT.时间戳-2 idea importer 会先分片下载 x.jar.part文件中&#xff0c;然后复制为x.jar吧 如图中所示&#xff0c;其实已经下载完了&…...

编程日记 2023/4/16 20:08:36

【Unity入门】12.MonoBehaviour事件函数

【Unity入门】MonoBehaviour事件函数 大家好&#xff0c;我是Lampard~~ 欢迎来到Unity入门系列博客&#xff0c;所学知识来自B站阿发老师~感谢 &#xff08;一&#xff09;常用的事件函数 &#xff08;1&#xff09;start和update方法 之前我们写的脚本&#xff0c;会默认帮助…...

编程日记 2023/4/16 20:03:34

1.3 Docker Compose-详细介绍

Docker Compose是一个用于定义和运行多个Docker容器的工具。它可以让用户轻松地定义和管理多个容器的配置&#xff0c;并且可以通过简单的命令来启动、停止和重启这些容器。在本文中&#xff0c;我们将详细介绍Docker Compose的使用和功能。 一、Docker Compose的安装 Docker…...

编程日记 2023/4/16 19:58:32

数据分析：麦当劳食品营养数据探索并可视化

系列文章目录 作者&#xff1a;i阿极 作者简介&#xff1a;Python领域新星作者、多项比赛获奖者&#xff1a;博主个人首页 &#x1f60a;&#x1f60a;&#x1f60a;如果觉得文章不错或能帮助到你学习&#xff0c;可以点赞&#x1f44d;收藏&#x1f4c1;评论&#x1f4d2;关注…...

编程日记 2023/4/16 19:53:30

ES6标准

ECMAScript 6.0&#xff08;以下简称 ES6&#xff09;是 JavaScript 语言的下一代标准 前端es6是模块化开发&#xff1b;es6模块化规范就是浏览器端与服务器端通用的模块化开发规范&#xff0c;其中定义了每一个JavaScript文件都是一个独立的模块&#xff0c;导入其他模块成员…...

编程日记 2023/4/16 19:48:29

ASP一个物流商品运输系统的设计与实现

物流运输行业的今天正朝着追求高效、低成本、稳定可靠的方向发展。本文详细介绍了网上物流管理系统&#xff0c;涉及到客户端运输线路设计、过程跟踪等功能模块以及管理员端的相应模块的具体实现&#xff0c;分析了整个系统的架构、工作原理、实现功能等。系统采用ASPMS SQL以B…...

编程日记 2023/4/16 19:43:27

肖 sir_就业课__009ui自动化讲解

ui自动化讲解 1、你做过自动化测试吗&#xff1f;做过 ui自动化测试、接口自动化、app自动化 2、你讲下你做的ui接口自动化&#xff1f; &#xff08;1&#xff09;第一种&#xff1a;按照线性流程讲解 &#xff1a;pythonselenium 库做ui自动化 &#xff08;2&#xff09;第二…...

编程日记 2023/4/16 19:38:26

「线性DP」花店橱窗

花店橱窗 https://ac.nowcoder.com/acm/contest/24213/1005 题目描述 ​ 小q和他的老婆小z最近开了一家花店&#xff0c;他们准备把店里最好看的花都摆在橱窗里。 ​ 但是他们有很多花瓶&#xff0c;每个花瓶都具有各自的特点&#xff0c;因此&#xff0c;当各个花瓶中放入不同…...

编程日记 2023/4/16 19:33:25

数组的去重方法

1、ES6的Set方法去重 new Set是ES6新推出的一种类型。它和数组的区别在于&#xff0c;Set类型中的数据不可以有重复的值。当然&#xff0c;数组的一些方法Set也无法调用。 使用方法&#xff1a;将一个数组转化为Set数据&#xff0c;再转化回来&#xff0c;就完成了去重。 cons…...

编程日记 2023/6/1 5:47:35

ESP32-LORA通信

文章目录好久没更新博客了&#xff0c;今天清明节&#xff0c;写个LORA通信。在此记念在天堂的外婆。祝她安好LORA通信简介一、模块二、使用步骤1.电脑通过USB串口模块联接LORA模块2.ESP32连接LORA通信进行收发通信3.电脑运行调试助手&#xff0c;ESP32运行代码。实现LORA通信测…...

编程日记 2023/5/31 3:32:22

博客首页效果

学习来自风宇blog的博客首页效果 全部用的基本上都是原生的html&#xff0c;css&#xff0c;js特别是flex布局的使用&#xff0c;主轴方向可以是横轴&#xff0c;也可以是纵轴&#xff0c;弹性项还可可以使用百分比sticky粘性布局&#xff0c;作为侧边栏&#xff0c;它不会超出…...

编程日记 2023/4/16 19:18:19

【LeetCode】剑指 Offer（29）

目录 题目&#xff1a;剑指 Offer 56 - II. 数组中数字出现的次数 II - 力扣&#xff08;Leetcode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;剑指 Offer 57. 和为s的两个数…...

编程日记 2023/4/16 19:13:18

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2026/2/5 19:40:10

数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化 ！

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

编程新知 2026/2/6 5:55:05

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

编程新知 2026/2/1 6:18:18

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

题目描述 给定一个整型数组，请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3，则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组，0<数组长度<= 100，0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

编程新知 2025/9/21 23:43:15

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...

编程新知 2026/1/15 17:33:18

本地部署drawDB结合内网穿透技术实现数据库远程管控方案

文章目录 前言1. Windows本地部署DrawDB2. 安装Cpolar内网穿透3. 实现公网访问DrawDB4. 固定DrawDB公网地址 前言 在数字化浪潮席卷全球的背景下&#xff0c;数据治理能力正日益成为构建现代企业核心竞争力的关键因素。无论是全球500强企业的数据中枢系统&#xff0c;还是初创…...

编程新知 2026/1/30 6:03:28

Faiss vs Milvus 深度对比：向量数据库技术选型指南

Faiss vs Milvus 深度对比&#xff1a;向量数据库技术选型指南 引言&#xff1a;向量数据库的时代抉择 在AI应用爆发的今天&#xff0c;企业和开发者面临着如何存储和检索海量向量数据的重大技术选择。作为当前最受关注的两大解决方案&#xff0c;Faiss和Milvus代表了两种不同…...

编程新知 2025/10/17 16:28:24