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

后盾人JS--继承

news 2025/12/28 20:40:03

继承是原型的继承

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let f = {}console.log(f.__proto__)function User() {User.prototype.name = function () {console.log("user.name")}}function Admin() { }// Admin.prototype.__proto__ = User.prototypeAdmin.prototype = Object.create(User.prototype)Admin.prototype.role = function () {console.log("admin.role")}function Member() { }Member.prototype = Object.create(User.prototype)Member.prototype.role = function () {console.log("member.role")}let a = new Admin()a.role()</script>
</body></html>

两种方式都可以实现继承

禁止constructor被遍历

有的时候不希望constructor被遍历

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function Admin(){Admin.prototype = Object.create(User.prototype)console.log(Object.getOwnPropertyDescriptor(Admin.prototype))Object.defineProperty(Admin.prototype,'construct',{value:Admin})Admin.prototype.role = function(){console.log("admin.role")}let a = new Admin()for(const key in a){console.log(key)}}</script>
</body>
</html>

方法重写与父级属性访问

父级和子级的哪一个适合用哪个

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function User(){User.prototype.show = function(){console.log("user.name")}}User.prototype.site = function(){return "后盾人"}function Admin(){}Admin.prototype = Object.create(User.prototype)Admin.prototype.constructor = AdminAdmin.prototype.show = function(){console.log(User.prototype.site() + "admin.show")}let hd = new Admin()hd.show()</script>
</body>
</html>

面向对象的多态

