ES6-Proxy and Reflect
依赖文件地址 ：https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[es6]-10-Proxy和Reflect</title> <script src="./js/browser.js"></script>
<script type="text/babel">
/*
* proxy用于修改某些操作的默认行为，等同于在语言层面作出修改，属于一种元编程。
* 叫做代理器。提供了一种机制，可以对外界的访问进行过滤和改写。
*/
var obj = new Proxy({},{
get:function(target,key,receiver){
console.log(`getting ${key}`);
return Reflect.get(target,key,receiver);
},
set:function(target,key,receiver){
console.log(`setting ${key}`);
return Reflect.set(target,key,receiver);
}
})
//上面代码对一个空对象架设了一层拦截，重定义了属性的读取和设置行为。
obj.count = 1;
++obj.count;
//结果 表明，Proxy实际上重载了点运算符。 /*
* es6原生提供Proxy构造函数，用来生成Proxy实例。
* var proxy = new Proxy(target，handler);
* Proxy对象的所有用法，都是上面这种形式，不同的只是Handler参数的写法。target 是目标对象，
* handler参数也是一个对象，用来定制拦截行为。
*/ var proxy1 = new Proxy({},{
get:function(target,property){
return 35;
}
})
console.log(proxy1.time); //35
console.log(proxy1.name); //35 /*
* 要使Proxy起作用，必须对proxy实例进行操作，如果handler没有设置任何拦截，那就等同于直接通向原对象。
* 一个技巧是将Proxy对象，设置到object.proxy属性，从而可以在object对象上调用。
* var object = {proxy:new Proxy(target,handler)};
*
* Proxy实例也可以作为其他对象的原型对象。
*
* 下面是Proxy支持的拦截操作表：
* 1.get(target,propKey,receiver)
* 拦截对象属性的读取，比如点或方括号运算符。最后一个参数是一个对象，可选，参见Reflect.get部分。
* 2.set(target,propKey,value,receiver)
* 拦截对象属性的设置，返回一个布尔值。
* 3.has(target,propKey)
* 拦截propKey in proxy的操作，以及对象的hasOwnproperty方法，返回一个布尔值。
* 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.getOwnPropertyDescvriptor(target,propKey),返回属性的描述对象。
* 7.defineProperty(target,propKey,propDesc)
* 拦截Object.defineProperty(target,propKey,propDesc)和Object.defineProperty(target,
* propDescs)返回一个布尔值。
* 8.preventExtensions(target)
* 拦截Object.preventExtensions(proxy),返回一个布尔值。
* 9.getPrototypeOf(target)
* 拦截Object.getPrototypeOf(proxy),返回一个对象。
* 10.isExtensible(target)
* 拦截Object.isExtensible(target),返回一个布尔值。
* 11.setPrototypeOf(target,proto)
* 拦截Object.setPrototypeOf(target,proto)，返回一个布尔值。
* 12.apply(target,object,args)
* 拦截Proxy实例作为函数调用的操作，比如proxy(...args),proxy.call(object,...args)
* proxy.apply(...)
* 13.construct(target,args)
* 拦截Proxy实例作为构造函数调用的操作，比如 new proxy(...args)。
*
*
* 暂时不细琢磨。先跳过
*/ /*
* Proxy.revocable() 该方法返回一个可取消的 Proxy实例。
*/
let target = {};
let handler = {}; let {proxy,revoke} = Proxy.revocable(target,handler);
console.log(proxy)
proxy.foo = 123;
console.log(proxy.foo); //123
revoke();
console.log(proxy.foo); //报错 revoked /*
* Reflect
* Reflect对象与Proxy对象一样，也是es6为了操作对象而提供的新API。
* 设计目的如下：
* 1.将Object对象上一些明显属于语言内部的方法（比如Object.defineProperty）,放到Reflect对象上，现阶段，
* 某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect上。
* 2.修改某些Object方法的返回结果，让其变得更加合理。比如，Object.defineProperty(obj,name,desc)在无法
* 定义属性时，会抛出错误，而Reflect.defineProperty(obj,name,desc)则会返回false。
*
* 3.让Object操作都变成函数行为。某些Object操作是命令式的，比如name in obj 和delete obj[name]，
* Reflect.has(obj,name)和Reflect.deleteProperty(obj,name)让它们变成了函数行为。
*
* 4.Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。
* 这就让proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认
* 行为，你总可以在Reflect对象上获取默认行为。
*
* Reflect对象的方法共13个，大部分与Object对象的同名方法的作用是相同的，而且它与Proxy对象的方法是一一对应的。
*
* Refect.get(target,name,receiver)
* 查找并返回target对象的name属性，如果没有该属性，返回undefined。
* 如果name属性部署了读取函数，则读取函数的this绑定receiver。
*/
</script>
</head>
<body>
</body>
</html>
ES6-Proxy and Reflect的更多相关文章
- ES6(Proxy 和 Reflect)
Proxy 和 Reflect 1.Proxy 和 Reflect 的概念 Proxy 意为 ‘代理’,连接了用户和真实对象之间的一个层 Reflect 意为‘反射’ 反射的是Object 2.适 ...
- ES6 Proxy和Reflect（下）
construct() construct方法用于拦截new命令. var handler = { construct (target, args) { return new target(...ar ...
- ES6 Proxy和Reflect (上)
Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy可以理 ...
- es6——Proxy和Reflect
Proxy代理,Reflect反射 Proxy对属性的读取 { //供应商,原始对象 let obj={ time:'2017-1-1', name:'net', _r:123 } //代理商,新生成 ...
- 利用ES6中的Proxy和Reflect 实现简单的双向数据绑定
利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo. 好像vue3也把 obj.defineProperty() 换成了Proxy+Reflect. 话不多说 ...
- ES6入门：数据劫持、Proxy、Reflect
什么是数据劫持 Object数据劫持实现原理 Array数据劫持的实现原理 Proxy.Reflect 一.什么是数据劫持 定义:访问或者修改对象的某个属性时,在访问和修改属性值时,除了执行基本的数据 ...
- es6之proxy和reflect
一.proxy //Proxy和Reflect //供应商 let obj={ time:"2017-11-21", name:"net", _r:123 } ...
- [ES6] Proxy & Reflect
Proxy and Reflect API works nicely together. About how to use Proxy, check this post. Let's see abou ...
- babel 不能统编译Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise的问题
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Promis ...
- 12,13 Proxy和Reflect
Proxy和Reflect Proxy(代理) Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程 ...
随机推荐
- RepositionBars的用法和参数的意义（引用别人的）
MFC窗口位置管理详细分析及实例 在一般用MFC编写的程序的窗口客户区中,可能有好几个子窗口(具有WM_CHILD风格的窗口).上边是工具栏,中间是视图窗口,下边是状态栏.三个窗 口在框架的客户区里和 ...
- java学习之路-分享笔记20150327
---恢复内容开始--- 2个月间,断断续续学习了一段时间java平台相关知识,慢慢梳理出来一些枝枝叶叶,和大家交流下.3年前用java边看边做写了一个项目,所以对语法不是很关注.需要原文档的留邮箱吧 ...
- git 在非空文件夹clone新项目
在非空目录下 git clone 项目时会提示错误信息: fatal: destination path '.' already exists and is not an empty director ...
- delphi存取图片
1.存图片到数据库 var PicStream: TMemoryStream; if imgBugPic.Picture.Graphic <> nil then begin P ...
- 今天犯了一个StringBuilder构造函数引起的二逼问题。
在.Net里,StringBuilder的构造函数有很多,最常用的是无参的构造函数,默认分配16个字符的空间.其次就是填写StringBuilder空间的带一个Int32的构造函数,这个在优化代码的时 ...
- 反射导出 Excel
/// <summary> /// List 数据导出Excel /// </summary> /// <param name="list">数 ...
- ueditor图片上传插件的使用
在项目里使用到ueditor图片上传插件,以前图片上传都是直接使用js代码直接上传图片,比较麻烦,而且效率也比较低,而ueditor这款插件完美的解决了这个问题,这个是百度开发的一款富文本编辑器,在这 ...
- CC2530学习路线-基础实验-GPIO 按键控制LED灯亮灭(2)
目录 1.前期预备知识 1.1 新大陆Zigbee模块按键电路图 1.2 CC2530相关寄存器 1.3 CC2530中断走向图 1.4 使用C语言为51单片机编写中断程序 1.5 *函数指针 2. ...
- C语言作业03-函数
1.本章学习总结 1.1 思维导图 1.2本章学习体会,代码量学习体会 1.2.1学习体会 通过这几周的函数学习,让我明白了函数的重要性,在很多时候运用函数,会使得代码分工明确,逻辑严密,不繁琐.函数 ...
- go get golang.org/x/net 安装失败的解决方法！
GO语言在github.com上建立了自己的项目,对应的包如果不能下载,那么可以到这里去下载,比如:"go get golang.org/x/net"不能下载这个包,那么我们可以访 ...