JavaScript系列——Proxy(代理)

文章目录

    • 概要
    • Proxy 语法
    • handler 对象的方法
    • Proxy 示例
    • 常用handler 对象的方法的参数
      • handler.get()
        • 语法
        • 示例
      • handler.set()
        • 语法
        • 示例
    • 使用场景
      • 验证
      • 值修正及附加属性
    • 小结

概要

Proxy 用于创建一个对象的代理,将对原对象上的操作(属性获取、赋值、函数调用等)转移到这个代理上,拦截对原始对象操作实现自定义操作避免直接操作原对象

也就是说,通过创建一个对象的代理(中间人)后,我们需要先和代理沟通,由代理再对原对象进行沟通,这个过程,允许我们自定义一些操作,实现对原对象的增强。

Proxy 语法

实现一个代理,语法如下:

const p = new Proxy(target, handler)
  • target
    要使用Proxy 包装的目标对象,这个对象可以是任何类型对象、包含原生数组、函数甚至是另一个代理。

  • handler
    一个通常以函数作为属性的对象,其属性中的函数分别定义了在执行各种操作的代理自定义行为。
    开发者就是通过这些属性,告诉代理,需要拦截target 哪些操作,需要做哪些操作。

在Proxy中,JavaScript 允许我们对以下的操作进行拦截,具体有以下handler方法:

handler 对象的方法

  • handler.get()
    属性读取操作的捕捉器。

  • handler.set()
    属性设置操作的捕捉器。

  • handler.has()
    in 操作符的捕捉器。

  • handler.deleteProperty()
    delete 操作符的捕捉器。

  • handler.defineProperty()
    Object.defineProperty 方法的捕捉器。

  • handler.ownKeys()
    Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。

  • handler.apply()
    函数调用操作的捕捉器。

  • handler.construct()
    new 操作符的捕捉器。

  • handler.getPrototypeOf()
    Object.getPrototypeOf 方法的捕捉器。

  • handler.setPrototypeOf()
    Object.setPrototypeOf 方法的捕捉器。

Proxy 示例

在以下简单的例子中,当对象中不存在属性名时,默认返回值为 37。下面的代码以此展示了 get handler 的使用场景。

const handler = {get: function (obj, prop) {return prop in obj ? obj[prop] : 37;},
};const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;console.log(p.a, p.b); // 1, undefined
console.log("c" in p, p.c); // false, 37

上面代码中,我们为{} 一个空对象创建了代理p ,给p 为 对象拦截了 属性的获取操作。
并为对象的a 属性赋值了1,给b属性赋值了undefined ,注意,这些操作最后都会由代理转发到源对象身上,也就是说 原始对象{} 的 a\b 属性也有值,和p 一样。

当我们操作p.a 时,代理p 便会拦截 get 方法,执行get函数里面的逻辑。

常用handler 对象的方法的参数

通过上面的简单示例,我们发现,在定义handler 的属性中,我们可以通过方法的参数,获取到一些值,下面对一些常用的方法进行详细讲解

handler.get()

handler.get 方法用于拦截对象的读取属性操作。get 方法可以返回任何值。

该方法会拦截目标对象的以下操作:

  • 访问属性:proxy[foo] 和 proxy.bar
  • 访问原型链上的属性:Object.create(proxy)[foo]
  • Reflect.get()
语法
var p = new Proxy(target, {get: function (target, property, receiver) {},
});
  • target
    目标对象。

  • property
    被获取的属性名。

  • receiver
    Proxy 或者继承 Proxy 的对象

示例
var p = new Proxy({},{get: function (target, prop, receiver) {console.log("called: " + prop);return 10;},},
);console.log(p.a); // "called: a"; ouptut 10

handler.set()

handler.set() 方法是设置属性值操作的捕获器。set() 方法应当返回一个布尔值,true 表示成功,false会抛出异常

该方法会拦截目标对象的以下操作:

  • 指定属性值:proxy[foo] = bar 和 proxy.foo = bar
  • 指定继承者的属性值:Object.create(proxy)[foo] = bar
  • Reflect.set()
语法
new Proxy(target, {set(target, property, value, receiver) {}
});
  • value
    新属性值。

  • receiver
    最初接收赋值的对象。通常是 proxy 本身,但 handler 的 set 方法也有可能在原型链上,或以其他方式被间接地调用(因此不一定是 proxy 本身)

示例
var p = new Proxy({},{set: function (target, prop, value, receiver) {target[prop] = value;console.log("property set: " + prop + " = " + value);return true;},},
);console.log("a" in p); // falsep.a = 10; // "property set: a = 10"
console.log("a" in p); // true
console.log(p.a); // 10

使用场景

验证

通过代理,我们可以对传入的值进行验证,可以借助 handler.set() 方法

我们下面实现以下功能
通过代理,验证一个对象的age 属性,如果设置成非数字或者大于200都会出错,不能成功被赋值,代码如下所示

