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

JavaScript进阶--深入面向对象

news 2025/9/30 4:04:55

深入面向对象

编程思想

  • 面向过程：多个步骤=> 解决问题

    性能较高，适合跟硬件联系很紧密的东西，如单片机

    但代码维护成本高，扩展性差

  • 面向对象：问题所需功能分解为一个一个的对象（分工合作）=> 接口

    明确分工，灵活，代码可复用，容易维护和开发，适合大型软件项目

    但性能较低

[!NOTE]

前端面向过程的代码较多

构造函数实现封装

==> 存在浪费内存问题【若属性，方法相同，则多存一个实例化对象，就会多浪费内存空间】

 function Pig(name, age) {this.name = name;this.age = age;};const jogh = new Pig('jogh', 10);console.log(jogh.name);console.log(jogh.age);

原型对象 prototype

构造函数.prototype.方法名 = function(){...}

相当于构造函数中的一个属性

解决构造函数相同的成员造成的空间浪费

图解：

在这里插入图片描述

let that;function Pig(name, age) {this.name = name;this.age = age;that = this;console.log(that);};Pig.prototype.eat = function () {console.log("eat food");that = this;console.log(that);}const jogh = new Pig('jogh', 10);jogh.eat();

[!IMPORTANT]

构造函数和prototype的this都指向实例化对象

给数组扩展方法

通过原型prototype来拓展数组方法

//通过原型prototype来拓展数组方法//最大值Array.prototype.max = function () {return Math.max(...this);}//求和Array.prototype.sum = function () {return this.reduce((pre, cur) => pre + cur, 0);}//技巧：this就是指向实例对象的，所以不需要在把数组传进去方法中去//测试能否正常调用const arr1 = [1, 2, 3, 4, 5];const arr2 = [1, 5, 8, 3, 2];console.log(arr1.max());console.log(arr1.sum());console.log(arr2.max());console.log(arr2.sum());

constructor属性及其应用

==> 指向构造函数 【prototype中的一个属性】

应用

当对prototype整体赋值时，会丢失指向构造函数的路径，需用constructor来重新指向构造函数

function Pig(name, age) {this.name = name;this.age = age;};console.log(Pig.prototype);Pig.prototype = {sing: function () {console.log("sing");},dance: function () {console.log("dance");}};console.log(Pig.prototype);

图解

在这里插入图片描述

对象原型 __proto__

每个实例化对象都有的属性（只读）

==> 指向构造函数中的原型对象

注意

  • JS非标准属性
  • [prototype]和__proto__意义相同
  • 也有constructor属性，指向构造函数

因为有了对象原型，实例化对象才可以直接调用原型对象中的方法

 function Pig(name, age) {this.name = name;this.age = age;};console.log(Pig.prototype);const jogh = new Pig('jogh', 10);console.log(jogh.__proto__);console.log(jogh.__proto__.constructor);console.log(Pig.prototype.constructor);

图解：

在这里插入图片描述

原型继承

通过原型对象来继承一个实例化对象中的内容，本质是，创建一个需要被继承的实例化对象，然后原型对象保存了指向这个空间的地址，最后需要将constructor重新指向对应的构造函数

//如果是通过一个实例化对象进行继承的话，如果继承的对象后续想给自己的原型对象中加点属性或方法，会导致所有的继承对象的原型对象都发生变化//原因：每个继承的对象的原型对象指向的是同一个实例化对象，也就是在栈中保存的是相同的地址//男人和女人function Man() {}//通过原型对象进行继承Man.prototype = new Person();//得重新指向构造函数Man.prototype.constructor = Man;Man.prototype.sing = function () {console.log("sing");}console.log(Man.prototype);console.log(new Man().__proto__.constructor);function Woman() {}//通过原型对象进行继承Woman.prototype = new Person();//得重新指向构造函数Woman.prototype.constructor = Woman;Woman.prototype.born = function () {console.log("baby");}console.log(Woman.prototype);console.log(new Woman().__proto__.constructor);

原型链

面试常考

