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),即对编程 ...
随机推荐
- hdu1251 && hud 1247 （字典树）
hdu1251 题目 这道题,主要是在主函数的输入输出上犹豫了. #include<stdio.h> #include<cstring> #include<iostrea ...
- Linux sort uniq 命令。简单运用
-n #代表以数字方法排序,如果倒序加上-r -t ':' #-t指定分隔符-k ...
- jsTree问题
1. 问题:刷新页面时,会自动打开刚才上次选中的节点 解决办法:去掉'state'插件 2. 关闭一个node时,使用close_all,不能修改class 注:好像用toggle_node,可以op ...
- 1. Two Sum [Array] [Easy]
Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...
- spring读取数据库的配置信息（url、username、password）时的<bean>PropertyPlaceholderConfigurer的用法
用法1: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://w ...
- dubbo在eclipse中无法读取到dubbo.xsd
报错信息如下: Multiple annotations found at this line:– cvc-complex-type.2.4.c: The matching wildcard is s ...
- 基于tinyproxy搭建代理服务器
在我们实际的工作当中,经常会遇到这种情况,我们对线上服务器进行操作时是通过跳板机来进行的,出于安全性及投入资金来考虑非必要情况下除跳板机以外的服务器是没有内网ip的,所以当我们位于内网的服务器需要使用 ...
- Replication--对发布修改的一些小总结
--==================================================== --在华丽分割线下,是我对肖磊--大菠萝的崇高地敬意和婶婶地感谢,本文乃肖兄表述我执笔而来 ...
- phpmailer SMTP Error: Could not connect to SMTP host. 错误解决
今天发邮件遇到了这么一个问题:SMTP Error: Could not connect to SMTP host.在网上找了好多,都不管用.在这里我要提醒大家下 1.确保发送者邮箱密码正确,代码编写 ...
- SQL查询和替换含有回车，空格，TAB，等
---如下是查询语句 --查询名称有退格键 ),item_name) go --查询名称有制表符tab ),item_name) go --查询名称有换行 ),item_name) go --查询名称 ...