42.原型对象 prototype
目录
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 面向对象与面向过程 编程思想有 面向过程 与 面向…...

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

香橙派pi5下,debian,docker19.03.9版本runc容器逃逸
在香橙派pi5下,debian,docker19.03.9版本下,安装系统后,启动docker,显示一切正常。 当加入k8s集群以后,可以正常连接到集群,node状态显示为ready。看起来一切正常。不过过一会之后,香橙派节点内存飙升,然后挂掉。重连失败,需要重启后才能重连。且swapoff -a命令执行…...
Thinkphp6.0中间件.上
本节课我们来学习一下中间件的用法,定义一下中间件。 一.定义中间件 1. 中间件的主要用于拦截和过滤 HTTP 请求,并进行相应处理; 2. 这些请求的功能可以是 URL 重定向、权限验证等等; 3. 为了进一步了解中间件的用法&…...
十进制到八进制的转换
目录 十进制到八进制的转换 程序设计 程序分析 十进制到八进制的转换 【问题描述】对于输入的任意一个非负十进制整数n(0=<n<100000),打印输出与其等值的八进制数 【输入形式】非负十进制整数 【输出形式】相应十进制整数转换后的八进制正整数,若输入不符合要求,…...

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

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

【目标检测】目标检测遇上知识图谱:Object detection meets knowledge graphs论文解读与复现
前言 常规的目标检测往往是根据图像的特征来捕捉出目标信息,那么是否有办法加入一些先验信息来提升目标检测的精准度? 一种可行的思路是在目标检测的输出加入目标之间的关联信息,从而对目标进行干涉。 2017年8月,新加波管理大学…...

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

【Unity入门】12.MonoBehaviour事件函数
【Unity入门】MonoBehaviour事件函数 大家好,我是Lampard~~ 欢迎来到Unity入门系列博客,所学知识来自B站阿发老师~感谢 (一)常用的事件函数 (1)start和update方法 之前我们写的脚本,会默认帮助…...
1.3 Docker Compose-详细介绍
Docker Compose是一个用于定义和运行多个Docker容器的工具。它可以让用户轻松地定义和管理多个容器的配置,并且可以通过简单的命令来启动、停止和重启这些容器。在本文中,我们将详细介绍Docker Compose的使用和功能。 一、Docker Compose的安装 Docker…...

数据分析:麦当劳食品营养数据探索并可视化
系列文章目录 作者:i阿极 作者简介:Python领域新星作者、多项比赛获奖者:博主个人首页 😊😊😊如果觉得文章不错或能帮助到你学习,可以点赞👍收藏📁评论📒关注…...
ES6标准
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准 前端es6是模块化开发;es6模块化规范就是浏览器端与服务器端通用的模块化开发规范,其中定义了每一个JavaScript文件都是一个独立的模块,导入其他模块成员…...

ASP一个物流商品运输系统的设计与实现
物流运输行业的今天正朝着追求高效、低成本、稳定可靠的方向发展。本文详细介绍了网上物流管理系统,涉及到客户端运输线路设计、过程跟踪等功能模块以及管理员端的相应模块的具体实现,分析了整个系统的架构、工作原理、实现功能等。系统采用ASPMS SQL以B…...
肖 sir_就业课__009ui自动化讲解
ui自动化讲解 1、你做过自动化测试吗?做过 ui自动化测试、接口自动化、app自动化 2、你讲下你做的ui接口自动化? (1)第一种:按照线性流程讲解 :pythonselenium 库做ui自动化 (2)第二…...
「线性DP」花店橱窗
花店橱窗 https://ac.nowcoder.com/acm/contest/24213/1005 题目描述 小q和他的老婆小z最近开了一家花店,他们准备把店里最好看的花都摆在橱窗里。 但是他们有很多花瓶,每个花瓶都具有各自的特点,因此,当各个花瓶中放入不同…...
数组的去重方法
1、ES6的Set方法去重 new Set是ES6新推出的一种类型。它和数组的区别在于,Set类型中的数据不可以有重复的值。当然,数组的一些方法Set也无法调用。 使用方法:将一个数组转化为Set数据,再转化回来,就完成了去重。 cons…...

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

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

【LeetCode】剑指 Offer(29)
目录 题目:剑指 Offer 56 - II. 数组中数字出现的次数 II - 力扣(Leetcode) 题目的接口: 解题思路: 代码: 过啦!!! 题目:剑指 Offer 57. 和为s的两个数…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

Linux 中如何提取压缩文件 ?
Linux 是一种流行的开源操作系统,它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间,使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的,要在 …...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

Web后端基础(基础知识)
BS架构:Browser/Server,浏览器/服务器架构模式。客户端只需要浏览器,应用程序的逻辑和数据都存储在服务端。 优点:维护方便缺点:体验一般 CS架构:Client/Server,客户端/服务器架构模式。需要单独…...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...