前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS进阶(三)

思维导图

1.编程思想

1.1 面向过程编程

1.2 面向对象编程 (oop)

2. 构造函数

3. 原型

3.1 原型

<!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>Document</title>
</head><body><script>// 自己定义 数组扩展方法  求和 和 最大值 // 1. 我们定义的这个方法,任何一个数组实例对象都可以使用// 2. 自定义的方法写到  数组.prototype 身上// 1. 最大值const arr = [1, 2, 3]Array.prototype.max = function () {// 展开运算符return Math.max(...this)// 原型函数里面的this 指向谁? 实例对象 arr}// 2. 最小值Array.prototype.min = function () {// 展开运算符return Math.min(...this)// 原型函数里面的this 指向谁? 实例对象 arr}console.log(arr.max())console.log([2, 5, 9].max())console.log(arr.min())// const arr = new Array(1, 2)// console.log(arr)// 3. 求和 方法 Array.prototype.sum = function () {return this.reduce((prev, item) => prev + item, 0)}console.log([1, 2, 3].sum())console.log([11, 21, 31].sum())</script>
</body></html>

3.2 constructor 属性

<!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>Document</title>
</head><body><script>// constructor  单词 构造函数// Star.prototype.sing = function () {//   console.log('唱歌')// }// Star.prototype.dance = function () {//   console.log('跳舞')// }function Star() {}// console.log(Star.prototype)Star.prototype = {// 从新指回创造这个原型对象的 构造函数constructor: Star,sing: function () {console.log('唱歌')},dance: function () {console.log('跳舞')},}console.log(Star.prototype)// console.log(Star.prototype.constructor)// const ldh = new Star()// console.log(Star.prototype.constructor === Star)</script>
</body></html>

3.3 对象原型

注意区别:对象原型 与 原型(对象)

<!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>Document</title>
</head><body><script>function Star() {}const ldh = new Star()// 对象原型__proto__ 指向 改构造函数的原型对象console.log(ldh.__proto__)// console.log(ldh.__proto__ === Star.prototype)// 对象原型里面有constructor 指向 构造函数 Starconsole.log(ldh.__proto__.constructor === Star)</script>
</body></html>

3.4 原型继承

3.5 原型链

实例对象 instanceof 构造函数

4.综合案例

<!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>

多次点击生成多个盒子bug解决方法②:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/131957.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#和JS交互之Microsoft.ClearScript.V8(V8引擎)

之前测试了很多JS引擎&#xff0c;都只支持es5语法&#xff0c;不支持执行es6&#xff0c;测试了下微软的V8反正能跑通&#xff0c;应该是支持的。还得是微软呀。 如图&#xff1a;安装相关包&#xff1a; 这是参考的官方V8代码 using Microsoft.ClearScript.JavaScript; us…

VRRP 虚拟路由器冗余协议的解析和配置

VRRP的解析 个人简介 原理和HSRP的差不多&#xff0c;少了一些状态就只有了三种状态 还有不同的就是VRRP严格按照抢占要求 一个VRRP组中具有最高优先级的设备成为Master路由器缺省优先级为100若优先级相同&#xff0c;具有最高接口IP地址最大的路由器成为Master路由器抢占(Pr…

uniapp微信小程序自定义封装分段器。

uniapp微信小程序自定义封装分段器。 话不多说先上效果 这里我用的是cil框架 vue3 下面贴代码 组价代码&#xff1a; <template><view class"page"><viewv-for"(item, index) in navList":key"index"click"changeNav(ind…

KEIL5添加沁恒的ch55x芯片(其他非arm和stm32芯片也可使用类似的方法)

准备工作 参考&#xff1a;https://www.iotword.com/8615.html 已经安装好keil5的软件环境 烧录工具下载 沁恒烧录工具地址&#xff0c;下载安装后如下图 操作步骤 打开从沁恒官网下载安装好的WHCISPTOOL软件 安装下图中的操作方式完成对安装软件keil5中的配置文件的生…

网工实验笔记:匹配工具ACL的使用

一、概述 访问控制列表简称为ACL&#xff0c;它使用包过滤技术&#xff0c;在路由器上读取第3层及第4层包头中的信息&#xff0c;如源地址、目的地址、源端口和目的端口等&#xff0c;根据预告定义好的规则对包进行过滤从而达到访问控制的目的。ACL分很多种&#xff0c;不同场…

【Redis】Set集合相关的命令

目录 命令SADDSMEMBERSSISMEMBERSCARDSPOPSMOVESREMSINTERSINTERSTORESUNIONSUNIONSTORESDIFFSDIFFSTORE 命令 SADD 将⼀个或者多个元素添加到set中。注意&#xff0c;重复的元素⽆法添加到set中。 SADD key member [member ...]SMEMBERS 获取⼀个set中的所有元素&#xff0…

排序算法——选择排序

一、介绍&#xff1a; 选择排序就是按照一定的顺序从选取第一个元素索引开始&#xff0c;将其储存在一个变量值中&#xff0c;根据排序规则比较后边每一个元素与这个元素的大小&#xff0c;根据排序规则需要&#xff0c;变量值的索引值进行替换&#xff0c;一轮遍历之后&#x…

知识增强语言模型提示 零样本知识图谱问答10.8+10.11

知识增强语言模型提示 零样本知识图谱问答 摘要介绍相关工作方法零样本QA的LM提示知识增强的LM提示与知识问题相关的知识检索 实验设置数据集大型语言模型基线模型和KAPIN评估指标实现细节 实验结果和分析结论 摘要 大型语言模型&#xff08;LLM&#xff09;能够执行 零样本cl…

基于FPGA的视频接口之千兆网口(四配置)

简介 相信网络上对于FPGA驱动网口的开发板、博客、论坛数不胜数,为何博主需要重新手敲一遍呢,而不是做一个文抄君呢!因为目前博主感觉网络上描述的多为应用层上的开发,非从底层开始说明,本博主的思虑还是按照老规矩,按照硬件、底层、应用等关系,使用三~四篇文章,来详细…

铁道交通运输运营3D模拟仿真实操提供一个沉浸、高效且环保的情境

VR模拟果蔬运输应急处理场景在农产品物流行业中具有重要的意义。这种模拟技术为农产品运输提供了全新的、更高效和更安全的方式来模拟真实世界的应急情况&#xff0c;帮助操作人员、研究者和管理者更好地理解和应对可能的运输风险措施。 VR模拟果蔬运输应急处理场景可以模拟出各…

Explain执行计划字段解释说明---type字段说明(02)

type显示访问类型详解 &#xff08;1&#xff09;system 表只有一行记录&#xff08;等于系统表&#xff09;&#xff0c;这是const类型的特列&#xff0c;平时不会出现&#xff0c;这个也可以忽略不计。 &#xff08;2&#xff09;const 表示通过索引一次就找到了,const用…

提升战斗力!吃鸡行家分享顶级游戏干货,助你轻松拿下绝地求生

作为吃鸡行家&#xff0c;我们都知道&#xff0c;在绝地求生中提高战斗力至关重要。今天我来分享一些独特的干货&#xff0c;帮助你成为顶级的吃鸡玩家&#xff0c;并分享一些方便吃鸡作图、装备皮肤库存展示和查询的技巧。 首先&#xff0c;让我们来谈谈绝地求生作图工具推荐。…