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

JS进阶——深入对象

news 2025/9/7 12:11:11

构造函数

  •  封装是面向对象思想中比较重要的一部分，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

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

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

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

编程新知 2025/7/25 23:24:13

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/6/17 5:18:28

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/7/9 4:55:48

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/9/3 15:58:14

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/7/8 4:24:01

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/7/7 15:20:50

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2025/9/2 16:53:17

ubuntu22.04有线网络无法连接，图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

编程新知 2025/9/2 16:50:30

全面解析数据库：从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

编程新知 2025/7/29 3:05:57