深入理解ES6之——代理和反射(proxy)
通过调用new proxy()你可以创建一个代理来替代另一个对象(被称为目标),这个代理对目标对象进行了虚拟,因此该代理与该目标对象表面上可以被当做同一个对象来对待。
创建一个简单的代理
当你使用Proxy构造器来创建一个代理时,需要传递两个参数:目标对象以及一个处理器,后者是定义了一个或多个陷阱函数的对象。如果未提供陷阱函数,代理会对所有操作采取默认行为。
使用set陷阱函数验证属性值
let target = {};
var proxy = new Proxy(target, {
set(trapTarget, key, value, receiver) {
if (!trapTarget.hasOwnProperty(key)) {
if (isNaN(value)) {
throw new Error('Proxy must be a number');
}
}
return Reflect.set(trapTarget, key, value, receiver);
}
})
proxy.count = 1;
console.log(proxy.count);
console.log(target.count);
try {
proxy.anthorName = 'cc';
} catch (err) {
console.log(err.message);
}
使用上述方法可以对添加给对象的属性值进行验证,如果值为非数字,就会抛出错误。
使用get陷阱函数进行对象外形验证
在js中,如果读取一个对象中不存在的属性时,会显示undefined,这对于排查问题很不利。使用代理进行对象外形验证就可以帮你从这个错误中拯救出来。
let proxy = new Proxy({}, {
get(trapTarget, key, receiver) {
if (!(key in receiver)) {
throw new Error(`property ${key} not exist`);
}
return Reflect.get(trapTarget, key, receiver);
}
})
proxy.name = 'cc';
try {
console.log(proxy.age);
} catch (error) {
console.log(error.message);
}
//输出结果
property age not exist
上述代码对打印的对象属性进行验证,如果不存在则抛出一个错误。今日头条的一个面试题
使用has陷阱函数隐藏属性
in运算符用于判断指定对象中是否存在某个属性,如果对象的属性名与指定的字符串或符号值相匹配,那么in运算符应当返回true,无论该属性是对象自身的属性还是原型的属性。代理允许你使用has陷阱函数来解决这个问题
has陷阱函数会在使用in运算符的情况下被调用,并且会被传入两个参数:
- trapTarget:需要读取属性的对象(即代理的目标对象)
- key:需要检查的属性的键(字符串类型或符号类型)Reflect.has()方法接收与之相同的参数并向in运算符返回默认相应结果
let target = {
name: 'cc',
age: 26,
sex: 'man'
}
let proxy = new Proxy(target, {
has(trapTarget, key) {
if (trapTarget.hasOwnProperty(key)) {
return Reflect.has(trapTarget, key);
} else {
return false;
}
}
})
console.log('toString' in proxy);
console.log('name' in proxy);
console.log('age' in proxy);
使用deleteProperty陷阱函数避免属性被删除
delete运算符能从指定对象上删除一个属性,在删除成功时返回true,否则返回false
deleteProperty陷阱函数会在使用delete运算符去删除对象属性时被调用,并且会被传入两个参数:
- trapTarget:需要删除属性的对象
- key:需要删除的属性的键
Reflect.deleteProperty()方法也接受两个参数,并提供了deleteProperty陷阱函数的默认实现。
let target = {
name: 'target',
value: 42
}
let proxy = new Proxy(target, {
deleteProperty(trapTarg, ke) {
if (ke === 'value') {
return false;
} else {
return Reflect.deleteProperty(trapTarg, ke);
}
}
})
let result = delete proxy.value;
let result1 = delete proxy.name;
console.log(result);
console.log(result1);
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=2n9b6sotx9wkc
深入理解ES6之——代理和反射(proxy)的更多相关文章
- 【读书笔记】【深入理解ES6】#12-代理(Proxy)和反射(Reflection)API
代理(Proxy)是一种可以拦截并改变底层JavaScript引擎操作的包装器,在新语言中通过它暴露内部运作的对象,从而让开发者可以创建内建的对象. 数组问题 在ECMAScript6出现之前,开发者 ...
- 【ES6】改变 JS 内置行为的代理与反射
代理(Proxy)可以拦截并改变 JS 引擎的底层操作,如数据读取.属性定义.函数构造等一系列操作.ES6 通过对这些底层内置对象的代理陷阱和反射函数,让开发者能进一步接近 JS 引擎的能力. 一.代 ...
- Java提高班(六)反射和动态代理(JDK Proxy和Cglib)
反射和动态代理放有一定的相关性,但单纯的说动态代理是由反射机制实现的,其实是不够全面不准确的,动态代理是一种功能行为,而它的实现方法有很多.要怎么理解以上这句话,请看下文. 一.反射 反射机制是 Ja ...
- ES6躬行记(24)——代理和反射
代理和反射是ES6新增的两个特性,两者之间是协调合作的关系,它们的具体功能将在接下来的章节中分别讲解. 一.代理 ES6引入代理(Proxy)地目的是拦截对象的内置操作,注入自定义的逻辑,改变对象的默 ...
- 设计模式-代理模式(Proxy Model)
文 / vincentzh 原文连接:http://www.cnblogs.com/vincentzh/p/5988145.html 目录 1.写在前面 2.概述 3.目的 4.结构组成 5.实现 5 ...
- JAVA设计模式(09):结构化-代理模式(Proxy)
一,定义: 代理模式(Proxy):为其它对象提供一种代理以控制对这个对象的訪问. 二.其类图: 三,分类一:静态代理 1,介绍:也就是须要我们为目标对象编写一个代理对象,在编译期就生成了这个代理对 ...
- 深入理解 Java 动态代理机制
Java 有两种代理方式,一种是静态代理,另一种是动态代理.对于静态代理,其实就是通过依赖注入,对对象进行封装,不让外部知道实现的细节.很多 API 就是通过这种形式来封装的. 代理模式结构图(图片来 ...
- 动态代理:JDK原生动态代理(Java Proxy)和CGLIB动态代理原理+附静态态代理
本文只是对原文的梳理总结,以及自行理解.自己总结的比较简单,而且不深入,不如直接看原文.不过自己梳理一遍更有助于理解. 详细可参考原文:http://www.cnblogs.com/Carpenter ...
- 【java项目实战】代理模式(Proxy Pattern),静态代理 VS 动态代理
这篇博文,我们主要以类图和代码的形式来对照学习一下静态代理和动态代理.重点解析各自的优缺点. 定义 代理模式(Proxy Pattern)是对象的结构型模式,代理模式给某一个对象提供了一个代理对象,并 ...
随机推荐
- extern和static区别
1. 声明和定义 当定义一个变量的时候,就包含了对该变量声明的过程,同时在内存张申请了一块内存空间.如果在多个文件中使用相同的变量,为了避免重复定义,就必须将声明和定义分离开来.定义是创建与名字关 ...
- [NOIP2013]华容道 题解(搜索)
[NOIP2013]华容道 [题目描述] 这道题根据小时候玩华容道不靠谱的经验还以为是并查集,果断扑街.考后想想也是,数据这么小一定有他的道理. 首先由于是最小步数,所以BFS没跑了.那么我们大可把这 ...
- printf打印参数的顺序问题
C语言的printf函数处理的参数顺序是从右向左的,例如如下程序: #include <stdio.h> int main() { int a = 1, b = 2, c ...
- 关于int和integer
大家可以看一下下面这个java程序的运行结果 int k = 1; int l = 1; System.out.println(k == l); int a = 128; int b = 128; S ...
- SQLite的一些体会
SQLite遵循sql语法,所以如果接触过数据库,使用它进行增删改查几乎没障碍.在.net中,它与Mysql.sql server的类也相似,比如连接类名字是SQLiteConnection,不过它S ...
- springboot3(目录结构)
2.springboot中的目录结构 1.基本信息 - static :保存所有的静态资源,css.js.img - templates :保存所有的模版页面(springboot内嵌tomcat,默 ...
- [小米OJ] 11. 构建短字符串
思路 排序后对两个字符串遍历 function solution(line) { var str = line.split(" "); var str1 = str[0].spli ...
- docker实战(二)之redis的使用
docker中安装redis的步骤比较简单,Linux系统版本centos7.4 1.官方仓库https://hub.docker.com/r/library/redis/tags/中查看redis的 ...
- 2017day1
http://www.cnblogs.com/alex3714/articles/5465198.html 四.Python安装 windows 1 2 3 4 5 6 7 1.下载安装包 h ...
- 搭建python环境
参考文章:https://blog.csdn.net/qq_33855133/article/details/73106176 对于配置环境变量,懂些技术的人来说,都是很简单. 变量是在操作系统中一个 ...