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

ES6 Proxy 用法总结以及 Object.defineProperty用法区别

news 来源：原创 2025/7/5 1:32:35

Proxy 是 ES6 引入的一种强大的拦截机制，用于定义对象的基本操作（如读取、赋值、删除等）的自定义行为。相较于 Object.defineProperty，Proxy 提供了更灵活、全面的拦截能力。

1. Proxy 语法

const proxy = new Proxy(target, handler);

target：被代理的对象
handler：定义拦截行为的对象

2. Proxy 基本用法

(1) 拦截对象的属性访问

const person = {name: "Alice",age: 25,
};const proxyPerson = new Proxy(person, {get(target, prop) {console.log(`访问属性: ${prop}`);return prop in target ? target[prop] : "属性不存在";},
});console.log(proxyPerson.name); // 访问属性: name  -> "Alice"
console.log(proxyPerson.gender); // 访问属性: gender  -> "属性不存在"

(2) 拦截对象的属性修改

const proxyPerson = new Proxy(person, {set(target, prop, value) {if (prop === "age" && typeof value !== "number") {throw new Error("年龄必须是数字");}target[prop] = value;console.log(`设置 ${prop} 为 ${value}`);return true;},
});proxyPerson.age = 30; // 设置 age 为 30
proxyPerson.age = "abc"; // 抛出错误: 年龄必须是数字

(3) 拦截对象的属性删除

const proxyPerson = new Proxy(person, {deleteProperty(target, prop) {console.log(`删除属性: ${prop}`);return delete target[prop];},
});delete proxyPerson.age; // 删除属性: age

(4) 拦截 in 操作符 (`has` 方法)

const proxyPerson = new Proxy(person, {has(target, prop) {console.log(`检查属性是否存在: ${prop}`);return prop in target;},
});console.log("name" in proxyPerson); // 检查属性是否存在: name -> true
console.log("gender" in proxyPerson); // 检查属性是否存在: gender -> false

const range = { start: 10, end: 50 };const proxy = new Proxy(range, {has(target, prop) {return prop >= target.start && prop <= target.end;}
});console.log(15 in proxy); // true
console.log(60 in proxy); // false

(5) 拦截函数调用 (`apply` 方法)

const multiply = new Proxy((a, b) => a * b, {apply(target, thisArg, args) {console.log(`调用函数 multiply，参数: ${args}`);return target(...args);}
});console.log(multiply(3, 4)); // 调用函数 multiply，参数: 3,4 -> 12

(6) 拦截构造函数 (`construct` 方法)

const Person = new Proxy(class {constructor(name) {this.name = name;}
}, {construct(target, args) {console.log(`创建实例，参数: ${args}`);return new target(...args);}
});const user = new Person("Alice"); // 创建实例，参数: Alice

特点：

可以 监听整个对象，而不是单个属性。
能拦截 所有操作（如 get、set、has、deleteProperty、apply 等）。
可以用于 动态代理，使得代码更具扩展性。

3. Proxy 实际使用场景

(1) 数据验证和格式化

const user = new Proxy({}, {set(target, prop, value) {if (prop === "age" && typeof value !== "number") {throw new Error("年龄必须是数字");}target[prop] = value;return true;}
});

(2) 实现私有属性和方法

const createUser = () => {const privateData = new WeakMap();return new Proxy({}, {get(target, prop) {if (prop.startsWith("_")) {throw new Error("无法访问私有属性");}return target[prop];}});
};

(3) 添加日志记录和调试功能

const logger = new Proxy({}, {get(target, prop) {console.log(`访问属性: ${prop}`);return target[prop];}
});

(4) 提供默认值和只读访问

const defaultSettings = new Proxy({}, {get(target, prop) {return prop in target ? target[prop] : "默认值";},set() {throw new Error("设置操作被禁止");}
});

(5) 实现惰性加载和缓存

const lazyObject = new Proxy({}, {get(target, prop) {if (!(prop in target)) {console.log(`初始化 ${prop}`);target[prop] = prop.toUpperCase();}return target[prop];}
});

(6) 解决 `this` 指向问题

