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),即对编程 ...
随机推荐
- DUBBO配置规则详解
研究DUBBO也已经大半年了,对它的大部分源码进行了分析,以及对它的内部机制有了比较深入的了解,以及各个模块的实现.DUBBO包含很多内容,如果想了解DUBBO第一步就是启动它,从而可以很好的使用它, ...
- webupload编辑回显解决方案
webupload java参考:http://blog.csdn.net/finalAmativeness/article/details/54668090 回显参考: https://segmen ...
- Hdu2102 A计划 2017-01-18 14:40 60人阅读 评论(0) 收藏
A计划 Time Limit : 3000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Submissio ...
- PAT甲 1006. Sign In and Sign Out (25) 2016-09-09 22:55 43人阅读 评论(0) 收藏
1006. Sign In and Sign Out (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue ...
- C++ 中的运算符的优先级
C++ 中的运算符的优先级 直接看图
- hdu 4952 暴力
http://acm.hdu.edu.cn/showproblem.php?pid=4952 给定x,k,i从1到k,每次a[i]要是i的倍数,并且a[i]大于等于a[i-1],x为a0 递推到下一个 ...
- 一个基于ASP.NET（C#）的ACCESS数据库操作类
using System; using System.Collections; using System.Collections.Specialized; using System.Data; usi ...
- Xamarin.Forms第三方XAML预览工具-LiveXAML简单体验
截至目前,Xamarin官方的Xaml Previewer工具仍然处于测试阶段,使用中也发现了各种不便,例如各种莫名其妙的渲染失败,或者提示需要编译项目才能渲染等等,复杂项目基本不可用, 完全没有体现 ...
- jQuery ajax的jsonp跨域请求
一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...
- C++的访问关系
1.C++的访问关系