ES6学习笔记四:Proxy与Reflect
一:Proxy
代理。
ES6把代理模式做成了一个类,直接传入被代理对象、代理函数,即可创建一个代理对象,然后我们使用代理对象进行方法调用,即可调用被包装过的方法:
1)创建
var proxy = new Proxy(target, handler);
new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为,其中定义了一系列的代理方法。
如果handler没有设置任何拦截,那就等同于直接通向原对象。
2)handler中定义的拦截操作主要有:
1)get(target, propKey, receiver)
拦截对象属性的读取,比如proxy.foo和proxy['foo']。
最后一个参数receiver是一个对象,可选,参见下面Reflect.get的部分。
(2)set(target, propKey, value, receiver)
拦截对象属性的设置,比如proxy.foo = v或proxy['foo'] = v,返回一个布尔值。
(3)has(target, propKey)
拦截propKey in proxy的操作,返回一个布尔值。
(4)deleteProperty(target, propKey)
拦截delete proxy[propKey]的操作,返回一个布尔值。
(5)ownKeys(target)
拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy),返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
(6)getOwnPropertyDescriptor(target, propKey)
拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
(7)defineProperty(target, propKey, propDesc)
拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。
(8)preventExtensions(target)
拦截Object.preventExtensions(proxy),返回一个布尔值。
(9)getPrototypeOf(target)
拦截Object.getPrototypeOf(proxy),返回一个对象。
(10)isExtensible(target)
拦截Object.isExtensible(proxy),返回一个布尔值。
(11)setPrototypeOf(target, proto)
拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。
如果目标对象是函数,那么还有两种额外操作可以拦截。
(12)apply(target, object, args)
拦截 Proxy 实例作为函数调用的操作,call和apply操作。,比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
(13)construct(target, args)
拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)。
二:Reflect
Reflect对象的方法与Proxy对象的方法一一对应,只要是Proxy对象的方法,就能在Reflect对象上找到对应的方法。
说白了,Reflect.XX 就是被代理的方法。
我们在proxy中使用Reflect.XX调用原本要调用的操作,然后在此前后定义一些代理操作,就形成了代理方法。
var loggedObj = new Proxy(obj, {
get(target, name) {
console.log('get', target, name);
return Reflect.get(target, name);//调用对target对象的原本操作
},
deleteProperty(target, name) {
console.log('delete' + name);
return Reflect.deleteProperty(target, name);
},
has(target, name) {
console.log('has' + name);
return Reflect.has(target, name);
}
});
Reflect可调用的方法:
- Reflect.apply(target,thisArg,args):
- Reflect.construct(target,args)
- Reflect.get(target,name,receiver)
- Reflect.set(target,name,value,receiver)
- Reflect.defineProperty(target,name,desc)
- Reflect.deleteProperty(target,name)
- Reflect.has(target,name)
- Reflect.ownKeys(target)
- Reflect.isExtensible(target)
- Reflect.preventExtensions(target)
- Reflect.getOwnPropertyDescriptor(target, name)
- Reflect.getPrototypeOf(target)
- Reflect.setPrototypeOf(target, prototype)
ES6学习笔记四:Proxy与Reflect的更多相关文章
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- ES6学习笔记(11)----Proxy
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Proxy1.概述 Proxy可以用来修改对象的默认操作 let obj = {na ...
- ES6学习笔记四(类和对象)
{ // 构造函数和实例 class Parent{ constructor(name='mukewan'){ this.name=name; } } let v_parent=new Parent( ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- ES6学习笔记<一> let const class extends super
学习参考地址1 学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...
- JS&ES6学习笔记(持续更新)
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...
- es6学习笔记-class之一概念
前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...
随机推荐
- 暴君第一季/全集Tyrant迅雷下载
本季第一季 Tyrant Season 1 (2014)看点:虽然李安退出了FX系列剧<暴君>(Tyrant),称不想耽误了剧集的制作,但显然FX对这部剧的重视程度非比寻常,因为他们找来的 ...
- Android 类加载原理 和热修复——深入浅出原理与实现
一.简述 热修复无疑是这2年较火的新技术,是作为安卓工程师必学的技能之一.在热修复出现之前,一个已经上线的app中如果出现了bug,即使是一个非常小的bug,不及时更新的话有可能存在风险,若要及时更新 ...
- maven 阿里仓库
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0" xmlns:xsi="http://www.w3. ...
- glyphicons-halflings-regular.woff2:1 Failed to load resource: the server responded with a status of 404 (Not Found)解决Web部署 svg/woff/woff2字体 404错误
问题:最近在IIS上部署web项目的时候,发现浏览器总是报找不到woff.woff2字体的错误.导致浏览器加载字体报404错误,白白消耗了100-200毫秒的加载时间. 原因:因为服务器IIS不认SV ...
- TCP/IP协议体系结构简介
1.TCP/IP协议栈 四层模型 TCP/IP这个协议遵守一个四层的模型概念:应用层.传输层.互联层和网络接口层. 网络接口层:模型的基层是网络接口层.负责数据帧的发送和接收,帧是独立的网络信息传输单 ...
- 读书笔记,《Java8实战》第一章,为什么要关心 Java8
开篇作者就提出,Java8所做的改变在许多方面比java历史上任何一次改变都深远.而且好消息是,这些改变会让你编辑程序来更容易,再也不用写类似类似于以前的swing中的事件处理函数的啰嗦代码了. ...
- OC-字符串中大小写字母转换
一般语言中的大小写转换都会提供的有默认的函数,不过闲来无事,简单的模仿实现了一下: 系统中默认的大小写转换: NSString *name=@"博客园-FlyElephant"; ...
- Android -- tools
工具属性 Android 有一个专用的XML命名空间,用于使工具可以记录XML文件里的信息,并且在打包程序的进行把信息剥离到不会带来运行时期和下载大小的负面影响的程度. 这个命名空间的 URI 是 h ...
- Android -- Volley解析
Volley设计 Dispatch Thread不断从RequestQueue中取出请求,根据是否已缓存调用Cache或Network这两类数据获取接口之一,从内存缓存或是服务器取得请求的数据,然后交 ...
- CNN-卷积层和池化层学习
卷积神经网络(CNN)由输入层.卷积层.激活函数.池化层.全连接层组成,即INPUT-CONV-RELU-POOL-FC (1)卷积层:用它来进行特征提取,如下: 输入图像是32*32*3,3是它的深 ...