有多态特性分类就比较方便了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function User(){}User.prototype.show = function(){console.log(this.description())}function Admin(){}Admin.prototype = Object.create(User.prototype)Admin.prototype.description = function(){return "管理员在此"}function Member(){}Member.prototype = Object.create(User.prototype)Member.prototype.description = function(){return "我是会员"}function Enterprise(){}Enterprise.prototype = Object.create(User.prototype)Enterprise.prototype.description = function(){return "企业账户"}for(const obj of [new Admin(),new Member(),new Enterprise()]){obj.show()//假如没有多态if(obj instanceof Admin){console.log(obj.showAdmin())}}</script>
</body>
</html>

使用父类构造函数初始属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let hd = {name: "后盾人",view() {console.log(this.name)}}hd.view()function User(name, age) {this.name = namethis.age = age}User.prototype.show = function () {console.log(this.name, this.age)}function Admin(...args) {User.apply(this, args)}Admin.prototype = Object.create(User.prototype)let xj = new Admin("向军", 18)xj.show()function Member(...args) {User.apply(this, args)}Member.prototype = Object.create(User.prototype)let lisi = new Member("李四", 19)lisi.show()</script>
</body></html>

使用原型工厂封装继承

只要有重复的就可以封装起来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function extend(sub,sup){sub.prototype = Object.create(sup.prototype)Object.defineProperty(sub.prototype,"constructor",{value:sub,enumerable:false})}function User(name,age){this.name = namethis.age = age}User.prototype.show = function(){console.log(this.name,this.age)}function Admin(...args){User.apply(this,args)}extend(Admin,User)let admin = new Admin('向军',19)admin.show()function Member(...args){User.apply(this,args)}extend(Member,User)let member = new Member('李四',23)member.show()// Member.prototype = Object.create(User.prototype)// Object.defineProperty(Member.prototype,"constructor",{//     value:Member,//     enumerable:false// })</script>
</body>
</html>

对象工厂派生对象并实现继承

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function User(name,age){this.name = namethis.age = age}User.prototype.show = function(){console.log(this.name,this.age)}function admin(name,age){const instance = Object.create(User.prototype)User.call(instance,name,age)instance.role = function(){console.log("role")}return instance}let hd = admin("向军",19)hd.show()hd.role()// let admin = new Admin('向军',19)// admin.show()// function Member(...args){//     User.apply(this,args)// }// extend(Member,User)// let member = new Member('李四',23)// member.show()// Member.prototype = Object.create(User.prototype)// Object.defineProperty(Member.prototype,"constructor",{//     value:Member,//     enumerable:false// })</script>
</body>
</html>

mixin实现多继承

// 定义一些 mixin 对象
const canEat = {eat() {console.log('I can eat.');}
};const canWalk = {walk() {console.log('I can walk.');}
};const canSwim = {swim() {console.log('I can swim.');}
};// 定义一个基础类
class Person {}// 定义一个混入函数
function mixin(target, ...sources) {Object.assign(target.prototype, ...sources);
}// 进行混入操作
mixin(Person, canEat, canWalk, canSwim);// 创建 Person 实例
const person = new Person();// 调用混入的方法
person.eat();
person.walk();
person.swim();

使用工厂函数混入：

// 定义一些 mixin 函数
function canFly() {return {fly() {console.log('I can fly.');}};
}function canClimb() {return {climb() {console.log('I can climb.');}};
}// 定义一个基础类
class Animal {}// 定义一个工厂函数进行混入
function createMixinAnimal(...mixins) {class MixedAnimal extends Animal {}mixins.forEach(mixin => {Object.assign(MixedAnimal.prototype, mixin());});return MixedAnimal;
}// 创建一个混入了 canFly 和 canClimb 的新类
const FlyingClimbingAnimal = createMixinAnimal(canFly, canClimb);// 创建实例
const animal = new FlyingClimbingAnimal();// 调用混入的方法
animal.fly();
animal.climb();

mixin的内部继承与super关键字

功能类也可以实现继承

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function extend(sub,sup){sub.prototype = Object.create(sup.prototype)Object.defineProperty(sub.prototype,"constructor",{value:sub,enumerable:false})} const Address = {getAddress(){console.log("获取收货地址")}}const Request = {ajax(){return "请求后台"}}const Credit = {__proto__:Request,total(){console.log(super.ajax()+"积分统计")}} function User(name,age){this.name = name this.age = age}User.prototype.show = function(){console.log(this.name,this.age)}function Admin(name,age){User.call(this,name,age)}extend(Admin,User)Admin.prototype = Object.assign(Admin.prototype,Request,Credit)let admin = new Admin("向军",19)admin.show()admin.ajax()admin.total()function Member(name,age){User.call(this,name,age)}extend(Member,User)//    Member.prototype = Object.assign(Admin.prototype,Request,Credit)//    let lisi = new Member("李四",22)//    lisi.getAddress()</script>
</body>
</html>

Tab选项卡显示效果基类开发

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><main class="tab2"><nav><a href="javascript:;">后盾人</a><a href="javascript:;">hdcms</a></nav><section>1</section><section>2</section></main><script>function extend(sub,sup){sub.prototype = Object.create(sup.prototype)sub.prototype.constructor = sub}function Animation(){}Animation.prototype.show = function(){this.style.display = "block"}Animation.prototype.hide = function(){this.style.display = "none"}Animation.prototype.background = function(color){this.style.backgroundColor = color}// let tab = document.querySelector('.tab')// Animation.prototype.background.call(tab,"red")</script>
</body>
</html>

好用的TAB业务管理类

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><main class="tab1"><nav><a href="javascript:;">后盾人</a><a href="javascript:;">hdcms</a></nav><section>1</section><section>2</section></main><main class="tab2"><nav><a href="javascript:;">后盾人</a><a href="javascript:;">hdcms</a></nav><section>1</section><section>2</section></main><script>function extend(sub,sup){sub.prototype = Object.create(sup.prototype)sub.prototype.constructor = sub}function Animation(){}Animation.prototype.show = function(){this.style.display = "block"}Animation.prototype.hide = function(){this.style.display = "none"}Animation.prototype.background = function(color){this.style.backgroundColor = color}// let tab = document.querySelector('.tab')// Animation.prototype.background.call(tab,"red")function Tab(el){ this.tab = document.querySelector(el)this.links = this.tab.querySelectorAll('a')this.sections = this.tab.querySelectorAll('section')}extend(Tab,Animation)Tab.prototype.run = function(){this.bindEvent()this.reset()this.action(0)}Tab.prototype.bindEvent = function(){this.links.forEach((el,i) => {el.addEventListener("click",()=>{this.reset()this.action(i)})               });}Tab.prototype.action =function(i){this.background.call(this.links[i],"#e67e22")this.show.call(this.sections[i])}Tab.prototype.reset =function(){this.links.forEach((el,i)=>{this.background.call(this.links[i],"#95a5a6")this.hide.call(this.sections[i])})}new Tab('.tab2').run()</script>
</body>
</html>

也可以通过设置默认参数来进行更多的设置，让自由度更高

后盾人JS--继承

继承是原型的继承 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </hea…...

编程日记 2025/2/5 12:59:12

提升开发效率：IDE使用技巧与插件推荐

在软件开发过程中，选择一个合适的集成开发环境（IDE）并掌握其使用技巧，可以显著提高开发效率。本文将分享一些常用的IDE使用技巧，并推荐几款实用的插件，帮助开发者更好地利用IDE进行开发。一、IDE使用技巧…...

编程日记 2025/2/5 12:48:57

开源模型应用落地-DeepSeek-R1-Distill-Qwen-7B与vllm实现推理加速的正确姿势（一）

一、前言在当今人工智能技术迅猛发展的时代，各类人工智能模型如雨后春笋般不断涌现，其性能的优劣直接影响着应用的广度与深度。从自然语言处理到计算机视觉，从智能安防到医疗诊断，AI 模型广泛应用于各个领域，人们对其准确性、稳定性和高效性的期望也与日俱增。在此背景下…...

编程日记 2025/2/5 12:46:53

小书包：让阅读更美的二次开发之作

小书包是在一款知名阅读软件的基础上进行二次开发的产品。在保留原有软件的基本功能和用户体验的同时，对其界面和视觉效果进行了精心美化，让阅读体验更加舒适和愉悦。内置了171条书源，虽然数量不算多，但都是作者精挑细选出来的&a…...

编程日记 2025/2/5 12:43:48

MySQL 插入数据指南

MySQL 插入数据指南引言 MySQL 是一款广泛使用的开源关系数据库管理系统，被广泛应用于各种规模的组织中。在数据库管理中，数据的插入是基础操作之一。本文将详细介绍如何在 MySQL 中插入数据，包括插入单条记录和多条记录，以及一…...

编程日记 2025/2/5 12:41:46

一、拓扑图需求 Cloud云： 二、防火墙配置初始化防火墙 Username:admin Password:***** The password needs to be changed. Change now? [Y/N]: y Please enter old password: Admin123 Please enter new password: admin123 Please confirm new password: …...

编程日记 2025/2/5 12:37:41

【Redis】主从模式，哨兵，集群

主从复制单点问题： 在分布式系统中，如果某个服务器程序，只有一个节点（也就是一个物理服务器）来部署这个服务器程序的话，那么可能会出现以下问题： 1.可用性问题：如果这个机器挂了…...

编程日记 2025/2/5 12:36:38

互联网行业常用12个数据分析指标和八大模型

本文目录前言一、互联网线上业务数据分析的12个指标 1. 用户数据（4个） (1) 存量（DAU/MAU） (2) 新增用户 (3) 健康程度（留存率） (4) 渠道来源 2. 用户行为数据（4个） (1) 次数/频率…...

编程日记 2025/2/5 12:35:36

多模块协同信息安全管理平台

1.产品介绍产品名称【SecureMOS - 多模块协同信息安全管理平台】主要功能： [功能1] 模块化架构设计与集成具体作用与使用方式: 通过模块化的设计，将信息安全系统分解为多个独立且可扩展的组件，便于快速部署和维护。需求满足与问题解…...

编程日记 2025/2/5 12:34:35

基于RK3588/RK3576+MCU STM32+AI的储能电站电池簇管理系统设计与实现

伴随近年来新型储能技术的高质量规模化发展，储能电站作为新能源领域的重要载体， 旨在配合逐步迈进智能电网时代，满足电力系统能源结构与分布的创新升级，给予相应规模电池管理系统的设计与实现以新的挑战。同时，电子系…...

编程日记 2025/2/5 12:33:34

使用LightGlue进行图像配准并提取图像重叠区域

发表日期：2023年6月23日项目地址：https://github.com/cvg/LightGlue https://github.com/cvg/glue-factory/ LightGlue是一个在精度上媲美Superglue，但在速度上比Superglue快一倍的模型。通过博主实测，LightGlue的配准效果比Su…...

编程日记 2025/2/5 12:32:33

DeepSeek-R1：开源机器人智能控制系统的革命性突破

目录引言一、DeepSeek-R1 的概述 1.1 什么是 DeepSeek-R1？ 1.2 DeepSeek-R1 的定位二、DeepSeek-R1 的核心特性 2.1 实时控制能力 2.2 多传感器融合 2.3 路径规划与导航 2.4 人工智能集成 2.5 开源与模块化设计 2.6 跨平台支持三、DeepSeek-R1 的技术…...

编程日记 2025/2/5 12:29:29

第二十二章 MySQL锁之全局锁

目录一、锁概述二、全局锁概念三、全局锁使用四、全局锁特点五、不加锁一致性数据备份 5.1. 实现方式 5.2. 优点和缺点一、锁概述锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中，除传统的计算资源（CPU、RAM、I/O&#x…...

编程日记 2025/2/5 12:28:28

pytorch实现简单的情感分析算法

人工智能例子汇总：AI常见的算法和例子-CSDN博客在PyTorch中实现中文情感分析算法通常涉及以下几个步骤：数据预处理、模型定义、训练和评估。下面是一个简单的实现示例，使用LSTM模型进行中文情感分析。 1. 数据预处理首先，我…...

编程日记 2025/2/5 12:26:26

Win11关闭登录密码?

或者使用winR快捷键, 输入： netplwiz 进入页面后，按照提示按ctrlaltdel键更改密码。在跳转页面点击更改密码。输入原密码后，将新密码设置为空即可。 Win11的两个实用技巧系列之如何关闭登录密码?_win11关闭密码还是要输入-CSDN博客...

编程日记 2025/2/5 12:21:21

e2studio开发RA4M2(6)----GPIO外部中断（IRQ）配置

e2studio开发RA4M2.6--GPIO外部中断（IRQ）配置概述视频教学样品申请硬件准备参考程序源码下载新建工程工程模板保存工程路径芯片配置工程模板选择时钟设置SWD调试口设置GPIO口配置按键中断配置中断回调函数主程序概述 GPIO（通用输入/输出&a…...

编程日记 2025/2/5 12:19:19

DeepSeek 阐述 2025年前端发展趋势

预测2025年前端的发展趋势。首先，我需要考虑当前的前端技术发展情况，以及近几年的变化趋势。比如，框架方面，React、Vue、Angular这些主流框架的更新方向和社区活跃度。可能用户想知道未来哪些技术会更流行，或者需要学…...

编程日记 2025/2/5 12:18:17

linux内核源代码中__init的作用？

在 Linux 内核源代码中，__init是一个特殊的宏，用于标记在内核初始化阶段使用的变量或函数。这个宏的作用是告诉内核编译器和链接器，被标记的变量或函数只在内核的初始化阶段使用，在系统启动完成后就不再需要了。因此，这…...

编程日记 2025/2/5 12:15:13

计算机从何而来？计算技术将向何处发展？

计算机的前生：机械计算工具的演进算盘是计算机的起点，它其实是一台“机械式半自动化运算器”。打算盘的“口诀”其实就是它的编程语言，算盘珠就是它的存储器。第二阶段是可以做四则运算的加法器、乘法器。1642年，法国数学家帕斯…...

编程日记 2025/2/5 12:13:10

浏览器的通信能力

浏览器的通信能力用户代理浏览器可以代替用户完成http请求，代替用户解析响应结果，所以我们称之为： 用户代理 user agent 在网络层面，对于前端开发者，必须要知道浏览器拥有的两大核心能力： 自动发出请…...

编程日记 2025/2/5 12:11:08

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

3.3.1_1 检错编码（奇偶校验码）

从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...

编程新知 2025/12/18 15:23:39

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。二、服务端模块设计目标高内聚低耦合：各模块职责清晰，便于独立开发…...

编程新知 2025/10/13 4:15:41

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成：一、GC相关暂停 1. 安全点（Safepoint）阻塞现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...

编程新知 2025/10/2 12:07:03

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...

编程新知 2025/12/14 17:38:21

html-＜abbr＞缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。示例&#x…...

编程新知 2025/12/9 20:17:56

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/12/28 16:50:57

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/12/23 13:27:38

免费数学几何作图web平台

光锐软件免费数学工具，maths,数学制图，数学作图，几何作图，几何，AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/12/27 18:07:28

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项： 一、安装依赖安装 pdf-vue3 和 PDF.js 核心库： npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

编程新知 2025/9/18 20:16:52