let validator = {set: function (obj, prop, value) {if (prop === "age") {if (!Number.isInteger(value)) {throw new TypeError("The age is not an integer");}if (value > 200) {throw new RangeError("The age seems invalid");}}// The default behavior to store the valueobj[prop] = value;// 表示成功return true;},
};let person = new Proxy({}, validator);person.age = 100;console.log(person.age);
// 100person.age = "young";
// 抛出异常:Uncaught TypeError: The age is not an integerperson.age = 300;
// 抛出异常:Uncaught RangeError: The age seems invalid

当我们设置age =100 时候,是可以正常执行的。
但我们设置成“young”或者300,都会抛出异常,使得赋值无法执行。

值修正及附加属性

以下products代理会计算传值并根据需要转换为数组。这个代理对象同时支持一个叫做 latestBrowser的附加属性,这个属性可以同时作为 getter 和 setter。

let products = new Proxy({browsers: ["Internet Explorer", "Netscape"],},{get: function (obj, prop) {// 附加一个属性if (prop === "latestBrowser") {return obj.browsers[obj.browsers.length - 1];}// 默认行为是返回属性值return obj[prop];},set: function (obj, prop, value) {// 附加属性if (prop === "latestBrowser") {obj.browsers.push(value);return;}// 如果不是数组,则进行转换if (typeof value === "string") {value = [value];}// 默认行为是保存属性值obj[prop] = value;// 表示成功return true;},},
);console.log(products.browsers); // ['Internet Explorer', 'Netscape']
products.browsers = "Firefox"; // 如果不小心传入了一个字符串
console.log(products.browsers); // ['Firefox'] <- 也没问题,得到的依旧是一个数组products.latestBrowser = "Chrome";
console.log(products.browsers); // ['Firefox', 'Chrome']
console.log(products.latestBrowser); // 'Chrome'

小结

  • proxy用于创建一个对象的代理,实现对原对象操作(属性获取、赋值)进行拦截,从而实现自定义操作,避免直接作用于原对象,通过代理来操作,最后由代理作用于原对象。
  • proxy可以代理任何对象,包括普通对象、函数、甚至是另一个proxy
  • 使用proxy 创建代理时,需要传入原对象和handler
  • handler 是一个对象,有多个方法组成,这些方法名需要以指定形式出现,否则不生效。

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

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

相关文章

【SSM框架】初识Spring

初识Spring Spring家族 Spring发展到今天已经形成了一种开发的生态圈&#xff0c;Spring提供了若千个项目&#xff0c;每个项目用于完成特定的功能 ✅Spring Framework&#xff08;底层框架&#xff09;Spring Boot&#xff08;提高开发速度&#xff09;Spring Cloud&#xf…

第1课 ROS 系统介绍

1.ROS操作系统介绍 在学习ROS 系统前&#xff0c;我们需要先了解操作系统的定义。操作系统&#xff0c;顾名思义&#xff0c;即提供部分软件和硬件的接口&#xff0c;以供用户直接使用。因此&#xff0c;针对不同的平台、不同的功能&#xff0c;需要采用不同的操作系统来完成底…

C++ 具名要求-全库范围的概念 - 函数对象 (FunctionObject) ,对于不同输入值产生相同输出具有很低概率-散列(hash)

此页面中列出的具名要求&#xff0c;是 C 标准的规范性文本中使用的具名要求&#xff0c;用于定义标准库的期待。 某些具名要求在 C20 中正在以概念语言特性进行形式化。在那之前&#xff0c;确保以满足这些要求的模板实参实例化标准库模板是程序员的重担。若不这么做&#xf…

智能导诊-医院信息化建设标准

智能导诊系统主要依赖于自然语言处理和机器学习等技术。患者可以通过语音、文字等方式描述病情&#xff0c;系统通过自然语言处理技术对病情进行语义分析和理解。随后&#xff0c;机器学习算法对患者的症状和病情进行推理&#xff0c;结合已有的疾病知识库&#xff0c;为患者提…

canvas设置图形图案、文字图案

查看专栏目录 canvas示例教程100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

强化学习应用(二):基于Q-learning的物流配送路径规划研究(提供Python代码)

一、Q-learning算法简介 Q-learning是一种强化学习算法&#xff0c;用于解决基于马尔可夫决策过程&#xff08;MDP&#xff09;的问题。它通过学习一个值函数来指导智能体在环境中做出决策&#xff0c;以最大化累积奖励。 Q-learning算法的核心思想是使用一个Q值函数来估计每…

AI大模型学习笔记一

一、商业观点&#xff1a;企业借助大模型获得业务增长可能 二、底层原理&#xff1a;transformer 1&#xff09;备注 ①下面每个步骤都是自回归的过程&#xff08;aotu-regressive&#xff09;&#xff1a;已输出内容的每个字作为输入&#xff0c;一起生成下一个字 ②合起来就…

华为OD机试2024年最新题库(Java)

我是一名软件开发培训机构老师&#xff0c;我的学生已经有上百人通过了华为OD机试&#xff0c;学生们每次考完试&#xff0c;会把题目拿出来一起交流分享。 重要&#xff1a;2024年1月-5月&#xff0c;考的都是OD统一考试&#xff08;C卷&#xff09;&#xff0c;题库已经整理…

8-docker-compose命令操作容器报“no configuration file provided: not found”

1.问题描述 docker-compose命令操作容器时,有时会报出“no configuration file provided: not found”问题 [root@centos79 opt]# docker-compose ps no configuration file provided: not found [root@centos79 opt]# 2.解决方案 最常见的原因是没有在docker-compose.yml文…

Promise高级版 - 通过输出题理解「Promise源码」

1 Promise源码分析 Promise的基本工作原理 Promise构造函数&#xff1a;Promise构造函数接受一个执行器函数作为参数&#xff0c;该函数有两个参数&#xff1a;resolve和reject。在构造函数内部&#xff0c;会创建一个Promise实例&#xff0c;并初始化其状态为pending。 状态…

【GNN2】PyG完成图分类任务,新手入门,保姆级教程

上次讲了如何给节点分类&#xff0c;这次我们来看如何用GNN完成图分类任务&#xff0c;也就是Graph-level的任务。 【GNN 1】PyG实现图神经网络&#xff0c;完成节点分类任务&#xff0c;人话、保姆级教程-CSDN博客 图分类就是以图为单位的分类&#xff0c;举个例子&#xff1…

设备树OF函数操作实验-读取设备节点backlight的整型属性

一. 简介 本文学习使用设备树操作 OF函数&#xff0c;读取设备节点的整型的属性值。 读取设备树文件 imx6ull-14x14-evk.dts 中一个设备节点的信息。这里读取 backlight设备节点的属性值&#xff1a;读取整型的属性。 注意&#xff1a;这里的整型数据都是 32位的数据。而非 …

Open3D 点云等比例缩放(20)

Open3D 点云等比例缩放(20) 一、算法介绍二、算法实现1.代码世人慌慌张张,不过图碎银几两, 偏偏这碎银几两,能解世间万种慌张。 一、算法介绍 实现这样一个功能,沿着中心,按照指定的比例,比如1/2,缩小或者放大点云,保存到新的文件中 二、算法实现 1.代码 import…

小程序基础学习(js混编)

在组件中使用外部js代码实现数据改变 先创建js文件 编写一些组件代码 编写外部js代码 在组件的js中引入外部js 在 app.json中添加路径规则 组件代码 <!--components/my-behavior/my-behavior.wxml--> <view><view>当前计数为{{count}}</view> <v…

操作系统复习 一、二章

操作系统复习 一、二章 文章目录 操作系统复习 一、二章第一章 计算机系统概述处理器中各寄存器的作用指令的执行过程中断存储器层次结构和CacheI/O 通信技术 第二章 操作系统概述大内核微内核大内核微内核 操作系统的定义、目标和功能定义目标和功能 操作系统的发展过程现代操…

Kibana:使用反向地理编码绘制自定义区域地图

Elastic 地图&#xff08;Maps&#xff09;附带预定义区域&#xff0c;可让你通过指标快速可视化区域。 地图还提供了绘制你自己的区域地图的功能。 你可以使用任何您想要的区域数据&#xff0c;只要你的源数据包含相应区域的标识符即可。 但是&#xff0c;当源数据不包含区域…

半监督学习 - 半监督K均值(Semi-Supervised K-Means)

什么是机器学习 半监督K均值&#xff08;Semi-Supervised K-Means&#xff09;是K均值聚类算法的一种扩展&#xff0c;它结合了有标签数据和无标签数据进行聚类。在传统的K均值算法中&#xff0c;所有数据点都是无标签的&#xff0c;而在半监督K均值中&#xff0c;我们允许一部…

RabbitMQ的高可用机制

通过搭建集群保证高可用 RabbitMQ的集群模式&#xff1a; 普通集群&#xff0c;镜像集群&#xff08;开发时用的多&#xff09;&#xff0c;仲裁集群 普通集群&#xff08;标准集群&#xff09;会在各个节点间共享部分数据&#xff08;交换机和队列元信息&#xff09;&#…

最新域名群站开源系统:打造强大网站矩阵,引领SEO优化新潮流!

搭建步骤 第一步&#xff1a;安装PHP和MYSQL服务器环境 对于想要深入了解网站建设的人来说&#xff0c;自己动手安装PHP和MYSQL服务器环境是必不可少的步骤。这将使你能够更好地理解网站的运行机制&#xff0c;同时为后续的网站开发和优化打下坚实基础。 第二步&#xff1a;…

QSpace:Mac上的简洁高效多窗格文件管理器

在Mac用户中&#xff0c;寻找一款能够提升文件管理效率的工具是常见的需求。QSpace&#xff0c;一款专为Mac设计的文件管理器&#xff0c;以其简洁的界面、高效的多窗格布局和丰富的功能&#xff0c;为用户提供了一个全新的文件管理体验。 QSpace&#xff1a;灵活与功能丰富的结…