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),即对编程 ...
随机推荐
- c++ 内联函数 （讲解的TM真好）
1. 内联函数 在C++中我们通常定义以下函数来求两个整数的最大值: 复制代码 代码如下: int max(int a, int b) { return a > b ? a : b; } 为 ...
- A River Runs Through It
Our birth is but a sleep and a forgetting: The Soul that rises with us, our life's Star, ...
- paxos ---学习笔记
摘自维基百科:分布式系统中的节点通信存在两种模型:共享内存(Shared memory)和消息传递(Messages passing).基于消息传递通信模型的分布式系统,不可避免的会发生以下错误:进程 ...
- Sql查询两个时间段有重叠的记录
这个问题看上去简单,但是想了很久,最后发现,自己的思路有点乱. 下面四条时间段都和最上面那个有重叠的关系,就是这么个意思. 这里是问题的答案: 2个时间: a_start, a_end b_start ...
- 设计模式之模版方法模式（Template Method Pattern）
一.什么是模版方法模式? 首先,模版方法模式是用来封装算法骨架的,也就是算法流程 既然被称为模版,那么它肯定允许扩展类套用这个模版,为了应对变化,那么它也一定允许扩展类做一些改变 事实就是这样,模版方 ...
- 使用libxml2进行xml开发（一）
(一)Windows下使用MinGW和Code::Blocks环境配置libxml2 笔者此次是在windows 7下使用MinGW和Code::Blocks开发C程式的,手上的一个项目需要使用soc ...
- ElasticSearch的基本认识和基本操作
1.1. ElasticSearch(简称ES) ES即为了解决原生Lucene使用的不足,优化Lucene的调用方式,并实现了高可用的分布式集群的搜索方案,其第一个版本于2010年2月出现在Git ...
- android界面
自定义控件EditText 在src中的drawable新建myeditext.xml文件<?xml version="1.0" encoding="utf-8&q ...
- Array-Find Pivot Index
Given an array of integers nums, write a method that returns the "pivot" index of this arr ...
- Flask从入门到精通之数据模型之间的关系
关系型数据库使用关系把不同表中的行联系起来.上篇随笔中介绍的用户和角色之间是一种简单的关系.即角色到用户的一对多关系,因为一个角色可属于多个用户,而每个用户都只能有一个角色.这种关系在模型中的表示方法 ...