由于原型对象的继承，使得不同构造函数的原型对象关联在一起 => 关系酷似链式解构，因此得名

[!IMPORTANT]

一种查找规则，当调用一个对象的成员时，先找自身==> 找不到则找自身的原型对象=>找不到则找自身原型对象的对象原型

一直找到Object.prototype为止

在这里插入图片描述

instanceof

判断某个实例化对象或者一个构造函数是否在Object的原型链上

function Person() {this.eyes = 2;}console.log(Person.prototype.__proto__ === Object.prototype);console.log(new Person().__proto__.__proto__ === Object.prototype);console.log(Person instanceof Object);console.log(Person instanceof Array);console.log([1, 2, 3] instanceof Array);console.log(Array instanceof Object);

综合案例

通过面向对象的方法实现提示框的功能

同个提示框的功能可以给其他按钮复用，只需更改参数

  1. 一个构造函数创建一个标签，多样化通过实参进行传入
  2. 在原型对象prototype上挂载open和close
    • close：在body中删除这个标签
    • open先判断是否已经由同类型标签，有则移除，添加对象到body中，绑定关闭事件

3.按钮点击：实例化=>调用open

<!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.设置构造函数modal创建一个divfunction Modal(title = '', msg = '') {this.modal = document.createElement('div');this.modal.className = 'modal';this.modal.innerHTML = `<div class="header">${title} <i>x</i></div><div class="body">${msg}</div>`}//2.封装打开函数到prototype中Modal.prototype.open = function () {const box = document.querySelector('.modal')box && box.remove();document.querySelector('body').appendChild(this.modal);//绑定点击关闭事件this.modal.querySelector('i').addEventListener('click', () => {this.close();})}//3.封装关闭函数到prototype中Modal.prototype.close = function () {document.querySelector('body').removeChild(this.modal)}document.querySelector('#delete').addEventListener('click', () => {const del = new Modal('温馨提示', '您没有删除权限操作');del.open();})document.querySelector('#login').addEventListener('click', () => {const login = new Modal('友情提示', '您还没有登录欧');login.open();})</script>
</body></html>

相关文章：

JavaScript进阶--深入面向对象

深入面向对象 编程思想 面向过程&#xff1a;多个步骤> 解决问题 性能较高&#xff0c;适合跟硬件联系很紧密的东西&#xff0c;如单片机 但代码维护成本高&#xff0c;扩展性差 面向对象&#xff1a;问题所需功能分解为一个一个的对象&#xff08;分工合作&#xff09;>…...

编程日记 2024/10/14 14:03:08

Python列表专题：list与in

Python是一种强大的编程语言，其中列表（list）是最常用的数据结构之一。列表允许我们存储多个元素，并且可以方便地进行各种操作。在Python中，in运算符被广泛用于检测元素是否存在于列表中。本文将深入探讨Python列表及其与in运算符的结合使用。 1. Python列表的基础 1.1 什…...

编程日记 2024/10/14 14:01:06

利用Microsoft Entra Application Proxy在无公网IP条件下安全访问内网计算机

在现代混合办公环境中&#xff0c;如何让员工能够从任何地方安全访问公司内部资源成为了企业的重要挑战。传统的VPN解决方案虽然可以满足需求&#xff0c;但有时配置复杂&#xff0c;并可能涉及公网IP的问题。为了解决这个问题&#xff0c;Microsoft Entra&#xff08;原Azure …...

编程日记 2024/10/14 14:00:04

【IEEE独立出版 | 厦门大学主办】第四届人工智能、机器人和通信国际会议（ICAIRC 2024）

【IEEE独立出版 | 厦门大学主办】 第四届人工智能、机器人和通信国际会议&#xff08;ICAIRC 2024&#xff09; 2024 4th International Conference on Artificial Intelligence, Robotics, and Communication 2024年12月27-29日 | 中国厦门 >>往届均已成功见刊检索…...

编程日记 2024/10/14 13:59:03

C++ 内存布局 - Part5: 继承关系中 构造析构与vptr的调整

