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),即对编程 ...
随机推荐
- Qt .pro文件 详解
1. TEMPLATE变量TEMPLATE描述了为建立目标文件而采用何种模板,即生成何种形式的Makefile文件.Qmake工具定义了5种模板:1. 应用程序App,为建立一个Qt应用程序创建Mak ...
- java细节问题
保留两位小数:1.234, 1.23, 1.2, 1.0, 1. package test; import java.math.BigDecimal; import java.text.Decimal ...
- NET平台开源项目速览(6)FluentValidation验证组件介绍与入门(转载)
原文地址:http://www.cnblogs.com/asxinyu/p/dotnet_Opensource_project_FluentValidation_1.html 阅读目录 1.基本介绍 ...
- cassandra集群缩容与剔除问题节点
今天在操作cassandra集群数据迁移时发生了一些意料之外的事情,服务器迁移前与迁移后同样为5台,但是不知道是什么原因导致的,迁移过后的节点居然多出了一台cassandra节点,个人瞬间感觉莫名其妙 ...
- 移动端Retina屏边框线1px 显示为2px或3px问题解决方法
我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 1.何为“设备像素比dev ...
- Alwayson--配置只读请求
场景:有三台服务器SQLNode131,SQLNode132 ,SQLNode133: 1) 三台服务器加入域DCDemo.com 2) 三台服务器使用端口访问数据库 3) 三台服务器构建故障转移群集 ...
- 【cocos2d-x 手游研发----怪物智能AI】
原创文章,转载请注明出处:http://www.cnblogs.com/zisou/p/cocos2d-xARPG4.html 谈到怪物AI,我觉得就比较话多了,首先理解一下(Artificial I ...
- 838. Push Dominoes
There are N dominoes in a line, and we place each domino vertically upright. In the beginning, we si ...
- jzoj5894
先前綴和一發,問題表示求[0-l2][0-r2]滿足條件的數的個數 假設可以把某一個數拆分成[前面任意個數][00-0-11-1(個數相同)]的區間 那麼問題會簡單的多,因為任意一個a位的整數分別xo ...
- Windows下TensorFlow安装指南（图文版）
随着深度学习概念火起来,TensorFlow也跟着成为业界流行的深度学习框架.它采用CPU+GPU的并行计算模式,使得神经网络可以有效的并行计算,从以前的三层网络到现在的深层网络,深度学习+tenso ...