const obj = {name: "Alice",greet() {return `Hello, ${this.name}`;}
};const proxyObj = new Proxy(obj, {get(target, prop, receiver) {return typeof target[prop] === "function" ? target[prop].bind(target) : target[prop];}
});const greet = proxyObj.greet;
console.log(greet()); // Hello, Alice

4.`Object.defineProperty`

Object.defineProperty() 允许直接在对象上定义新的属性，或者修改已有属性的特性（如可读写性、是否可枚举等）。

示例：

const person = {};Object.defineProperty(person, "name", {value: "Alice",writable: false, // 不能修改enumerable: true,configurable: false
});console.log(person.name); // Alice
person.name = "Bob"; // 失败，严格模式下会报错
console.log(person.name); // Alice

特点：

只能加工 单个属性，不能监听整个对象。
只能 定义静态的行为，不能动态处理对象属性的操作。
不能拦截删除、新增属性 或 函数调用。

5. `Proxy` 与 `Object.defineProperty` 详细对比

特性	`Object.defineProperty`	`Proxy`
监听属性读取	❌ 不支持	✅ 支持 (`get`)
监听属性赋值	✅ 支持 (`set`)	✅ 支持 (`set`)
监听属性删除	❌ 不支持	✅ 支持 (`deleteProperty`)
监听属性存在性	❌ 不支持	✅ 支持 (`has`) (`in` 关键字)
监听对象新增属性	❌ 不支持	✅ 支持 (`set`)
监听函数调用	❌ 不支持	✅ 支持 (`apply`)
监听构造函数	❌ 不支持	✅ 支持 (`construct`)
监听整个对象	❌ 需要对每个属性定义	✅ 一次性监听整个对象
适用于数组或集合	❌ 不适合	✅ 适合
可扩展性	❌ 需手动定义	✅ 更强大，支持代理嵌套

ES6 Proxy 用法总结以及 Object.defineProperty用法区别

