JavaScript中的new Proxy()和Object.defineProperty使用详细,Vue2和vue3中双向数据绑定的原理

简介:

  • Object.defineProperty() 是 JavaScript 中一个强大且常用的方法,用于定义对象属性,允许我们精确地控制属性的行为,包括读取、写入和删除等操作,是vue2中双向数据绑定的原理;

  • new Proxy() 是ES6中一种用于创建代理对象的特殊对象,它允许我们拦截并自定义目标对象的操作,例如属性访问、赋值、函数调用等。Proxy提供了一种机制,可以在目标对象上设置拦截器,从而拦截对目标对象的操作,是vue3中双向数据绑定的原理。

一、Object.defineProperty()

1、详细介绍

Object.defineProperty()方法 是一个用于定义或修改对象属性的方法,可以精确地控制属性的行为,例如可写性、可枚举性和可配置性;在Object.defineProperty 方法中,有三个必需的参数和一个可选的第四参数。

  • obj (必需):要定义属性的对象。可以是任何 JavaScript 对象。
  • prop (必需):要定义或修改的属性的名称。可以是一个字符串,表示属性的名称。
  • descriptor (必需):一个对象,用于定义或修改属性的特性。

还可以包含以下可选的属性:

  • - configurable (可选):布尔值,表示该属性是否可以被删除或修改特性。默认为 false。
  • - enumerable (可选):布尔值,表示该属性是否可以在 for...in 循环中被枚举。默认为 false。
  • - value (可选):任意类型的值,表示属性的初始值。默认为 undefined。
  • - writable (可选):布尔值,表示该属性的值是否可以被修改。默认为 false。
  • - get (可选):函数,表示获取属性值时要调用的函数。
  • - set (可选):函数,表示设置属性值时要调用的函数。

2、使用实例

  const obj = {    name: "小明", age: 18    }//或者const obj = {    }//这里不能使用const,const定义的是常量,无法修改;let demoBute= obj.name;//使用 Object.defineProperty 定义属性名为 name 的属性Object.defineProperty(obj, "name", {//可枚举属性,可以在 for...in 循环中被枚举enumerable: true,//可配置属性,可以使用 delete 运算符删除属性configurable: true,//获取属性值的函数get: function () {console.log("获取,收集依赖");return demoBute},//设置属性值的函数set: function (value) {console.log("更新,通知用户");demoBute = value;}})//修改,触发set函数obj.name = "小红"//控制台输出:更新,通知用户//调用,出发get函数console.log(obj.name);//控制台输出:获取,收集依赖//小明//多次调用,看下运行顺序,按照调用顺序依次执行(set > get > log)//只要调用obj都会触发依赖函数obj.name = "小红";             //set >console.log(obj.name);         //get > log//控制台输出: //更新,通知用户//获取,收集依赖//小红

3、注意事项

  •  get 函数的作用是在访问属性值时被调用,它不接受任何参数,但需要返回属性的值。在示例中,我们通过return demoBute返回了name的属性值 ;

  • set 函数的作用是在设置属性值时被调用,它接受一个参数 value,该参数表示要设置的属性值。在示例中,我们直接把修改后的值value 赋值给demoBute,实现更新;

  • get 和set 函数,不会同时被触发,它们根据属性的读取或设置操作来决定调用哪个函数;

  • 该方法按照调用顺序,从上到下依次执行,就是有更新就只运行set函数,没更新,就只运行get函数;

二、new Proxy()

1、详细介绍

✨new Proxy() 方法是一个允许您拦截并自定义对象的底层操作。通过使用Proxy,您可以拦截对象的各种操作,如属性访问、属性赋值、函数调用等,并在这些操作发生时执行自定义行为;在Proxy中,常用的有两个参数target和handler,target 是您要代理的目标对象, handler 是一个包含各种拦截操作的对象。 handler 对象中的每个属性都是一个特殊的拦截器,用于拦截不同的操作。

2、基本语法

