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

前端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.lryc.cn/news/189545.html

相关文章:

  • Linux 指令心法(十一)`tail` 显示文本文件的末尾部分
  • Mac mov转mp4,详细转换步骤
  • 高级深入--day31
  • 一文讲解图像梯度
  • 湖州OLED透明拼接屏技术应用引领现代化旅游观光方式
  • 点云从入门到精通技术详解100篇-点云特征学习模型及其在配准中的应用(续)
  • 铁道交通运输运营3D模拟仿真实操提供一个沉浸、高效且环保的情境
  • yum apt pip 阿里云源
  • Python+Tkinter 图形化界面基础篇:多线程和异步编程
  • 第13章 并发编程高阶(二)
  • Android AMS——栈管理详解(十一)
  • 【Redis】Set集合相关的命令
  • 力扣第501题 二叉树的众数 c++ (暴力 加 双指针优化)
  • MARKDOWN 文档图片编码嵌入方案
  • KubeVela可持续测试应用部署之Mock基础设施
  • 代理IP、Socks5代理与网络工程:解析技术世界的无限可能
  • OpenCV级联分类器识别车辆实践笔记
  • VS编译的时候不生成Release文件夹
  • 14.2 Socket 反向远程命令行
  • PCL点云处理之点云重建为Mesh模型并保存到PLY文件 ---方法二 (二百一十一)
  • CSS 中::after的妙用(实现在margin中显示内容)
  • SentenceTransformer使用多GPU加速向量化
  • 架构师-软件工程习题选择题
  • springboot单独在指定地方输出sql
  • gpio内部结构(一)
  • 【C++14保姆级教程】变量模板,Labmda泛型
  • LLM - 旋转位置编码 RoPE 代码详解
  • Vue之VueX知识探索(一起了解关于VueX的新世界)
  • 提升吃鸡战斗力,分享顶级作战干货!
  • 【rust】cargo的概念和使用方法