Proxy 是 ES6 引入的一种强大的拦截机制，用于定义对象的基本操作（如读取、赋值、删除等）的自定义行为。相较于 Object.defineProperty，Proxy 提供了更灵活、全面的拦截能力。 1. Proxy 语法 const proxy new Proxy(target, hand…...

编程日记 2025/7/5 1:32:35

初次体验Tauri和Sycamore (2)

编程日记 2025/7/5 10:56:44

Qt - 地图相关 —— 2、Qt调用百度在线地图功能示例全集，包含线路规划、地铁线路查询等（附源码）

效果：由于录制软件导致exe显示不正常，实际运行没有任何问题。作者其他相关文章链接: Qt - 地图相关 —— 1、加载百度在线地图（附源码）...

编程日记 2025/7/5 10:53:44

ffmpeg基本用法

一、用法 ffmpeg [options] [[infile options] -i infile]... {[outfile options] outfile}... 说明： global options：全局选项，应用于整个 FFmpeg 进程，它们通常不受输入或输出部分的限制。 infile options：输入选…...

编程日记 2025/7/5 10:45:13

redis底层数据结构——链表

文章目录定义内部实现总结定义链表提供了高效的节点重排能力，以及顺序性的节点访间方式，并且可以通过增删节点来灵活地调整链表的长度。作为一种常用数据结构，链表内置在很多高级的编程语言里面，因为Redis使用的C语言并没有…...

编程日记 2025/7/5 10:31:16

Repo命令使用

repo 命令与 git 类似，但它主要用于管理多个 Git 仓库的操作。以下是等效的 repo 命令： 1. 获取新仓库代码克隆仓库 repo init -u <manifest_url> -b <branch_name> repo sync repo init：初始化 repo，指定远程清单…...

编程日记 2025/7/3 10:04:13

React 高级教程

编程日记 2025/7/2 12:40:08

Linux: ASoC 声卡硬件参数的设置过程简析

文章目录 1. 前言2. ASoC 声卡设备硬件参数2.1 将 DAI、Machine 平台的硬件参数添加到声卡2.2 打开 PCM 流时将声卡硬件参数配置到 PCM 流2.3 应用程序对 PCM 流参数进行修改调整 1. 前言限于作者能力水平，本文可能存在谬误，因此而给读者带来的损失&am…...

编程日记 2025/7/3 12:48:56

网络基础知识与配置

目录网络基础知识 （一）网络的概念 （二）网络协议 （三）网络拓扑结构 （四）IP地址和子网掩码显示和配置网络接口 （一）在Windows系统中 （二&a…...

编程日记 2025/7/4 23:11:32

【STM32】ADC|多通道ADC采集

本次实现的是ADC实现数字信号与模拟信号的转化，数字信号时不连续的，模拟信号是连续的。 1.ADC转化的原理模拟-数字转换技术使用的是逐次逼近法，使用二分比较的方法来确定电压值当单片机对应的参考电压为3.3v时，0~ 3.3v(模拟信…...

编程日记 2025/7/1 16:19:16

centos 7 关于引用stdatomic.h的问题

问题：/tmp/tmp4usxmdso/main.c:6:23: fatal error: stdatomic.h: No such file or directory #include <stdatomic.h> 解决步骤： 1.这个错误是因为缺少C编译器的标准原子操作头文件 stdatomic.h。在Linux系统中，我们需要安装开发工具…...

编程日记 2025/7/2 4:26:22

用语言模型探索语音风格空间：无需情感标签的情感TTS

用语言模型探索语音风格空间：无需情感标签的情感TTS 原文：Exploring speech style spaces with language models: Emotional TTS without emotion labels 今天我们要说的是一种无需情感标签的情感TTS。提出了一个基于FastSpeech2的E-TTS框架&#xff0…...

编程日记 2025/6/29 18:11:34

将Excel中的图片保存下载并导出

目录效果演示注意事项核心代码有需要将excel中的图片解析出来保存到本地的小伙子们看过来！！！ 效果演示注意事项仅支持xlsx格式：此方法适用于Office 2007及以上版本的.xlsx文件，旧版.xls格式无法使用。图片名…...

编程日记 2025/7/1 1:14:13

2.11日学习总结

题目一 ： AC代码 #include <stdio.h> #include <stdlib.h>// 定义长整型 typedef long long ll;// 定义求最大值和最小值的宏函数 #define MAX(a, b) ((a) > (b) ? (a) : (b)) #define MIN(a, b) ((a) < (b) ? (a) : (b))// 定义数组和变量 ll…...

编程日记 2025/7/5 4:53:09

安川伺服控制器MP系列优势特点及行业应用

在工业自动化领域，运动控制器的性能直接决定了设备的精度、效率和可靠性。作为全球领先的运动控制品牌，安川电机伺服控制器凭借其卓越的技术优势和广泛的应用场景，正在为智能制造注入强劲动力！ MP3100：主板型运动控制…...

编程日记 2025/7/5 1:07:48

【腾讯地图】录入经纬度功能 - 支持地图选点

目录效果展示代码引入地图服务地址弹框中输入框 - 支持手动输入经纬度/地图选点按钮地图选点弹框组件当前文章 - 地图功能与 https://blog.csdn.net/m0_53562074/article/details/143677335 功能类似效果展示代码引入地图服务地址 public/index.html <!-- 互联网地图…...

编程日记 2025/7/5 5:22:51

Mybatis快速入门与核心知识总结

Mybatis 1. 实体类（Entity Class）1.1 实体类的定义1.2 简化编写1.2.1 Data1.2.2 AllArgsConstructor1.2.3 NoArgsConstructor 2. 创建 Mapper 接口2.1 Param2.2 #{} 占位符2.3 SQL 预编译 3. 配置 MyBatis XML 映射文件（可选）3.1 …...

编程日记 2025/7/1 18:31:59

RK3568平台开发系列讲解（调试篇）网卡队列均衡负载

🚀返回专栏总目录文章目录一、RPS 的介绍1. RPS 的工作原理2. RPS 配置3. 启用和调优 RPS4. RPS 优势二、下行测试iperf测试沉淀、分享、成长，让自己和他人都能有所收获！😄 RPS（Receive Packet Steering）是一种用于提高网络接收性能的技术，通常用于多核处理器系统中…...

编程日记 2025/7/2 1:37:09

Matlab机械手碰撞检测应用

本文包含三个部分： Matlab碰撞检测的实现URDF文件的制作机械手STL文件添加夹爪一.Matlab碰撞检测的实现首先上代码 %% 检测在结构环境中机器人是否与物体之间发生碰撞情况，如何避免？ % https://www.mathworks.com/help/robotics/ug/che…...

编程日记 2025/7/3 17:50:05

【前端】几种常见的跨域解决方案代理的概念

几种常见的跨域解决方案&代理的概念一、常见的跨域解决方案1. 服务端配置CORS（Cross-Origin Resource Sharing）：2. Nginx代理3. Vue CLI配置代理：4 .uni-app在manifest.json中配置代理来解决：5. 使用WebSocket通讯…...

编程日记 2025/6/28 13:12:58

服务器有多少线程?发起一个请求调用第三方服务，是新增加一个请求吗?如果服务器线程使用完了怎么办?

目录 1. 服务器有多少线程？（1）服务器类型（2）配置参数（3）硬件资源 2. 发起一个请求调用第三方服务，是新增加一个线程吗？（1）同步调用（2）异步调用（3）HTTP 客户端 3. 如果服务器线程使用完了怎么办？（1）请求被拒绝（2）性能下降（3）解决方案…...

编程日记 2025/6/30 21:17:40

【Spring AI】基于SpringAI+Vue3+ElementPlus的QA系统实现一

整理不易，请不要吝啬你的赞和收藏。 1. 前言这是 SpringAI 系列的第二篇文章，这篇文章将介绍如何基于 RAG 技术，使用 SpringAI Vue3 ElementPlus 实现一个 Q&A 系统。本文使用 deepseek 的 DeepSeek-V3 作为聊天模型，使用…...

编程日记 2025/6/30 21:19:40

前端快速生成接口方法

大家好，我是苏麟，今天聊一下OpenApi。官网 ： umijs/openapi - npm 安装命令 npm i --save-dev umijs/openapi 在根目录（项目目录下）创建文件 openapi.config.js import { generateService } from umijs/openapi// 自…...

编程日记 2025/7/2 6:47:57

【Qt 常用控件】多元素控件（QListWidget、QTabelWidgt、QTreeWidget）

**View和**Widget的区别？ **View的实现更底层，**Widget是基于**View封装实现的更易用的类型。 **View使用MVC结构 MVC是软件开发中经典的软件结构组织形式，软件设计模式。 M（model）模型。管理应用程序的核心数据和…...

编程日记 2025/6/30 12:13:44

java 读取sq3所有表数据到objectNode

1.实现效果：将sq3中所有表的所有字段读到objectNode 对象中，兼容后期表字段增删情况，数据组织形式如下图所示： 代码截图： 代码如下： package com.xxx.check.util;import java.sql.*; import java.util.Arr…...

编程日记 2025/7/4 21:40:42

react redux用法学习

参考资料： https://www.bilibili.com/video/BV1ZB4y1Z7o8 https://cn.redux.js.org/tutorials/essentials/part-5-async-logic AI工具：deepseek，通义灵码第一天安装相关依赖： 使用redux的中间件： npm i react-redu…...

编程日记 2025/7/2 11:06:24

C++20中的std::atomic_ref

一、std::atomic_ref 我们在学习C11后的原子操作时，都需要提前定义好std::atomic变量，然后才可以在后续的应用程序中进行使用。原子操作的优势在很多场合下优势非常明显，所以这也使得很多开发者越来习惯使用原子变量。但是，在实…...

编程日记 2025/7/5 7:03:23

encodeURI()，encodeURIComponent()区别

encodeURI()，encodeURIComponent()区别 encodeURI(): 对整个url(链接/网络链接)进行编码。对中文，完全编码。对英文不带空格则不会编码，带空格则会对空格编码。解码：decodeURI() 例如： let ChineseUrl "htt…...

编程日记 2025/7/4 18:14:58

Selenium：网页frame与多窗口处理

🍅 点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快一、多窗口处理 1.1、多窗口简介点击某些链接，会重新打开⼀个窗⼜，对于这种情况，想在新页⾯上操作，就得先切换窗…...

编程日记 2025/6/30 19:53:47

自动驾驶---如何打造一款属于自己的自动驾驶系统

在笔者的专栏《自动驾驶Planning决策规划》中，主要讲解了行车的相关知识，从Routing，到Behavior Planning，再到Motion Planning，以及最后的Control，笔者都做了相关介绍，其中主要包括算法在量产上…...

编程日记 2025/7/2 5:37:42

开源机器人+具身智能解决方案+AI

开源机器人、具身智能（Embodied Intelligence）以及AI技术的结合，可以为机器人领域带来全新的解决方案。以下是这一结合的可能方向和具体方案： 1. 开源机器人平台开源机器人平台为开发者提供了灵活的基础架构，可以在此基础上结合具身智能和AI技术。以下是一些常用的开源机…...

编程日记 2025/7/4 16:37:40

【web自动化】指定chromedriver以及chrome路径

selenium自动化，指定chromedriver，以及chrome路径对应这篇文章，可以点击查看，详情 from selenium import webdriverdef get_driver():# 获取配置对象option webdriver.ChromeOptions()option.add_experimental_option("de…...

编程日记 2025/7/4 1:20:42

高等代数笔记—线性变换

latex花体字母与花体数字 https://blog.csdn.net/weixin_39589455/article/details/133846783 https://blog.csdn.net/orz_include/article/details/123645710线性变换线性空间 V V V到自身的映射称为 V V V的一个变换，最基本的是线性变换。定义：变换…...

编程日记 2025/7/2 22:32:37

Kickstart自动化安装过程中自动选择较小的磁盘安装操作系统

Kickstart自动化安装过程中自动选择较小的磁盘安装操作系统需求在实际生成操作过程中，一般会遇到物理服务器存在多块盘的情况。安装过程中，磁盘的标签是随机分配的，并不是空间较小的盘，就会使用较小的磁盘标签而需求往往需要…...

编程日记 2025/7/4 20:19:11

2024BaseCTF_week4_web上

继续！冲冲冲目录圣钥之战1.0 nodejs 原型原型链原型链污染回到题目 flag直接读取不就行了？ 圣钥之战1.0 from flask import Flask,request import jsonapp Flask(__name__)def merge(src, dst):for k, v in src.items():if hasattr(dst, __geti…...

编程日记 2025/6/30 12:07:45

大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡

大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡背景前端开发接口请求，调试，联调，接入数据，前端必不可少工具，postman是一个非常好…...

编程日记 2025/6/28 12:41:52

内网穿透的应用-Ubuntu本地Docker搭建pichome文件管理系统打造个人云相册

文章目录前言1.关于pichome2.本地部署pichome3.简单使用pichome4. 安装内网穿透5.配置pichome公网地址6. 配置固定公网地址前言你是不是也经常遇到这样的尴尬：手机、电脑里堆满了照片和视频，想找一张特定的图片时却像在大海捞针一样无从下手&#xf…...

编程日记 2025/7/1 21:16:42

深度学习之神经网络框架搭建及模型优化

神经网络框架搭建及模型优化目录神经网络框架搭建及模型优化1 数据及配置1.1 配置1.2 数据1.3 函数导入1.4 数据函数1.5 数据打包 2 神经网络框架搭建2.1 框架确认2.2 函数搭建2.3 框架上传 3 模型优化3.1 函数理解3.2 训练模型和测试模型代码 4 最终代码测试4.1 SGD优化算法…...

编程日记 2025/7/4 18:56:09

DeepSeek AI R1推理大模型API集成文档

DeepSeek AI R1推理大模型API集成文档引言随着自然语言处理技术的飞速发展，大语言模型在各行各业的应用日益广泛。DeepSeek R1作为一款高性能、开源的大语言模型，凭借其强大的文本生成能力、高效的推理性能和灵活的接口设计，吸引了大量开发…...

编程日记 2025/7/1 20:19:47

怎麼使用靜態住宅IP進行多社媒帳號管理

隨著社交媒體平臺的多樣化，很多人發現一個社媒帳號已經無法滿足需求。以下是幾個常見場景： 企業需求：企業可能需要在不同平臺上運營多個品牌帳號，為每個市場地區單獨設立帳號。個人需求：一些自由職業者或內容創作者可…...

编程日记 2025/6/30 20:12:29

【Elasticsearch】Bucket Selector Aggregation

Elasticsearch 的Bucket Selector Aggregation是一种强大的管道聚合功能，用于根据条件过滤聚合结果中的桶（buckets）。它允许用户通过编写脚本来动态决定哪些桶应该被保留，哪些应该被过滤掉。以下是对Bucket Selector Aggregation的…...

编程日记 2025/7/5 1:52:18

CEF132 编译指南 MacOS 篇 - 启程：认识 CEF (一)

1. 引言在当今的软件开发领域，将 Web 技术融入桌面应用程序已成为一种趋势。开发者们寻求一种方式，既能充分利用原生应用的性能，又能享受 Web 开发带来的高效和灵活性。Chromium Embedded Framework (CEF) 应运而生，它是一个基于…...

编程日记 2025/6/29 16:35:03

Python 操作 MongoDB 教程

一、引言在当今数字化时代，数据的存储和管理至关重要。传统的关系型数据库在处理一些复杂场景时可能会显得力不从心，而 NoSQL 数据库应运而生。MongoDB 作为一款开源的、面向文档的 NoSQL 数据库，凭借其高性能、高可扩展性和灵活的数据模型…...

编程日记 2025/7/3 7:39:30

长安汽车发布“北斗天枢2.0”计划，深蓝汽车普及全民智驾

2月9日，长安汽车智能化战略“北斗天枢2.0”计划暨深蓝汽车全场景智能驾驶解决方案发布会在重庆盛大召开。此次发布会标志着长安汽车正式迈入智能化战略的新纪元，携手众多“中国智驾合伙人”，共同开启全民智驾元年。发布会上，长安…...

编程日记 2025/7/2 15:29:00

SpringBoot速成（七）注册实战P2-P4

1.创建数据库创建依赖引入 <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>3.0.3</version></dependency> <…...

编程日记 2025/7/3 15:49:48

大语言模型RAG，transformer

1、RAG技术流总结第一张图是比较经典的RAG知识图谱，第二张图是更加详细扎实的介绍图。 1.1 索引坦白来说这部分的技术并不是大模型领域的，更像是之前技术在大模型领域的应用；早在2019年我就做过faiss部分的尝试，彼时索引技术已…...

编程日记 2025/7/2 7:05:01

Crowdin 在线本地化平台调用硅基流动AI预翻译

平台介绍硅基流动（AI服务平台） 官网：https://siliconflow.cn/zh-cn/ 官方介绍我主要使用：云服务平台 SilliconCloud 此平台已经将热门的开源大语言模型部署，花钱买额度，就能使用 API 最近有上线 Deep…...

编程日记 2025/7/1 18:16:35

第5章数据库系统（选择｜案例｜论文）（重点★★★★★）

5.1 数据库管理系统1 数据库是长期存储在计算机内的、有组织的、可共享的数据集合，数据库系统是指在计算机信息系统中引入数据库后的系统，一般由数据库、数据库管理系统 (DataBaseManagement System，DBMS)、应用系统、数据库管理员(DataBase…...

编程日记 2025/7/2 4:02:38

linux部署node服务

1、安装nvm管理node版本 # 下载、解压到指定目录 wget https://github.com/nvm-sh/nvm/archive/refs/tags/v0.39.1.tar.gz tar -zxvf nvm-0.39.0.tar.gz -C /opt/nvm # 配置环境 vim ~/.bashrc~：这是一个路径简写符号，代表当前用户的主目录。在大多数 …...

编程日记 2025/7/3 8:01:47

【AI赋能】蓝耘智算平台实战指南：3步构建企业级DeepSeek智能助手

蓝耘智算平台实战指南：3步构建企业级DeepSeek智能助手引言：AI大模型时代的算力革命在2025年全球AI技术峰会上，DeepSeek-R1凭借其开源架构与实时推理能力，成为首个通过图灵测试的中文大模型。该模型在语言理解、跨模态交互等维…...

编程日记 2025/6/30 16:40:57