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

JS进阶——深入对象

news 2026/1/24 11:24:12

构造函数

  •  封装是面向对象思想中比较重要的一部分，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) // 指向Object
function Star(name) {this.name = name
}
Star.prototype = {constructor:Starsing:function(){ console.log('唱歌') },dance:function(){ console.log('跳舞') }
}
console.log(Star.prototype.constructor) //指向Star

对象原型

对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype
原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。
注意：
  • __proto__ 是JS非标准属性
  • [[prototype]]和__proto__意义相同
  • 用来表明当前实例对象指向哪个原型对象prototype
  • __proto__对象原型里面也有一个 constructor属性，指向创建该实例对象的构造函数

原型继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承的特性。
1. 封装- 抽取公共部分
把男人和女人公共的部分抽取出来放到人类里面 
const People = {head:1,eyes:2
}function Man() {}
function Woman() {}
2. 继承- 让男人和女人都能继承人类的一些属性和方法
  • 把男人女人公共的属性和方法抽取出来 People
  • 然后赋值给Man的原型对象，可以共享这些属性和方法
  • 注意让constructor指回Man这个构造函数
Man.prototype = People
Man.prototype.constructor = Man
const pink = new Man()
console.log(pink)
3. 问题：
如果我们给女人添加了一个生孩子的方法，发现男人自动也添加这个方法 
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进阶——深入对象

构造函数 封装是面向对象思想中比较重要的一部分&#xff0c;js面向对象可以通过构造函数实现的封装。 前面我们学过的构造函数方法很好用&#xff0c;但是 存在浪费内存的问题 原型 目标&#xff1a;能够利用原型对象实现方法共享 构造函数通过原型分配的函数是所有对象所…...

编程日记 2024/2/29 22:40:36

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.存储说明 存储应…...

编程日记 2024/2/29 22:38:33

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 映射配置文件&#…...

编程日记 2024/2/29 22:35:30

30天自制操作系统（第21天）

21.1 攻克难题——字符串显示API 显示单个字符时&#xff0c;用 [CS:ECX] 的方式特意指定了 CS&#xff08;代码段寄存器&#xff09;&#xff0c;因此可以成功读取 msg的内容。但在显示字符串时&#xff0c;由于无法指定段地址&#xff0c;程序误以为是 DS而从完全错误的内存地…...

编程日记 2024/2/29 22:33:27

linux系统Jenkins的安装

Jenkins安装 安装上传安装包解压包首次登录要去服务器查看密码&#xff0c;更改密码选择需要安装的插件设置Admin用户和密码安装完成 安装 上传安装包 上传 jdk17 tomcat jenkins.war的安装包 . 上传 tomcat安装包解压包 解压jdk tar xf jdk-11.0.18_linux-x64_bin.tar.gz解…...

编程日记 2024/2/29 22:32:26

【GStreamer】basic-tutorial-1：GstBus、GstMessage详解

【目录】郭老二博文之：图像视频汇总 1、先看示例 #include <gst/gst.h>int main (int argc, char *argv[]) {GstElement *pipeline;GstBus...

编程日记 2024/2/29 22:30:24

Python中的可变变量与不可变变量

python中的可变与不可变变量 一、变量的三个参数 就像区分一个人一样&#xff0c;同样都是张三&#xff0c;可能这个张三就不是那个张三。同一个变量是指的什么相同呢&#xff1f; Python中的对象包含三个要素&#xff0c;id&#xff08;内存地址&#xff09;&#xff0c;typ…...

编程日记 2024/2/29 22:25:19

OpenGL调用窗口，方向键和鼠标

9.2 OpenGL调用窗口&#xff0c;方向键和鼠标 9.2.1 opengl调用窗口 OpenGL调用窗口步骤&#xff1a; 第一步&#xff1a;初始化 GLFW&#xff0c;初始化OpenGL,初始化窗口&#xff0c;初始化上下文 第二步&#xff1a;设置窗口大小和位置&#xff0c;设置输入输出 第三步…...

编程日记 2024/2/29 22:24:18

fastAdmin表格列表的功能

更多文章&#xff0c;请关注&#xff1a;fastAdmin后台功能详解 | 夜空中最亮的星 FastAdmin是一款基于ThinkPHP5Bootstrap的极速后台开发框架。优点见开发文档 介绍 - FastAdmin框架文档 - FastAdmin开发文档 在这里上传几张优秀的快速入门图: 一张图解析FastAdmin中的表格列…...

编程日记 2024/2/29 22:23:17

用来检查 CUDA、Conda 和 PyTorch 的版本的python文件

提供的 Python 代码片段包括几个语句&#xff0c;用来检查 CUDA、Conda 和 PyTorch 的版本&#xff0c;以及一些与 CUDA 相关的系统配置。让我们分解一下&#xff1a;PyTorch 版本和配置&#xff1a;torch.__config__.show()&#xff1a;显示 PyTorch 的构建配置。 torch.__ver…...

编程日记 2024/2/29 22:20:15

基于Redisson，实现分布式锁注解

1.原始写法 我们平常使用redisson的分布式锁是不是基本都用下面的这个模板&#xff0c;既然是模板&#xff0c;那为何不把他抽出来呢&#xff1f; // 尝试加锁&#xff0c;最多等待100秒&#xff0c;上锁以后10秒自动解锁 boolean res lock.tryLock(100, 10, TimeUnit.SECON…...