const target = {...... }const handler = {get(target, property, receiver){//拦截属性的读取操作},set(target, property, value, receiver){//拦截属性}
}​​​​​​​const proxy = new Proxy(target, handler);

3、使用实例

在Proxy中,get和set是handler对象中两个常用的拦截器函数,用于拦截对象属性的读取和赋值操作。下面详细介绍这两个函数的用法和功能:

(1)、get(target , property , receiver)

  • - target :目标对象,即被代理的对象。
  • - property :要访问的属性名。
  • - receiver:最初被调用的对象,通常是代理对象或继承代理对象的对象。 - 返回值:返回属性的值。

get 函数在访问目标对象的属性时触发,可以用来拦截属性的读取操作。您可以在 get 函数内部添加自定义的逻辑,例如记录日志、验证访问权限等。下面是一个示例:

const target = {name: "Bob",age: 18
};
const handler = {get(target, property, receiver) {console.log(`正在读取属性:${property}`);return target[property];}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 输出:正在读取属性:name,Bob
console.log(proxy.age); // 输出:正在读取属性:age,18

这里我们创建了一个代理对象 proxy ,当访问 proxy 的属性时, get 函数会被触发,并打印相应的日志信息。

(2)、set(target , property , value , receiver) 

  • - target :目标对象,即被代理的对象。
  • - property :要设置的属性名。
  • - value :要设置的属性值。
  • - receiver:最初被调用的对象,通常是代理对象或继承代理对象的对象。 - 返回值:返回一个布尔值,表示属性是否设置成功。​​​​​​​

set 函数在给目标对象的属性赋值时触发,可以用来拦截属性的赋值操作。您可以在 set 函数内部添加自定义的逻辑,例如验证赋值的合法性、记录日志等。下面是一个示例:

const target = {name: "Carl",age: 20
};
const handler = {set(target, property, value, receiver) {console.log(`正在设置属性:${property},新值为:${value}`);target[property] = value;return true;}
};
const proxy = new Proxy(target, handler);
proxy.age = 30; // 输出:正在设置属性:age,新值为:30
console.log(proxy.age); // 输出:30

在这里,我们给proxy的age属性赋值时,set函数会被触发,并打印相应的日志信息;通过get 和 set 拦截器函数,您可以在读取和赋值属性时执行自定义的行为,从而实现更灵活和可控的对象操作。

(3)、完整实例​​​​​

const target = {name: "Alice",age: 25
};const handler = {get(target, property, receiver) {console.log(`正在读取属性:${property}`);return target[property];},set(target, property, value, receiver) {console.log(`正在设置属性:${property},新值为:${value}`);target[property] = value;return true;}
};const proxy = new Proxy(target, handler);console.log(proxy.name);     // 输出:正在读取属性:name,Alice
proxy.age = 30;             // 输出:正在设置属性:age,新值为:30
console.log(proxy.age);     // 输出:正在读取属性:age,30

4、handler对象中的其它参数

  •  get(target, property, receiver):拦截属性的读取操作。
  •  set(target, property, value, receiver):拦截属性的赋值操作。
  •  apply(target, thisArg, argumentsList):拦截函数的调用操作。
  •  has(target, property):拦截in操作符的操作。
  •  deleteProperty(target, property):拦截属性的删除操作

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

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

相关文章

Tomcat布署及优化

1.Tomcat简介 Tomcat 是 Java 语言开发的,Tomcat 服务器是一个免费的开放源代码的 Web 应用服务器,Tomcat 属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试 JSP 程序的首选。一般来说&…

在实训云平台上配置云主机

文章目录 零、学习目标一、实训云升级二、实训云登录(一)登录实训云(二)切换界面语言(三)规划云主机实例 三、创建网络三、创建路由器2024-2-29更新到此四、添加接口五、创建端口六、添加安全组规则七、创建…

反相输入放大器与生俱来的坑

我们都知道反相放大器能将输入的信号反相放大,这是很基本的知识,学过电路的一般都知道。反相放大器的公式为Vout -Vin*Rf/Rin(运算放大器应用汇总)。根据已知的公式,能很轻松的完成设计,但反相放大器与生俱…

每日一类:QString类深入讲解

QString类是Qt框架中的一个核心组件,设计用于方便、高效地处理Unicode字符串。与标准C中的字符串处理方式相比,QString提供了更为丰富的API,支持国际化,并且内部使用UTF-16编码,能够处理世界上几乎所有的语言文字。 设…

【PHP进阶】Rabbitmq的实际使用

RabbitMQ是一个流行的消息队列中间件,它提供了可靠的消息传递机制。在使用RabbitMQ时,有几个重要的概念需要了解: 消息队列(Message Queue):RabbitMQ中的核心概念之一。它是消息的缓冲区,用于存…

容器安全工具使用指南:保障容器环境安全的利器

随着容器技术的广泛应用,容器安全成为关注的焦点。本文将深入介绍几个流行的容器安全工具,我们将深入了解容器安全领域的Top 10工具,包括Trivy、veinmind-tools、Clair、Docker Bench for Security、Sysdig Falco、neuVector等,详细讲解它们的功能、原理、安装和使用方法,…

【精简版】Ubuntu/Linux Anaconda 命令行终端安装

网上重复内容很多,大都啰里啰嗦,特作此笔记。 【精简版】Ubuntu/Linux Anaconda 命令行安装 1 下载安装包1.1 寻找适配版本安装包1.2 下载 2 运行安装程序3 设置安装路径4 添加环境变量并运行4.1 环境变量4.2 运行 5 验证安装成功感谢及参考博文 1 下载…

js ES6判断字符串是否以某个字符串开头或者结尾startsWith、endsWith

1.前言 startsWith:startsWith方法用于检查字符串是否以指定的字符串开头。 endsWith:endsWith方法用于检查字符串是否以指定的字符串结尾。 2.用法示例 const str Hello, world!;console.log(str.startsWith(Hello)); // true console.log(str.starts…

音频提取使用什么方法?视频提取音频

在数字技术与多媒体日益普及的今天,音频提取已成为一个常见且重要的任务。无论是为了制作视频、编辑音乐,还是进行语音识别和分析,我们都需要从原始材料中提取音频。那么,音频提取通常使用什么方法呢? 1. 使用专业的音…

【Git教程】(七)变基与拣取 —— 变基操作的概念、适用场景及其实现方式,拣取操作的实现 ~

Git教程 变基与拣取 1️⃣ 工作原理:复制提交2️⃣ 避免“钻石链”3️⃣ 什么情况下会遇到冲突4️⃣ 移植分支5️⃣ 执行变基后原提交的情况6️⃣ 提交的原件与副本存在于同一版本库中所带来的问题7️⃣ 捡取🌾 总结 通常, 一段提交历史中往…

编写科技项目验收测试报告需要注意什么?第三方验收测试多少钱?

科技项目验收测试是一个非常重要的环节,它对于确保科技项目的质量和可用性起着至关重要的作用。在项目完成后,进行科技项目验收测试可以评估项目的功能、性能和可靠性等方面,并生成科技项目验收测试报告,以提供给项目的相关方参考…

第十六届“中关村青联杯”全国研究生数学建模竞赛-E题:全球变暖气候预测分析(续)

目录 五、问题二:模型的建立与求解 5.1 问题分析 5.2 数据获取及处理 5.2.1 数据获取

git commit 的规范

今天在一个项目中提交git时报了下面的错误:subject may not be empty [subject-empty] type may not be empty [type-empty],上网查阅了一些资料,发现这种一种规范约束,用下面的命令我又重新提交了一次 git commit -m "feat…

SpringFramework实战指南(七)

SpringFramework实战指南(七) 4.5 三种配置方式总结4.5.1 XML方式配置总结4.5.2 XML+注解方式配置总结4.5.3 完全注解方式配置总结4.6 整合Spring5-Test5搭建测试环境4.5 三种配置方式总结 4.5.1 XML方式配置总结 所有内容写到xml格式配置文件中声明bean通过<bean标签<…

Docker技术概论(2):Docker环境的搭建

Docker技术概论&#xff08;2&#xff09; Docker环境的搭建 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blo…

自动采集API壁纸系统源码自适应手机端

HTML5响应式自动采集API壁纸系统源码自适应手机端 瀑布流加载 源码下载&#xff1a;https://www.qqmu.com/2303.html

InnoDB备份与恢复篇(1)-InnoDB的备份与还原策略

InnoDB数据库的备份与还原策略 MySQL是一种广泛使用的关系型数据库管理系统&#xff0c;而InnoDB是MySQL的默认存储引擎之一。在生产环境中&#xff0c;对于数据库的备份和还原至关重要&#xff0c;以确保数据的安全性和可靠性。本文将介绍MySQL数据库InnoDB引擎的备份与还原策…

七、有序的列表

描述 创建一个依次包含字符串P、y、t、h、o和n的列表my_list&#xff0c;先使用sorted函数对列表my_list进行临时排序&#xff0c;第一行输出排序后的完整列表&#xff0c;第二行输出原始的列表。再使用sort函数对列表my_list进行降序排序&#xff0c;第三行输出排序后完整的列…

yolov8涨点技巧,添加SwinTransformer注意力机制,提升目标检测效果

目录 摘要 SwinTransformer原理 代码实现 YOLOv8详细添加步骤 ymal文件内容 one_swinTrans three_swinTrans 启动命令 完整代码分享 摘要 Swin Transformer通过引入创新的分层注意力机制展现了其架构的独特性&#xff0c;该机制通过将注意力区域划分为块并在这些块内执…

小白的matlab简单应用

基本概念 1、数组array 数组是一个更通用的数据结构&#xff0c;可以是一维、二维或多维的。 一维数组通常被称为向量。 二维数组可以被视为矩阵。 多维数组可以用来表示更高维度的数据&#xff0c;例如三维数组可以表示一系列的矩阵。 用过的函数 20240229 1、读取excel文件…