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

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

news 2026/4/4 1:10:33

思维导图

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解决方法②：

前端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…...

编程日记 2023/10/12 9:58:25

Linux 指令心法（十一）`tail` 显示文本文件的末尾部分

文章目录命令的概述和用途命令的用法命令行选项和参数的详细说明命令的示例命令的注意事项或提示命令的概述和用途 tail 是一个用于显示文本文件的末尾部分的命令。它在 Linux 和 Unix 系统中非常有用，因为它允许用户查看文件的最后几行，以便实时监视…...

编程日记 2023/10/12 9:57:23

Mac mov转mp4，详细转换步骤

Mac mov转mp4怎么转？视频文件格式为.mov是由Apple公司所开发的特殊格式。因其只能在苹果设备上播放，与他人分享时就会变得困难。为此，我们通常会选择使用MP4这种最受欢迎的视频格式。在日常使用中，MP4成为了大家首选的视频格式。而…...

编程日记 2023/10/12 9:56:21

高级深入--day31

Item Pipeline 当Item在Spider中被收集之后，它将会被传递到Item Pipeline，这些Item Pipeline组件按定义的顺序处理Item。每个Item Pipeline都是实现了简单方法的Python类，比如决定此Item是丢弃而存储。以下是item pipeline的一些典型应用&…...

编程日记 2023/10/12 9:54:20

一文讲解图像梯度

简介： 图像梯度计算的是图像变化的幅度。对于图像的边缘部分，其灰度值变化较大，梯度值变化也较大；相反，对于图像中比较平滑的部分，其灰度值变化较小，相应的梯度值变化也较小。一般情…...

编程日记 2023/10/12 9:53:19

湖州OLED透明拼接屏技术应用引领现代化旅游观光方式

湖州市位于中国浙江省北部，拥有悠久的历史和丰富的文化遗产。湖州市以其美丽的湖泊和秀丽的自然风光而闻名。作为中国重要的历史文化名城之一，湖州市有着丰富的文化遗产和历史资源，如古城墙、古建筑和古镇等。这为OLED透明拼接屏技术的应用…...

编程日记 2023/10/12 9:52:18

点云从入门到精通技术详解100篇-点云特征学习模型及其在配准中的应用（续）

目录基于局部邻域的点云特征学习模型 3.1引言 3.2自适应邻域选择算法...

编程日记 2023/10/12 9:50:17

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

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

编程日记 2023/10/12 9:49:15

centos yum 阿里云源 # 备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup# centos 6 wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-vault-6.10.repo curl -o /etc/yum.repos.d/CentOS-Base.repo h…...

编程日记 2023/10/12 9:47:13

Python+Tkinter 图形化界面基础篇：多线程和异步编程

PythonTkinter 图形化界面基础篇：多线程和异步编程引言为什么需要多线程和异步编程？使用多线程多线程示例步骤 1 ：导入必要的模块步骤 2 ：创建主窗口和按钮步骤 3 ：创建下载线程步骤 4 ：启动主事件循环使…...

编程日记 2023/10/12 9:46:11

第13章并发编程高阶（二）

13.11 Reentrantlock和Synchronized有哪些区别难度：★★ 重点：★★ 白话解析继续串线，搞明白了锁的设计，那Java设计的Reentrantlock锁和JVM底层的synchronized锁到底有什么区别呢。参考答案 1、底层实现层面 synchronized 是JVM层面的锁，是Java关键字 reentrantlock…...

编程日记 2023/10/12 9:44:10

Android AMS——栈管理详解（十一）

上一篇我们找到了栈管理所在的方法，这里继续对内部方法进行详细分析。 setInitialState：初始化函数。 computeLaunchingTaskFlags：检查 Activity 的启动模式。 computeSourceRootTask：处理源 Activity 的所在栈。 getReusableTask：获取能够复用的 Task。 computeTargetTas…...

编程日记 2023/10/12 9:41:07

【Redis】Set集合相关的命令

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

编程日记 2023/10/12 9:40:06