这里以单继承为例&#xff0c;汇编采用AT&T格式&#xff0c;先看示例代码&#xff1a; #include <iostream>class Base { public:Base() {std::cout << "Base Constructor, this ptr: " << this << std::endl;printVptr();}virtual ~Ba…...

编程日记 2024/10/14 13:53:57

BUG-AttributeError: ‘EnforcedForest‘ object has no attribute ‘node‘

File “/home/adt/miniconda3/envs/bevdet/lib/python3.7/site-packages/trimesh/scene/transforms.py”, line 224, in nodes_geometry ‘geometry’ in self.transforms.node[n]): AttributeError: ‘EnforcedForest’ object has no attribute ‘node’ networkx 2.6.3 pyp…...

编程日记 2024/10/14 13:51:54

Spring Boot 3 配置 Redis 兼容单例和集群

配置项 Spring Boot 3.x 的 redis 配置和 Spring Boot 2.x 是不一样的, 路径多了一个data spring:...data:redis:host: redis.hostport: redis.portpassword: redis.passworddatabase: redis.database兼容单例和集群的配置 开发时一般用一个Redis单例就足够, 测试和生产环境…...

编程日记 2024/10/14 13:50:52

unsat钱包签名算法解析

unsat钱包签名算法解析 在数字货币领域&#xff0c;安全性是至关重要的&#xff0c;而签名算法则是确保交易和信息不可伪造的基础。本文将深入解析 unsat 钱包中使用的签名算法&#xff0c;重点关注如何生成和验证消息签名。 1. 签名算法概述 unsat 钱包使用 ECDSA&#xff…...

编程日记 2024/10/14 13:49:51

mysql删除唯一索引

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…...

编程日记 2024/10/14 13:45:45

学习之面试题：偏函数

偏函数&#xff08;Partial Function&#xff09;是 Python 中的一个实用工具&#xff0c;通常用于函数式编程中&#xff0c;可以固定一个函数的部分参数&#xff0c;从而生成一个新的函数。偏函数在 Python 中通常通过 functools.partial 实现。在面试中&#xff0c;考察偏函数…...

编程日记 2024/10/14 13:44:44

面试技术点

Java 一、jvm模块 jvm是什么？ 是一用用于计算设备的规范，虚构出来的计算机，在计算机上仿真模拟各种计算机功能来实现 jvm 作用是什么？ java中所有类必须装载jvm中才能运行，这个装载工作有jvm装载器完成，.class类型文件能在jvm虚拟器中运行，但不能直接在系统中运行，需要…...

编程日记 2024/10/14 13:42:38

基础sql

在执行删除操作之前&#xff0c;建议先运行一个 SELECT 查询来确认你要删除的记录。这可以帮助你避免误删数据。 删除字段id默认值为空字符串的所有数据 delete from users where id ; 删除字段id默认值为null的所有数据 delete from users where id is null; 删除字段upd…...

编程日记 2024/10/14 13:39:33

Jenkins整合Docker实现CICD自动化部署（若依项目）

前期准备 提前准备好jenkins环境 并且jenkins能使用docker命令&#xff0c;并且已经配置好了jdk、node、maven环境&#xff0c;我之前写了安装jenkins的博客&#xff0c;里面讲得比较详细&#xff0c;推荐用我这种方式安装 docker安装jenkins&#xff0c;并配置jdk、node和m…...

编程日记 2024/10/14 13:35:28

kali chrome 安装 hackbar

HackBar 是一个用于在 Kali Linux 中快速测试 SQL 注入和 XSS 漏洞的 Chrome 扩展程序。以下是如何在 Kali Linux 上安装 HackBar 的步骤&#xff1a; 首先&#xff0c;你需要确保你的系统已经安装了 Google Chrome 或 Chromium。如果没有安装&#xff0c;你可以使用以下命令安…...

编程日记 2024/10/14 13:32:25

一文了解 Linux 系统的文件权限管理

