ES6入门---第三单元 模块七: Proxy的使用+Reflect的使用
proxy: 代理
扩展(增强)对象、方法(函数)一些功能
比如:
Vue
Vue.config.keyCodes.enter=65
Proxy作用: 比如vue中拦截
预警、上报、扩展功能、统计、增强对象等等
proxy是设计模式一种, 代理模式
语法:
new Proxy(target, handler);
let obj = new Proxy(被代理的对象,对代理的对象做什么操作)
handler:
{
set(){}, //设置的时候干的事情
get(){}, //获取干的事情
deleteProperty(){}, //删除
has(){} //问你有没有这个东西 ‘xxx’ in obj
apply() //调用函数处理
.....
}
let obj = {name:'Strive'};let newObj = new Proxy(obj,{//代理objget(target, property){//property 属性 get是获取信息//console.log(target, property);//TODOconsole.log(`您访问了${property}属性`);return target[property];//没有return返回值会都出现undefined}});console.log(newObj.name);
实现一个,访问一个对象身上属性,默认不存在的时候给了undefined,希望如果不存在错误(警告)信息:
let newObj = new Proxy(obj, {get(target, property){if(property in target){return target[property];}else{//throw new ReferenceError(`${property}属性不在此对象上`);console.warn(`${property}属性不在此对象上`);return '^_^';//替换了出现的undefined}}});
DOM.div()
DOM.a();
DOM.ul()
例:
<script>const DOM = new Proxy({},{get(target, property){//console.log(target, property);//property就是DOM.xxx 里面的xxxreturn function(attr={}, ...children){//json的内容,其他内容//console.log(attr, children);const el = document.createElement(property);//添加属性for(let key of Object.keys(attr)){el.setAttribute(key, attr[key]);}//添加子元素for(let child of children){if(typeof child == 'string'){child = document.createTextNode(child);//创建文本节点}el.appendChild(child);//添加}return el;}}});let oDiv = DOM.div({id:'div1',class:'aaa'},'我是div','呵呵呵');//json,内容,……console.log(oDiv);</script>
const DOM = new Proxy({},{get(target, property){//console.log(target, property);//property DOM.xxx 里面的xxxreturn function(attr={}, ...children){//console.log(attr, children);const el = document.createElement(property);//添加属性for(let key of Object.keys(attr)){el.setAttribute(key, attr[key]);}//添加子元素for(let child of children){if(typeof child == 'string'){child = document.createTextNode(child);}el.appendChild(child);}return el;}}});let oDiv = DOM.div({id:'div1',class:'aaa'},'我是div','呵呵呵',DOM.a({href:'http://www.51mmr.net'}, '访问官网'),DOM.ul({},DOM.li({},'1111'),DOM.li({},'2222'),DOM.li({},'3333'),DOM.li({},'4444')));window.onload=function(){document.body.appendChild(oDiv);};
set(), 设置,拦截:
设置一个年龄,保证是整数,且范围不能超过200
let obj =new Proxy({},{set(target, prop, value){if(prop == 'age'){if(!Number.isInteger(value)){throw new TypeError(`年龄必须为整数`);}if(value>200){throw new RangeError('年龄超标了,必须小于200岁');}}target[prop]=value; }});obj.a=123;obj.name = 'Strive';console.log(obj);obj.age = 201;
deleteProperty(): 删除,拦截:
let json = {a:1,b:2};let newJson = new Proxy(json, {deleteProperty(target, property){console.log(`您要删除${property}属性`);//TODOdelete target[property];}});delete newJson.a;console.log(newJson);
has(): 检测有没有
let newJson = new Proxy(json, {deleteProperty(target, property){console.log(`您要删除${property}属性`);//TODOdelete target[property];},has(target, property){console.log(`判断是否存在调用has方法`);//TODOreturn property in target;}});console.log('a' in newJson);
apply(target,context指向,args参数数组) :拦截方法
function fn(){return '我是函数';}let newFn = new Proxy(fn, {apply(){return '函数么?';}});console.log(newFn());
Reflect: 反射
将Object.xxx 语言内部方法如:Object.defineProperty放到Reflect对象身上
通过Reflect对象身上直接拿到语言内部东西
比如:
'assign' in Object -> Reflect.has(Object, 'assign')
delete json.a -> Reflect.deleteProperty(json, 'a');
let json ={a:1, b:2};/* delete json.a;console.log(json); */Reflect.deleteProperty(json, 'a');console.log(json);
Reflect.apply(调用的函数,this指向,参数数组);与fn.call() fn.apply() 作用类似
let res = Reflect.apply(Math.ceil,null, [9.8]);//变形式调用函数console.log(res);
function show(...args){console.log(this);console.log(args);}//show(1,2,3,4);//show.call('abc', 1,2,3,4);将this改变成abc//show.apply('abcd',[1,2,3,4]);Reflect.apply(show, 'aaaa', [1,2,3,4]);
function sum(a,b){return a+b;}let newSum = new Proxy(sum, {apply(target, context, args){//console.log(target, context, args);//console.log(...arguments);return Reflect.apply(...arguments);}});console.log(newSum(2,3))
相关文章:
ES6入门---第三单元 模块七: Proxy的使用+Reflect的使用
proxy: 代理 扩展(增强)对象、方法(函数)一些功能 比如: Vue Vue.config.keyCodes.enter65 Proxy作用: 比如vue中拦截 预警、上报、扩展功能、统计、增强对象等等 proxy是设计模式一种, 代理模式 语法: new Proxy(target, handler); …...
【JAVA】BigDecimal判断是否为0, / by zero的问题修复
bug场景 我要处理一个任务完成率的计算,任务完成率pct 实际值 real / 任务值 task 进入计算前,我需要判断task是否为空,或者为0,防止除法出错。 之前使用了equal方法 if(!task.equals(BigDecimal.ZERO))//开始计算因为刚开始测…...
从 “机器人 +“ 到 “+ 机器人“:算力政策撬动的产业生态革命
在深圳光明科学城的云端算力平台上,数据以每秒千万次的速度流动,这里每年发放的 600 万元算力补贴,正如同催化剂般激活着人形机器人产业的深层变革。当广东将 "算力券" 政策精准嵌入珠三角制造体系,一场从 "单机智…...
如何在24G显存机器上搭建一个超过gpt效果的DeepSeek-R1?
DeepSeek-R1蒸馏模型概述与应用指南  引言 DeepSeek-R1作为一款先进的AI推理模型,在性能上已超越GPT-4o和Claude-3.5等主流开源模型。为满足更广泛应用…...
seamless_communication,facebook推出的开源语音翻译项目
Seamless Communication是由Facebook Research开发的一个开源项目,旨在提供先进的语音和文本翻译功能,支持多国语音。 今天试着来复现下。 1、首先下载代码。 git clone https://github.com/facebookresearch/seamless_communication 2、按照步骤执…...
C++从入门到实战(十二)详细讲解C++如何实现内存管理
C从入门到实战(十二)详细讲解C如何实现内存管理 前言一、C内存管理方式1. new/delete操作内置类型2. 异常与内存管理的联系(简单了解)3. new和delete操作自定义类型 二、 operator new与operator delete函数(重点&…...
console-chat-gpt开源程序是用于 AI Chat API 的 Python CLI
一、软件介绍 文末提供程序和源码下载 console-chat-gpt开源程序是用于 AI Chat API 的 Python CLI,与 AI 模型聊天的终极 CLI 伴侣,直接从命令行享受与 OpenAI、MistralAI、Anthropic、xAI、Google AI、DeepSeek、阿里巴巴、Inception 或 Ollama 托管…...
影刀RPA开发-程序备注说明的必要性
1. 备注指令的调用 1.1 指令搜索 搜索出备注指令后,添加到代码框中 1.2 快捷输入 在代码框中,输入指令关键字,可以快速展示出相关指令 2.备注指令内容设置 备注信息要依据代码执行的功能书写 尽量写明该语句或该段落代码的功能作用 单行…...
第十节:图像处理基础-图像算术运算 (加法、减法、混合)
引言 在计算机视觉领域,图像算术运算是最基础却至关重要的核心技术。无论是实现简单的图片合成、开发智能监控系统,还是构建复杂的医学影像分析工具,加减运算和混合操作都扮演着关键角色。OpenCV作为最流行的计算机视觉库,提供了…...
如何使用UGUI的EventTrigger
前言 在 Unity 的 UGUI 系统中,EventTrigger 是一个强大的组件,允许开发者监听和处理多种 UI 交互事件。以下是详细的使用方法、示例代码、优缺点分析以及注意事项。 一、EventTrigger 基本用法 1. 添加 EventTrigger 组件 在 Unity 编辑器中选中 UI 对象(如 But…...
5G赋能农业物联网:智能化种植的新纪元
5G赋能农业物联网:智能化种植的新纪元 在农业领域,精准化、智能化已成为现代农业发展的方向。而5G的出现,让农业物联网(Agri-IoT)突破了传统的瓶颈,真正实现了实时监测、高效数据传输、智能化决策…...
LeetCode 热题 100 64. 最小路径和
LeetCode 热题 100 | 64. 最小路径和 大家好,今天我们来解决一道经典的动态规划问题——最小路径和。这道题在 LeetCode 上被标记为中等难度,要求找到从网格的左上角到右下角的路径,使得路径上的数字总和为最小。 问题描述 给定一个包含非负…...
精益数据分析(45/126):媒体网站商业模式的深度剖析与挑战应对
精益数据分析(45/126):媒体网站商业模式的深度剖析与挑战应对 在创业和数据分析的领域中,探索不同商业模式的运作机制和关键要点是提升业务能力的重要途径。今天,我们依旧带着共同进步的目标,深入研读《精…...
学习Linux的第四天
今天我们来学习Linux的网络配置,以及链表的知识开个小头 三种网络配置模式 桥接模式(用的最多) 2.Nat模式 3. 仅主机模式(Nat模式的功能外,只能在局域网通信,不能访问外网) 桥接模式…...
AGV导航控制器技术方案——基于EFISH-SBC-RK3576/SAIL-RK3576的国产化革新(新一代工业级自主可控解决方案)
一、方案核心架构 1. 硬件拓扑设计 主控单元:SAIL-RK3576核心板(八核A72A53M0异构架构)传感器层: 双激光雷达(RS-LiDAR-16线 SICK TIM240)9轴IMU(BMI088) 轮式编码器&…...
ISCC 2025练武题 WP部分
总结 垃圾比赛,垃圾题目,纯脑洞题,技术好不好没得关系,就看你脑洞大不大。 web里塞misc,re里塞misc真是牛逼他妈给牛逼开门牛逼到家。 逆天平台,卡的一批,靶机还是公用的,把flag删…...
mysql:什么是一致性视图(Read View)
一致性视图(Read View)是 MVCC(多版本并发控制)中的核心概念,用于实现事务隔离性。 它是一个逻辑概念,让事务在读取数据时看到特定时间点的数据库快照,而不受其他事务并发修改的影响。 一致性…...
android中背压问题面试题及高质量回答范例
🎯 回答的目标是: 表现出你理解背压的本质(不是框架知识,而是系统层面的问题)。 能清晰讲出几种处理背压的方案(理论 实战)。 能结合 Android 场景讲具体例子(比如 UI 线程、网络…...
【C++】C++11(上)
🚀write in front🚀 📜所属专栏: C学习 🛰️博客主页:睿睿的博客主页 🛰️代码仓库:🎉VS2022_C语言仓库 🎡您的点赞、关注、收藏、评论,是对我最大…...
工具分享:通过滑块拉取CAN报文信号数值自动发送报文
0. 概述 CAN报文发送工具使用wxpython进行开发,配套Excel模板可以通过修改Excel自定义界面展示的信号名称和信号的属性;同时,工具支持导入现场采集的报文数据自动按照配套Excel模板定义的报文发送周期进行模拟发送。 由于是我好几年前开发的作品,一些开发细节也记得不是很…...
android 折叠屏开发适配全解析:多窗口、铰链处理与响应式布局
安卓适配折叠屏指南 折叠屏设备为安卓开发带来了新的机遇和挑战。以下是适配折叠屏的关键要点: 1. 屏幕连续性检测 // 检查设备是否支持折叠屏特性 private fun isFoldableDevice(context: Context): Boolean {return context.packageManager.hasSystemFeature(&…...
Cloudera CDP 7.1.3 主机异常关机导致元数据丢失,node不能与CM通信
问题描述 plaintext ERROR Could not load post-deployment data from /var/run/cloudera-scm-agent/process/ccdeploy_hadoop-conf_etchadoopconf.cloudera.yarn_-8903374259073700469 IOError: [Errno 2] No such file or directory: /var/run/cloudera-scm-agent/proce…...
超越 DeepSeek-R1,英伟达新模型登顶
近日,英伟达发布全新开源模型系列 Llama-Nemotron,凭借卓越性能引发业界关注,有望重塑开源 AI 格局。 该系列在推理能力上超越 DeepSeek-R1,内存效率与吞吐量显著提升。其创新采用合成数据监督微调与强化学习训练,全方…...
centos8.5.2111 更换阿里云源
使用前提是服务器可以连接互联网 1、备份现有软件配置文件 cd /etc/yum.repos.d/ mkdir backup mv CentOS-* backup/ 2、下载阿里云的软件配置文件 wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-vault-8.5.2111.repo 3、清理并重建…...
阿里云平台与STM32的物联网设计
基于阿里云平台与STM32的物联网设计方案可结合硬件选型、通信协议、云端配置及功能实现等多个维度进行设计。以下是综合多个参考案例的详细设计方案: 一、硬件选型与架构设计 主控芯片选择 STM32系列:推荐使用STM32F103(如STM32F103ZET6、STM…...
ESP32- 开发笔记- 软件开发 6 蓝牙协议栈 1
1 蓝牙 ESP32 是一款支持蓝牙功能的强大微控制器,ESP-IDF (Espressif IoT Development Framework) 提供了完整的蓝牙开发支持。 1.1 蓝牙模式 ESP32 支持两种蓝牙模式,即同时支持经典蓝牙和低功耗蓝牙。 1.1.1 蓝牙经典 (BT/BDR/EDR) 支持传统蓝牙协…...
python爬虫爬取网站图片出现403解决方法【仅供学习使用】
基于CSDN第一篇文章,Python爬虫之入门保姆级教程,学不会我去你家刷厕所。 这篇文章是2021年作者发表的,由于此教程,网站添加了反爬机制,有作者通过添加cookie信息来达到原来的效果,Python爬虫添加Cookies以…...
利用动态数字孪生:Franka Research 3 机械臂在机器人策略评估中的创新实践——基于Real-is-Sim框架的仿真与现实闭环验证
一、前言: 在机器人技术飞速发展的今天,如何高效、准确地评估机器人在现实世界中的操作策略,成为制约机器人技术进一步突破的关键瓶颈。传统方法往往依赖于耗时且成本高昂的真实世界测试,而模拟环境虽能提供便利,却因…...
Spark-Core(RDD行动算子)
一、RDD行动算子 行动算子就是会触发action的算子,触发action的含义就是真正的计算数据。 1、reduce 函数签名: def reduce(f: (T, T) > T): T 函数说明:聚集 RDD 中的所有元素,先聚合分区内数据,再聚合分区间…...
spark转换算子
在 Apache Spark 中,转换算子(Transformation)是用于对 RDD(弹性分布式数据集)进行转换操作的函数。这些操作是惰性的,即在调用转换算子时,Spark 并不会立即执行计算,而是记录下转换…...
hadoop的运行模式
(一)Hadoop的运行模式 hadoop一共有如下三种运行方式: 1. 本地运行。数据存储在linux本地,测试偶尔用一下。我们上一节课使用的就是本地运行模式hadoop100。 2. 伪分布式。在一台机器上模拟出 Hadoop 分布式系统的各个组件&#x…...
力扣——25 K个一组翻转链表
目录 1.题目描述: 2.算法分析: 3.代码展示: 1.题目描述: 给你链表的头节点 head ,每 k 个节点一组进行翻转,请你返回修改后的链表。 k 是一个正整数,它的值小于或等于链表的长度。如果节点总…...
React Router Vs Vue Router
文章目录 前言✅ React Router vs Vue Router 对比一览🧩 React Router 的底层原理简述① 路由声明与匹配(基于 JSX)② 历史模式管理③ 响应式状态处理④ 路由渲染机制(Outlet) ✅ 总结:原理是否一样&#…...
Spark中RDD算子的介绍
引言 在大数据处理领域,Apache Spark凭借其高效性和灵活性备受青睐。而弹性分布式数据集(Resilient Distributed Datasets,简称RDD)则是Spark的核心数据结构。RDD算子作为操作RDD的关键工具,掌握它们对于充分发挥Spar…...
Vivo 手机官网交互效果实现解析
在现代网页设计中,流畅的滚动交互和精美的视觉效果是提升用户体验的关键。本文将深入解析 Vivo 手机官网 Demo 中的一个核心交互效果 —— 基于滚轮滚动的内容展示系统。这个系统允许用户通过滚动鼠标滚轮来浏览不同的手机镜头配置信息,同时伴随平滑的过…...
powershell批处理——io校验
powershell批处理——io校验 在刷题时,时常回想,OJ平台是如何校验竞赛队员提交的代码的,OJ平台并不看代码,而是使用“黑盒测试”,用测试数据来验证。对于每题,都事先设定了很多组输入数据(data…...
AI——认知建模工具:ACT-R
ACT-R(Adaptive Control of Thought—Rational)是一种用于模拟人类认知过程的计算架构,广泛应用于心理学、认知科学和人工智能研究。它通过模块化的方式模拟记忆、注意力、学习、决策等认知机制。以下是ACT-R的核心概念、安装方法、基础语法及…...
Docker 容器镜像环境的依赖导出
#工作记录 如果我们想获取 Docker 容器中已有镜像的所有的依赖包信息,包括其他可能的系统依赖,用于在其他环境(如 WSL 或 Windows)中重新搭建相同的运行环境。 以下是完整的步骤: 1. 导出 Python 依赖(r…...
[ubuntu]fatal error: Eigen/Core: No such file or directory
确认是否安装了eigen3sudo apt-get install libeigen3-dev 解决 fatal error: Eigen/Core: No such file or directory 如果已经安装,但当调用 eigen 库时,报错:fatal error: Eigen/Core: No such file or directory 这是因为 eigen 库默认…...
《硬件视界》专栏介绍(持续更新ing)
名人说:路漫漫其修远兮,吾将上下而求索。 —— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 目录 ✨ 专栏简介📚 当前专栏目录(持续更新中)&a…...
TypeScript类型挑战-刷题
TypeScript类型挑战 vscode刷题 vscode 插件 热身题 // Test Cases import type { Equal, Expect, NotAny } from "./test-utils";type cases [Expect<NotAny<HelloWorld>>, Expect<Equal<HelloWorld, string>>];// Your Code Here …...
Java后端开发day43--IO流(三)--缓冲流转换流序列化流
(以下内容全部来自上述课程) 缓冲流 1. 字节缓冲流 原理:底层自带了长度为8192的缓冲区提高性能 1.1拷贝文件(一次读写一个字节) //1.创建缓冲流的对象 BufferedInputStream bis new BufferedInputStream(new Fi…...
Nginx性能调优与深度监控
一:Nginx性能调优 1.更改进程数和连接数 (1)进程数 在高并发环境中,需要启动更多的Nginx进程以保证快速响应,用以处理用户的请求,避免造成阻塞。使用psaux命令查看Nginx运行进程的个数。从命令执行结果可…...
【LeetCode】高频 SQL 50题 题解
目录 查询 可回收且低脂的产品 寻找用户推荐人 大的国家 文章浏览 I 无效的推文 连接 使用唯一标识码替换员工ID 产品销售分析 I 进店却未进行过交易的顾客 上升的温度 每台机器的进程平均运行时间 员工奖金 学生们参加各科测试的次数 至少有5名直接下属的经理 …...
基于Qt的app开发第六天
写在前面 博主是一个大一下的计科生,现在正在做C面向对象程序设计的课程设计,具体功能可以看本专栏的第一篇博客。 目前的进度是:配好MySQL驱动->设计完界面->实现各个界面的切换 这一篇博主要初步实现待办板块的功能,即新建…...
剑指大规模 AI 可观测,阿里云 Prometheus 2.0 应运而生
作者:曾庆国(悦达) Prometheus 大家应该非常熟悉,正文开始前,让我们一起来回顾开源 Prometheus 项目的发展史。Prometheus 最初由 SoundCloud 的工程师 Bjrn Rabehl 和 Julius Volz 于 2012 年开发。当时,…...
阿里云2核2g安装nexus
阿里云2核2g安装nexus # 安装 JDK 1.8 sudo yum install -y java-1.8.0-openjdk-devel# 验证安装 java -version创建运行用户 cd /opt sudo wget https://download.sonatype.com/nexus/3/latest-unix.tar.gz sudo tar -xzf latest-unix.tar.gz sudo mv nexus-3* nexussudo us…...
eFish-SBC-RK3576工控板USB HOST接口USB3.0测试操作指南
本小节特指丝印号为J8的USB HOST接口,本开发板只有两个USB3.0接口,无USB2.0 这里接U盘测试。 在不接入任何USB外设的情况下,先查看/dev目录下是否存在/dev/sd*设备,执行命令: $ ls /dev/sd* 如下图所示: …...
嵌入式软件学习指南:从入门到进阶
嵌入式软件是物联网(IoT)、汽车电子、智能家居等领域的核心技术之一。它涉及硬件与软件的紧密结合,要求开发者不仅会写代码,还要理解底层硬件的工作原理。本文将带你系统了解嵌入式软件的学习路径、核心知识体系及实用资源推荐。 …...
【论文阅读】Adversarial Training Towards Robust Multimedia Recommender System
Adversarial Training Towards Robust Multimedia Recommender System 题目翻译:面向鲁棒多媒体推荐系统的对抗训练 论文链接:点这里 标签:多媒体推荐、对抗训练、推荐系统鲁棒性 摘要 随着多媒体内容在网络上的普及,迫切需要开…...