编程日记 2024/2/29 22:19:14

【机器学习】机器学习是什么?

你知道机器学习是什么吗&#xff1f;它就像是一个超级聪明的孩子&#xff0c;可以通过观察和经验不断学习和成长。而我们要做的就是培养和教育这个孩子&#xff0c;让他能够从数据中学习并做出决策和预测。 那么&#xff0c;我们该如何培养和教育这个聪明的孩子呢&#xff1f;首…...

编程日记 2024/2/29 22:17:12

一文速览深度伪造检测（Detection of Deepfakes）：未来技术的守门人

一文速览深度伪造检测&#xff08;Detection of Deepfakes&#xff09;&#xff1a;未来技术的守门人 前言一、Deepfakes技术原理卷积神经网络&#xff08;CNN&#xff09;&#xff1a;细致的艺术学徒生成对抗网络&#xff08;GAN&#xff09;&#xff1a;画家与评审的双重角色…...

编程日记 2024/2/29 22:15:10

C# 中的执行表达式树（Expression Tree）

引言&#xff1a; 在C#编程中&#xff0c;表达式树&#xff08;Expression Tree&#xff09;是一种强大的工具&#xff0c;用于表示和执行计算表达式。表达式树将计算表达式抽象为树状结构&#xff0c;每个节点代表表达式中的一个元素&#xff0c;如常量、变量、方法调用等。本…...

编程日记 2024/2/29 22:13:09

森林监测VR虚拟情景再现系统更便利

AI人工智能技术已经逐渐渗透到各个领域&#xff0c;为我们的生活带来了诸多便利。在虚拟仿真教学领域&#xff0c;AI技术的应用也日益丰富&#xff0c;为虚拟情景交互体验带来了前所未有的好处。 提高VR虚拟情景的逼真度 通过深度学习和计算机视觉等技术&#xff0c;AI/VR虚拟现…...

编程日记 2024/2/29 22:12:08

高频面试题整理（一）

文章目录 平台无关性如何实现&#xff1f;JVM如何加载 .class文件&#xff1f;什么是反射?谈谈ClassLoader谈谈类的双亲委派机制类的加载方式Java的内存模型?JVM内存模型-jdk8程序计数器&#xff1a;Java虚拟机栈局部变量表和操作数栈&#xff1a; Java内存模型中堆和栈的区别…...

编程日记 2024/2/29 22:04:02

2-23 switch、JVM内存模型、垃圾回收机制、this、static、变量的分类

文章目录 switch 实现成绩评级JVM内存模型概念栈的特点堆的特点 垃圾回收机制通用的分代垃圾回收机制三种清理算法垃圾回收过程垃圾回收常见的两种检测引用算法内存泄露常见原因 this的用法创建对象的四步 static 静态特点 变量的分类和作用域import switch 实现成绩评级 switc…...

编程日记 2024/2/29 22:02:01

基础！！！吴恩达deeplearning.ai：卷积层

以下内容有任何不理解可以翻看我之前的博客哦&#xff1a;吴恩达deeplearning.ai专栏 文章目录 回顾——密集层 Dense Layer卷积层 Convolutional Neural Network定义优势具体说明心电图卷积层搭建 到目前为止&#xff0c;你使用的所有神经网络层都是密集层类型&#xff0c;这…...

编程日记 2024/2/29 22:01:00

SpringBoot案例(黑马学习笔记)

这个案例呢&#xff0c;就是Tlias智能学习辅助系统。 参考接口文档完成后端功能的开 发&#xff0c;然后结合前端工程进行联调测试即可。 完成后的成品效果展示&#xff1a; 准备工作 需求&环境搭建 需求说明 部门管理 部门管理功能开发包括&#xff1a; ● 查询部门列…...

编程日记 2024/2/29 21:58:58

项目流程图

实现便利店自助付款项目 服务器&#xff1a; 1、并发服务器&#xff08;多进程、多线程、IO多路复用&#xff09; 2、SQL数据库的创建和使用&#xff08;增删改查&#xff09; 3、以模块化编写项目代码&#xff0c;按照不同模块编写.h/.c文件 客户端&#xff1a; 1、QT客户端界…...

编程日记 2024/2/29 21:54:54

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2026/1/23 19:46:48

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/15 6:08:19

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2025/8/22 13:56:38

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2026/1/15 5:27:15

Vue 3 + WebSocket 实战：公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

编程新知 2025/12/1 3:22:57

Appium下载安装配置保姆教程（图文详解）

目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...

编程新知 2026/1/23 16:37:05

JavaScript 标签加载

目录 JavaScript 标签加载script 标签的 async 和 defer 属性&#xff0c;分别代表什么&#xff0c;有什么区别1. 普通 script 标签2. async 属性3. defer 属性4. type"module"5. 各种加载方式的对比6. 使用建议 JavaScript 标签加载 script 标签的 async 和 defer …...

编程新知 2025/10/2 20:58:12

HTML中各种标签的作用

一、HTML文件主要标签结构及说明 1. <&#xff01;DOCTYPE html> 作用&#xff1a;声明文档类型&#xff0c;告知浏览器这是 HTML5 文档。 必须&#xff1a;是。 2. <html lang“zh”>. </html> 作用&#xff1a;包裹整个网页内容&#xff0c;lang"z…...

编程新知 2025/12/26 3:00:15