文章目录 引入Linux文件权限模型查看文件权限权限信息解析修改文件权限符号模式八进制数字模式 引入 在Linux操作系统中&#xff0c;我们想查看我们对文件拥有哪些权限时&#xff0c;可以在终端键入ls -l或ll命令&#xff0c;终端会输出当前路径下的文件信息&#xff0c;如文件…...

编程日记 2024/10/14 13:27:20

Spark：DataFrame介绍及使用

1. DataFrame详解 DataFrame是基于RDD进行封装的结构化数据类型&#xff0c;增加了schema元数据&#xff0c;最终DataFrame类型在计算时&#xff0c;还是转为rdd计算。DataFrame的结构化数据有Row&#xff08;行数据&#xff09;和schema元数据构成。 Row 类型 表示一行数据 …...

编程日记 2024/10/14 13:25:17

Linux系统：本机(物理主机)访问不了虚拟机中的apache服务问题的解决方案

学习目标&#xff1a; 提示&#xff1a;本文主要讲述-本机(物理主机)访问不了虚拟机中的apache服务情况下的解决方案 Linux系统&#xff1a;Ubuntu 23.04&#xff1b; 文中提到的“本机”&#xff1a;代表&#xff0c;宿主机&#xff0c;物理主机&#xff1b; 首先&#xff0c…...

编程日记 2024/10/14 13:24:14

望繁信科技成功签约国显科技 流程挖掘助力制造业智造未来

近日&#xff0c;上海望繁信科技有限公司&#xff08;简称“望繁信科技”&#xff09;成功与深圳市国显科技有限公司&#xff08;简称“国显科技”&#xff09;达成合作。国显科技作为全球领先的TFT-LCD液晶显示及Mini/Micro LED显示产品供应商&#xff0c;致力于为笔记本、手机…...

编程日记 2024/10/14 13:23:12

枚举在Java体系中的作用

1. 枚举 枚举是在JDK1.5以后引入的。主要用途是&#xff1a;将一组常量组织起来&#xff0c;在这之前表示一组常量通常使用定义常量的方式&#xff1a; //用public static final修饰常量 public static final int RED 1; public static final int GREEN 2; public static f…...

编程日记 2024/10/14 13:21:10

『气泡水』Web官网 案例赏析

前言 Schweppes&#xff0c;作为一家享誉全球的气泡水品牌&#xff0c;致力于与年轻消费者建立更紧密的联系&#xff0c;并提升品牌影响力。为此&#xff0c;其打造了一个充满创意和高度互动性的官网&#xff0c;利用前端技术和动画效果&#xff0c;将产品特性与用户浏览体验完…...

编程日记 2024/10/14 13:18:07

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/9/29 3:45:18

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/9/28 20:39:38

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/9/28 7:50:24

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2025/9/28 7:47:40

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/7/7 15:21:47

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

编程新知 2025/8/25 19:37:12

【FTP】ftp文件传输会丢包吗？批量几百个文件传输，有一些文件没有传输完整，如何解决？

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

编程新知 2025/8/17 3:31:21

Qwen系列之Qwen3解读：最强开源模型的细节拆解

文章目录 1.1分钟快览2.模型架构2.1.Dense模型2.2.MoE模型 3.预训练阶段3.1.数据3.2.训练3.3.评估 4.后训练阶段S1: 长链思维冷启动S2: 推理强化学习S3: 思考模式融合S4: 通用强化学习 5.全家桶中的小模型训练评估评估数据集评估细节评估效果弱智评估和民间Arena 分析展望 如果…...

编程新知 2025/9/29 9:50:13

解决MybatisPlus使用Druid1.2.11连接池查询PG数据库报Merge sql error的一种办法

目录 前言 一、问题重现 1、环境说明 2、重现步骤 3、错误信息 二、关于LATERAL 1、Lateral作用场景 2、在四至场景中使用 三、问题解决之道 1、源码追踪 2、关闭sql合并 3、改写处理SQL 四、总结 前言 在博客&#xff1a;【写在创作纪念日】基于SpringBoot和PostG…...

编程新知 2025/9/28 1:09:13