后盾人JS--继承
继承是原型的继承
<!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…...
提升开发效率：IDE使用技巧与插件推荐
在软件开发过程中，选择一个合适的集成开发环境（IDE）并掌握其使用技巧，可以显著提高开发效率。本文将分享一些常用的IDE使用技巧，并推荐几款实用的插件，帮助开发者更好地利用IDE进行开发。 一、IDE使用技巧…...
开源模型应用落地-DeepSeek-R1-Distill-Qwen-7B与vllm实现推理加速的正确姿势（一）
一、前言 在当今人工智能技术迅猛发展的时代，各类人工智能模型如雨后春笋般不断涌现，其性能的优劣直接影响着应用的广度与深度。从自然语言处理到计算机视觉，从智能安防到医疗诊断，AI 模型广泛应用于各个领域，人们对其准确性、稳定性和高效性的期望也与日俱增。 在此背景下…...
小书包：让阅读更美的二次开发之作
小书包是在一款知名阅读软件的基础上进行二次开发的产品。在保留原有软件的基本功能和用户体验的同时，对其界面和视觉效果进行了精心美化，让阅读体验更加舒适和愉悦。 内置了171条书源，虽然数量不算多，但都是作者精挑细选出来的&a…...
MySQL 插入数据指南
MySQL 插入数据指南 引言 MySQL 是一款广泛使用的开源关系数据库管理系统，被广泛应用于各种规模的组织中。在数据库管理中，数据的插入是基础操作之一。本文将详细介绍如何在 MySQL 中插入数据，包括插入单条记录和多条记录，以及一…...
防火墙安全策略实验
一、拓扑图 需求 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: …...
【Redis】主从模式，哨兵，集群
主从复制 单点问题： 在分布式系统中，如果某个服务器程序，只有一个节点（也就是一个物理服务器）来部署这个服务器程序的话，那么可能会出现以下问题： 1.可用性问题：如果这个机器挂了…...
互联网行业常用12个数据分析指标和八大模型
本文目录 前言 一、互联网线上业务数据分析的12个指标 1. 用户数据（4个） (1) 存量（DAU/MAU） (2) 新增用户 (3) 健康程度（留存率） (4) 渠道来源 2. 用户行为数据（4个） (1) 次数/频率…...
多模块协同信息安全管理平台
1.产品介绍 产品名称 【SecureMOS - 多模块协同信息安全管理平台】 主要功能： [功能1] 模块化架构设计与集成 具体作用与使用方式: 通过模块化的设计，将信息安全系统分解为多个独立且可扩展的组件，便于快速部署和维护。需求满足与问题解…...
基于RK3588/RK3576+MCU STM32+AI的储能电站电池簇管理系统设计与实现
伴随近年来新型储能技术的高质量规模化发展，储能电站作为新能源领域的重要载体， 旨在配合逐步迈进智能电网时代，满足电力系统能源结构与分布的创新升级，给予相应规模 电池管理系统的设计与实现以新的挑战。同时，电子系…...
使用LightGlue进行图像配准并提取图像重叠区域
发表日期：2023年6月23日 项目地址：https://github.com/cvg/LightGlue https://github.com/cvg/glue-factory/ LightGlue是一个在精度上媲美Superglue，但在速度上比Superglue快一倍的模型。通过博主实测，LightGlue的配准效果比Su…...
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 的技术…...
第二十二章 MySQL锁之全局锁
目录 一、锁概述 二、全局锁概念 三、全局锁使用 四、全局锁特点 五、不加锁一致性数据备份 5.1. 实现方式 5.2. 优点和缺点 一、锁概述 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中，除传统的计算资源（CPU、RAM、I/O&#x…...
pytorch实现简单的情感分析算法
人工智能例子汇总：AI常见的算法和例子-CSDN博客 在PyTorch中实现中文情感分析算法通常涉及以下几个步骤：数据预处理、模型定义、训练和评估。下面是一个简单的实现示例，使用LSTM模型进行中文情感分析。 1. 数据预处理 首先，我…...
Win11关闭登录密码?
或者使用winR快捷键, 输入： netplwiz 进入页面后，按照提示按ctrlaltdel键更改密码。 在跳转页面点击更改密码。 输入原密码后，将新密码设置为空即可。 Win11的两个实用技巧系列之如何关闭登录密码?_win11关闭密码还是要输入-CSDN博客...
e2studio开发RA4M2(6)----GPIO外部中断（IRQ）配置
e2studio开发RA4M2.6--GPIO外部中断（IRQ）配置 概述视频教学样品申请硬件准备参考程序源码下载新建工程工程模板保存工程路径芯片配置工程模板选择时钟设置SWD调试口设置GPIO口配置按键中断配置中断回调函数主程序 概述 GPIO（通用输入/输出&a…...
DeepSeek 阐述 2025年前端发展趋势
预测2025年前端的发展趋势。首先，我需要考虑当前的前端 技术发展情况，以及近几年的变化趋势。比如，框架方面，React、Vue、Angular这些主流框架的更新方向和社区活跃度。可能用户想知道未来哪些技术会更流行，或者需要学…...
linux内核源代码中__init的作用？
在 Linux 内核源代码中，__init是一个特殊的宏，用于标记在内核初始化阶段使用的变量或函数。这个宏的作用是告诉内核编译器和链接器，被标记的变量或函数只在内核的初始化阶段使用，在系统启动完成后就不再需要了。因此，这…...
计算机从何而来？计算技术将向何处发展？
计算机的前生：机械计算工具的演进 算盘是计算机的起点，它其实是一台“机械式半自动化运算器”。打算盘的“口诀”其实就是它的编程语言，算盘珠就是它的存储器。 第二阶段是可以做四则运算的加法器、乘法器。1642年，法国数学家帕斯…...
浏览器的通信能力
浏览器的通信能力 用户代理 浏览器可以代替用户完成http请求，代替用户解析响应结果，所以我们称之为： 用户代理 user agent 在网络层面，对于前端开发者，必须要知道浏览器拥有的两大核心能力： 自动发出请…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
dify打造数据可视化图表
一、概述 在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
AI病理诊断七剑下天山，医疗未来触手可及
一、病理诊断困局：刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"，医生需通过显微镜观察组织切片，在细胞迷宫中捕捉癌变信号。某省病理质控报告显示，基层医院误诊率达12%-15%，专家会诊…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 ：HyperText Transfer Protocol（超文本传输协议） 默认端口 ：HTTP 使用 80 端口，HTTPS 使用 443 端口。 请求方法 ： GET ：用于获取资源，…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时，显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
基于Java+VUE+MariaDB实现（Web）仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...
为什么要创建 Vue 实例
核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...
LOOI机器人的技术实现解析：从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品，通过将智能手机转变为具有情感交互能力的桌面机器人，展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家，我将全面解析LOOI的技术实现架构，特别是其手势识别、物体识别和环境…...
手动给中文分词和 直接用神经网络RNN做有什么区别
手动分词和基于神经网络（如 RNN）的自动分词在原理、实现方式和效果上有显著差异，以下是核心对比： 1. 实现原理对比 对比维度手动分词（规则 / 词典驱动）神经网络 RNN 分词（数据驱动）…...