今天我们将尝试下花 1 分钟的时间简单的了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化的逻辑,定义完后我们可以通过代理定义的方法间接操作对象。在说的通俗点,在我们的生活中,我们买房租房一般不找房东先找中介的道理一样,因为中介充当了房源的代理一样。

接下来我们通过代码理解下什么是代理,用JS创建代理比较简单,如下段代码所示:

let initialObject = { /* 定义对象 */ };
let handler = { /* 自定义相关的拦截器处理逻辑 */ };
let proxyedObject = new Proxy(initialObject, handler);

简单解释下,我们可以通过代理去调用 handler 里定义的逻辑去操作对象,对象代理有两个参数,initialObject 是目标对象,handler 拦截器对象(或者称作处理器对象)。

接下来,我们来看一个例子,我们通过代理实现读取一个对象的属性,如果对象的属性不存在,则返回代理中定义的默认值,这里我们在代理里重写了原有对象的 get 方法。

let dog = {name: "Spike"
};const handler = {get: (obj, property) => property in obj ? obj[property] : 'You don't have defined  a property named ' +  property;
}const proxyDog = new Proxy(dog, handler);
console.log(proxyDog.name);
// 将会输出 Spike
console.log(proxyDog.age);
// 输出 You don't have defined  a property named age

上述例子,我们通过 get: (obj, property) => ... 方法重写了对象的 get 方法。

最后我再看一个如何通过代理去更对对象的值,如果更新的值不是我们期望的值,系统则抛出异常错误,不能正常更新,否则重新赋值并更新对象的属性。

let dog = {name: "Spike",age: 1;
};
let handler = { set: (obj, property, value) => { if (property === 'age') { if (!Number.isInteger(value)) throw new TypeError('Use numbers only for age'); if ((value < 0) || (value > 30))  throw new RangeError('A dog can't live that long'); } obj[prop] = value; return true; }
};const proxyDog = new Proxy(dog, handler);
proxyDog.age = -1;
// will throw A dog can't live that long
proxyDog.age = 'very old';
// will throw Use numbers only for age

通过 JS 代理我们不仅可以重写 getters 和  setters 方法,我们还可以进行这些操作:deleteProperty、construct、getOwnPropertyDescriptor 等...

今天的文章就到这里,不知道你是否理解代理对象啦,在接下来的文章里,我们再聊聊代理在实际项目中的运用,感谢你的阅读。

参考来源:http://www.js-craft.io/blog/what-are-javascript-proxies/

Daniel

1分钟搞懂什么是 JS 代理对象(proxies)相关推荐

  1. mysql decimal型转化为float_5分钟搞懂MySQL数据类型之数值型DECIMAL类型

    速成指南 5分钟搞懂MySQL数据类型 之数值型--DECIMAL类型 DECIMAL类型的语法:DECIMAL[(M[,D])] [UNSIGNED] [ZEROFILL].其中M指定的是数字的总位 ...

  2. 一分钟搞懂 微调(fine-tuning)和prompt

    一分钟搞懂 微调fine-tuning和prompt 区别与联系 区别 联系 优缺点 微调的优点 微调的缺点 prompt的优点 prompt的缺点 在CV领域 Reference 大家都是希望让预训 ...

  3. html网页和cgi程序编程,十分钟搞懂什么是CGI

    原文:CGI Made Really Easy,在翻译的过程中,我增加了一些我在学习过程中找到的更合适的资料,和自己的一些理解.不能算是严格的翻译文章,应该算是我的看这篇文章的过程的随笔吧. CGI真 ...

  4. python数据分析建模-十分钟搞懂“Python数据分析”

    原标题:十分钟搞懂"Python数据分析" 引言:本文重点是用十分钟的时间帮读者建立Python数据分析的逻辑框架.其次,讲解"如何通过Python 函数或代码和统计学知 ...

  5. 场内场外交易成本_2分钟搞懂场内场外基金

    一天一个金融知识,是成为投资大神的必要条件.今天我们花2分钟搞懂场内基金和场外基金.基金,既可以场内买又可以场外申购,场内场外这两者有什么区别?场内 场外 场内场外的"场",一般指 ...

  6. 看聊天记录都学不会C语言?太菜了吧》(17)5分钟搞懂指针与多重指针

    若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本系列文章将会以通俗易懂的对话方式进行教学,对话中将涵盖了新 ...

  7. 5分钟搞懂用户态,内核态

    5分钟搞懂用户态,内核态 1. 什么是用户态,内核态 用户态就是提供应用程序运行的空间,为了使应用程序访问到内核管理的资源例如CPU,内存,I/O.内核必须提供一组通用的访问接口,这些接口就叫系统调用 ...

  8. 一分钟搞懂JavaME、JavaSE和JavaEE的区别

    一分钟搞懂JavaME.JavaSE和JavaEE的区别 JavaME微缩版 JavaSE标准版 JavaEE企业版 多数编程语言都有预选编译好的类库以支持各种特定的功能,在Java中,类库以包(pa ...

  9. 五分钟搞懂什么是红黑树

    五分钟搞懂什么是红黑树(全程图解) 18-09-04 星925 + 关注 献花(2)  收藏 前戏 红黑树,对很多童鞋来说,是既熟悉又陌生.熟悉是因为在校学习期间,准备面试时,这是重点.然后经过多年的 ...

最新文章

  1. 5see我看视频交友客户端 v2.3.0.11官方版
  2. java 枚举使用例子_Java枚举详解及使用实例(涵盖了所有典型用法)
  3. 我的Linux内核学习笔记
  4. CyberArk:被忽略的特权账号管理已进入蓝海
  5. 关于 SET QUOTED_IDENTIFIER ON 和 SET ANSI_NULLS ON
  6. 多线程导出excel高并发_怎么理解分布式、高并发、多线程
  7. 数独游戏技巧从入门到精通_工程施工图识图方法和技巧,使你从建筑施工入门到精通!...
  8. Java声明字符串数组,架构师必备!
  9. 【基于51】红外寻迹智能小车 - 代码篇
  10. 自定义类型:枚举,结构体,联合体
  11. txt文件所有大写字母转小写代码
  12. kvm虚拟机扩展磁盘空间
  13. 网络聊天程序的设计与实现
  14. ZCMU 1411 喜闻乐见的a+b
  15. Flat风格的Qml滚动选择条
  16. sherlock机器视觉软件
  17. 沈阳市计算机学校辛亮,2017-2018学年度(下)听评课总结.doc
  18. 智慧医疗应用现状分析
  19. 存储过程和函数-数据库
  20. 2022国赛高教杯数学建模A题B题(预测)

热门文章

  1. IT忍者神龟之MySQL函数详细描述
  2. 【达内课程】设计模式
  3. TP-LINK易展路由器Mesh互联
  4. html中幻灯片代码怎样写,HTML代码简介幻灯片.ppt
  5. 【考研词汇训练营】Day 2 —— 词根词缀记忆法
  6. 【微博爬虫教程实例】基于requests、mysql爬取大数据量博主关键字下博文及评论
  7. pythonwin10
  8. 二进制多项式乘法和除法的电路实现
  9. QOS MQC的配置实验
  10. 《MongoDB》在docker中用得到关于MongoDB一行命令