力扣第501题二叉树的众数 c++ (暴力加双指针优化）

题目 501. 二叉搜索树中的众数简单相关标签树深度优先搜索二叉搜索树二叉树给你一个含重复值的二叉搜索树（BST）的根节点 root ，找出并返回 BST 中的所有众数（即，出现频率最高的元素）。 …...

编程日记 2023/10/12 9:39:05

MARKDOWN 文档图片编码嵌入方案

#1 写在前面开始写这篇文章时，标题怎么定困扰我良久，缘于不晓得如何给接下来要做的事定个简单明了的标题：在📱终端只能纯文本交互的前提下，优雅展示 markdown 文档中的图片。这也许比问题本身还要棘手😄。…...

编程日记 2023/10/12 9:38:04

KubeVela可持续测试应用部署之Mock基础设施

Mock接口是我们常用的功能测试方案，有时候依赖的接口未开发完成或者依赖的第三方接口不提供测试环境等，只有Mock才能跑通流程。我们基于KubeVela开发的云原生应用交付平台，提供如初始化基础设施导入、中间件部署共用基础设施等相关能力的测试，需要依赖基础设施。虽然terr…...

编程日记 2023/10/12 9:36:00

代理IP、Socks5代理与网络工程：解析技术世界的无限可能

在当今数字化的世界中，网络工程师不仅需要保证网络的稳定性，还要应对多样的技术挑战。代理IP和Socks5代理技术已经成为网络工程师工具箱中不可或缺的利器，在跨界电商、爬虫、出海、网络安全、游戏等领域发挥关键作用。本文将深入探讨这两项技…...

编程日记 2023/10/12 9:34:58

OpenCV级联分类器识别车辆实践笔记

1. OpenCV 级联分类器的基本原理基于Haar特征的级联分类器的目标检测是Paul Viola和Michael Jones在2001年的论文中提出的一种有效的目标检测方法。这是一种基于机器学习的方法，从大量的正面和负面图像中训练级联函数。然后用它来检测其他图像中的物体。 Haar特征…...

编程日记 2023/10/12 9:33:57

VS编译的时候不生成Release文件夹

方法描述： Build>Configuration Manager>Release 编译》配置管理》选择发布版本再编译就有了具体操作过程第一步： 第二步： 第三步： 特此记录 anlog 2023年10月12日...

编程日记 2023/10/12 9:32:56

14.2 Socket 反向远程命令行

在本节，我们将继续深入探讨套接字通信技术，并介绍一种常见的用法，实现反向远程命令执行功能。对于安全从业者而言，经常需要在远程主机上执行命令并获取执行结果。本节将介绍如何利用 _popen() 函数来启动命令行进程，并…...

编程日记 2023/10/12 9:31:54

MAX17043电量计驱动开发：嵌入式电池管理实战指南

1. MAX17043 电量计库深度解析：面向嵌入式工程师的底层驱动开发指南1.1 芯片级功能定位与工程价值MAX17043 是 Maxim Integrated（现为 Analog Devices）推出的高精度单节锂离子/锂聚合物电池电量计 IC，采用 12 引脚 TDFN 封装&…...

编程新知 2026/4/4 0:15:41

驾校招生断崖式下跌？这3个数据驱动的获客策略，让报名量翻倍

驾校招生断崖式下跌？这3个数据驱动的获客策略，让报名量翻倍最近和几位驾校校长聊天，听到最多的感慨是：“以前学员排队等车，现在教练排队等学员。”这不是个别现象。某地驾培协会数据显示，2023年区域性驾校平…...

编程新知 2026/4/3 23:02:42

OPAL速率限制终极指南：如何有效控制策略更新频率

OPAL速率限制终极指南：如何有效控制策略更新频率【免费下载链接】opal Policy and data administration, distribution, and real-time updates on top of Policy Agents (OPA, Cedar, ...) 项目地址: https://gitcode.com/gh_mirrors/opal1/opal 在分布式策…...

编程新知 2026/4/3 19:57:10

AA-PEG-Lipoic acid，硫辛酸PEG乙酸，显著提升稳定性和生物相容性

一.名称英文名称：AA-PEG-LA，AA-PEG-Lipoic acid，Acetic Acid-PEG-LA，Acetic Acid-PEG-Lipoic acid，LA-PEG-AA，Lipoic acid-PEG-AA中文名称：硫辛酸聚乙二醇乙酸，硫辛酸PEG乙酸分子量&…...

编程新知 2026/4/3 19:55:08

批量图片添加文字水印工具：Windows 上手指南（预览与平铺）

面向需要在 Windows 上批量给图片叠文字水印的同事，工具名【批量图片添加文字水印工具】。下文只写能力与操作顺序，不写实现细节。输入与目录支持选择多个文件或整个文件夹，路径可拖拽填入；多文件路径用分号分隔。勾选「遍历…...

编程新知 2026/4/3 19:49:07

kprobe函数入口时的汇编跳板执行流程与栈帧机制

kprobe函数入口汇编跳板执行流程与栈帧机制文章目录kprobe函数入口汇编跳板执行流程与栈帧机制前言环境准备ftrace跳板创建跳板执行流程与栈帧逐行拆解初始状态与安全校验双层栈帧构建（CONFIG_FRAME_POINTER）通用寄存器保存与C函数参数准备剩余寄存器保…...

编程新知 2026/4/3 19:00:27

119. 使用 Fluentd concat 过滤器插件在牧场日志中串接多行日志

Situation 地理位置Logs of multiple lines are separated across multiple log events within Pod logs and there is a need to combine them into a single event before forwarding them to a logging solution. 多行日志在 Pod 日志中被分隔在多个日志事件中，…...

编程新知 2026/4/3 18:44:21