JS进阶——深入对象
构造函数
- 封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。
- 前面我们学过的构造函数方法很好用，但是 存在浪费内存的问题
原型
- 构造函数通过原型分配的函数是所有对象所 共享的。
- JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，所以我们也称为原型对象
- 这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存
- 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。
- 构造函数和原型对象中的this 都指向 实例化的对象
function Star(uname,age) {this.uname = unamethis.age = age
}
console.log(Star.prototype)//返回一个对象称为原型对象
Star.prototype.sing = function () {console.log('我会唱歌')
}
const ldh = new Star('刘德华',19)
const zxy = new Star('张学友',20)
console.log(ldh.sing === zxy.sing) //结果是true 示例:
Array.prototype.max = function () {return Math.max(...this)
}
console.log([1,2,3].sum())Array.prototype.sum = function(){return this.reduce((prev,item) => prev + item, 0)
}
console.log([1,2,3].sum())constructor 属性
每个原型对象里面都有个constructor 属性（constructor 构造函数）,该属性指向该原型对象的构造函数
使用场景：
如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.
但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了
此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。
function Star(name) {this.name = name
}
Star.prototype = {sing:function(){ console.log('唱歌') },dance:function(){ console.log('跳舞') }
}
console.log(Star.prototype.constructor) // 指向Objectfunction Star(name) {this.name = name
}
Star.prototype = {constructor:Starsing:function(){ console.log('唱歌') },dance:function(){ console.log('跳舞') }
}
console.log(Star.prototype.constructor) //指向Star对象原型
- __proto__ 是JS非标准属性
- [[prototype]]和__proto__意义相同
- 用来表明当前实例对象指向哪个原型对象prototype
- __proto__对象原型里面也有一个 constructor属性，指向创建该实例对象的构造函数
原型继承
const People = {head:1,eyes:2
}function Man() {}
function Woman() {}- 把男人女人公共的属性和方法抽取出来 People
- 然后赋值给Man的原型对象，可以共享这些属性和方法
- 注意让constructor指回Man这个构造函数
Man.prototype = People
Man.prototype.constructor = Man
const pink = new Man()
console.log(pink)Woman.prototype = People // {eyes: 2, head: 1}
Woman.prototype.constructor = Woman// 给女人添加一个方法 生孩子
Woman.prototype.baby = function () {console.log('宝贝')
}
const red = new Woman()
console.log(red)
4.解决：
function Person() {this.eyes = 2this.head = 1}function Woman() {}Woman.prototype = new Person() // {eyes: 2, head: 1} Woman.prototype.constructor = Woman// 给女人添加一个方法 生孩子Woman.prototype.baby = function () {console.log('宝贝')}const red = new Woman()console.log(red)// console.log(Woman.prototype)function Man() {}// 通过 原型继承 PersonMan.prototype = new Person()Man.prototype.constructor = Manconst pink = new Man()console.log(pink)综合案例
<!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>面向对象封装消息提示</title><style>.modal {width: 300px;min-height: 100px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);border-radius: 4px;position: fixed;z-index: 999;left: 50%;top: 50%;transform: translate3d(-50%, -50%, 0);background-color: #fff;}.modal .header {line-height: 40px;padding: 0 10px;position: relative;font-size: 20px;}.modal .header i {font-style: normal;color: #999;position: absolute;right: 15px;top: -2px;cursor: pointer;}.modal .body {text-align: center;padding: 10px;}.modal .footer {display: flex;justify-content: flex-end;padding: 10px;}.modal .footer a {padding: 3px 8px;background: #ccc;text-decoration: none;color: #fff;border-radius: 2px;margin-right: 10px;font-size: 14px;}.modal .footer a.submit {background-color: #369;}</style>
</head><body><button id="delete">删除</button><button id="login">登录</button><!-- <div class="modal"><div class="header">温馨提示 <i>x</i></div><div class="body">您没有删除权限操作</div></div> --><script>// 1. 模态框的构造函数function Modal(title = '', message = '') {// 公共的属性部分this.title = titlethis.message = message// 因为盒子是公共的// 1. 创建 一定不要忘了加 this this.modalBox = document.createElement('div')// 2. 添加类名this.modalBox.className = 'modal'// 3. 填充内容 更换数据this.modalBox.innerHTML = `<div class="header">${this.title} <i>x</i></div><div class="body">${this.message}</div>`// console.log(this.modalBox)}// 2. 打开方法 挂载 到 模态框的构造函数原型身上Modal.prototype.open = function () {if (!document.querySelector('.modal')) {// 把刚才创建的盒子 modalBox 渲染到 页面中 父元素.appendChild(子元素)document.body.appendChild(this.modalBox)// 获取 x 调用关闭方法this.modalBox.querySelector('i').addEventListener('click', () => {// 箭头函数没有this 上一级作用域的this// 这个this 指向 m this.close()})}}// 3. 关闭方法 挂载 到 模态框的构造函数原型身上Modal.prototype.close = function () {document.body.removeChild(this.modalBox)}// 4. 按钮点击document.querySelector('#delete').addEventListener('click', () => {const m = new Modal('温馨提示', '您没有权限删除')// 调用 打开方法m.open()})// 5. 按钮点击document.querySelector('#login').addEventListener('click', () => {const m = new Modal('友情提示', '您还么有注册账号')// 调用 打开方法m.open()})</script>
</body></html>相关文章：
JS进阶——深入对象
构造函数 封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。 前面我们学过的构造函数方法很好用，但是 存在浪费内存的问题 原型 目标：能够利用原型对象实现方法共享 构造函数通过原型分配的函数是所有对象所…...
Gitlab部署管理
一、安装 1.docker安装gitlab sudo docker run -d \-p 6080:80 -p 6022:22 \--name gitlab \--restart always \-v /srv/gitlab/config:/etc/gitlab \-v /srv/gitlab/logs:/var/log/gitlab \-v /srv/gitlab/data:/var/opt/gitlab \gitlab/gitlab-ce:latest2.存储说明 存储应…...
MyBatis 学习（二）之 第一个 MyBatis 案例
目录 1 配置 MyBatis 方式 1.1 XML 配置文件 1.2 Java 注解配置 1.3. Java API 配置 2 在 MySQL 中创建一张表 3 创建一个基于 Maven 的 JavaWeb 工程 4 编写 User 实体类 5 创建 Mybatis 全局配置文件 6 编写一个 DAO 或 Mapper 接口 7 编写 SQL 映射配置文件&#…...
30天自制操作系统（第21天）
21.1 攻克难题——字符串显示API 显示单个字符时，用 [CS:ECX] 的方式特意指定了 CS（代码段寄存器），因此可以成功读取 msg的内容。但在显示字符串时，由于无法指定段地址，程序误以为是 DS而从完全错误的内存地…...
linux系统Jenkins的安装
Jenkins安装 安装上传安装包解压包首次登录要去服务器查看密码，更改密码选择需要安装的插件设置Admin用户和密码安装完成 安装 上传安装包 上传 jdk17 tomcat jenkins.war的安装包 . 上传 tomcat安装包解压包 解压jdk tar xf jdk-11.0.18_linux-x64_bin.tar.gz解…...
【GStreamer】basic-tutorial-1：GstBus、GstMessage详解
【目录】郭老二博文之：图像视频汇总 1、先看示例 #include <gst/gst.h>int main (int argc, char *argv[]) {GstElement *pipeline;GstBus...
Python中的可变变量与不可变变量
python中的可变与不可变变量 一、变量的三个参数 就像区分一个人一样，同样都是张三，可能这个张三就不是那个张三。同一个变量是指的什么相同呢？ Python中的对象包含三个要素，id（内存地址），typ…...
OpenGL调用窗口，方向键和鼠标
9.2 OpenGL调用窗口，方向键和鼠标 9.2.1 opengl调用窗口 OpenGL调用窗口步骤： 第一步：初始化 GLFW，初始化OpenGL,初始化窗口，初始化上下文 第二步：设置窗口大小和位置，设置输入输出 第三步…...
fastAdmin表格列表的功能
更多文章，请关注：fastAdmin后台功能详解 | 夜空中最亮的星 FastAdmin是一款基于ThinkPHP5Bootstrap的极速后台开发框架。优点见开发文档 介绍 - FastAdmin框架文档 - FastAdmin开发文档 在这里上传几张优秀的快速入门图: 一张图解析FastAdmin中的表格列…...
用来检查 CUDA、Conda 和 PyTorch 的版本的python文件
提供的 Python 代码片段包括几个语句，用来检查 CUDA、Conda 和 PyTorch 的版本，以及一些与 CUDA 相关的系统配置。让我们分解一下：PyTorch 版本和配置：torch.__config__.show()：显示 PyTorch 的构建配置。 torch.__ver…...
基于Redisson，实现分布式锁注解
1.原始写法 我们平常使用redisson的分布式锁是不是基本都用下面的这个模板，既然是模板，那为何不把他抽出来呢？ // 尝试加锁，最多等待100秒，上锁以后10秒自动解锁 boolean res lock.tryLock(100, 10, TimeUnit.SECON…...
【机器学习】机器学习是什么?
你知道机器学习是什么吗？它就像是一个超级聪明的孩子，可以通过观察和经验不断学习和成长。而我们要做的就是培养和教育这个孩子，让他能够从数据中学习并做出决策和预测。 那么，我们该如何培养和教育这个聪明的孩子呢？首…...
一文速览深度伪造检测（Detection of Deepfakes）：未来技术的守门人
一文速览深度伪造检测（Detection of Deepfakes）：未来技术的守门人 前言一、Deepfakes技术原理卷积神经网络（CNN）：细致的艺术学徒生成对抗网络（GAN）：画家与评审的双重角色…...
C# 中的执行表达式树（Expression Tree）
引言： 在C#编程中，表达式树（Expression Tree）是一种强大的工具，用于表示和执行计算表达式。表达式树将计算表达式抽象为树状结构，每个节点代表表达式中的一个元素，如常量、变量、方法调用等。本…...
森林监测VR虚拟情景再现系统更便利
AI人工智能技术已经逐渐渗透到各个领域，为我们的生活带来了诸多便利。在虚拟仿真教学领域，AI技术的应用也日益丰富，为虚拟情景交互体验带来了前所未有的好处。 提高VR虚拟情景的逼真度 通过深度学习和计算机视觉等技术，AI/VR虚拟现…...
高频面试题整理（一）
文章目录 平台无关性如何实现？JVM如何加载 .class文件？什么是反射?谈谈ClassLoader谈谈类的双亲委派机制类的加载方式Java的内存模型?JVM内存模型-jdk8程序计数器：Java虚拟机栈局部变量表和操作数栈： Java内存模型中堆和栈的区别…...
2-23 switch、JVM内存模型、垃圾回收机制、this、static、变量的分类
文章目录 switch 实现成绩评级JVM内存模型概念栈的特点堆的特点 垃圾回收机制通用的分代垃圾回收机制三种清理算法垃圾回收过程垃圾回收常见的两种检测引用算法内存泄露常见原因 this的用法创建对象的四步 static 静态特点 变量的分类和作用域import switch 实现成绩评级 switc…...
基础！！！吴恩达deeplearning.ai：卷积层
以下内容有任何不理解可以翻看我之前的博客哦：吴恩达deeplearning.ai专栏 文章目录 回顾——密集层 Dense Layer卷积层 Convolutional Neural Network定义优势具体说明心电图卷积层搭建 到目前为止，你使用的所有神经网络层都是密集层类型，这…...
SpringBoot案例(黑马学习笔记)
这个案例呢，就是Tlias智能学习辅助系统。 参考接口文档完成后端功能的开 发，然后结合前端工程进行联调测试即可。 完成后的成品效果展示： 准备工作 需求&环境搭建 需求说明 部门管理 部门管理功能开发包括： ● 查询部门列…...
项目流程图
实现便利店自助付款项目 服务器： 1、并发服务器（多进程、多线程、IO多路复用） 2、SQL数据库的创建和使用（增删改查） 3、以模块化编写项目代码，按照不同模块编写.h/.c文件 客户端： 1、QT客户端界…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
AI Agent与Agentic AI：原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币，另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额，返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域，无损检测（NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统，以非接触式光学麦克风技术为核心，打破传统检测瓶颈，为半导体、航空航天、汽车制造等行业提供了高灵敏…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的：a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...