ES6 之Reflect 与 Proxy概述
Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。Proxy 可以对目标对象的读取、函数调用等操作进行拦截,然后进行操作处理。 |
概述
Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。
Proxy 可以对目标对象的读取、函数调用等操作进行拦截,然后进行操作处理。它不直接操作对象,而是像代理模式,通过对象的代理对象进行操作,在进行这些操作时,可以添加一些需要的额外操作。
Reflect 可以用于获取目标对象的行为,它与 Object 类似,但是更易读,为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的。
基本用法
Proxy
一个 Proxy 对象由两个部分组成: target 、 handler 。在通过 Proxy 构造函数生成实例对象时,需要提供这两个参数。 target 即目标对象, handler 是一个对象,声明了代理 target 的指定行为。
let target = {name: 'Tom',age: 24 } let handler = {get: function(target, key) {console.log('getting '+key);return target[key]; // 不是target.key},set: function(target, key, value) {console.log('setting '+key);target[key] = value;} } let proxy = new Proxy(target, handler) proxy.name // 实际执行 handler.get proxy.age = 25 // 实际执行 handler.set // getting name // setting age // 25// target 可以为空对象 let targetEpt = {} let proxyEpt = new Proxy(targetEpt, handler) // 调用 get 方法,此时目标对象为空,没有 name 属性 proxyEpt.name // getting name // 调用 set 方法,向目标对象中添加了 name 属性 proxyEpt.name = 'Tom' // setting name // "Tom" // 再次调用 get ,此时已经存在 name 属性 proxyEpt.name // getting name // "Tom"// 通过构造函数新建实例时其实是对目标对象进行了浅拷贝,因此目标对象与代理对象会互相 // 影响 targetEpt) // {name: "Tom"}// handler 对象也可以为空,相当于不设置拦截操作,直接访问目标对象 let targetEmpty = {} let proxyEmpty = new Proxy(targetEmpty,{}) proxyEmpty.name = "Tom" targetEmpty) // {name: "Tom"}
实例方法
get(target, propKey, receiver)
用于 target 对象上 propKey 的读取操作。
let exam ={name: "Tom",age: 24 } let proxy = new Proxy(exam, {get(target, propKey, receiver) {console.log('Getting ' + propKey);return target[propKey];} }) proxy.name // Getting name // "Tom"
get() 方法可以继承。
let proxy = new Proxy({}, {get(target, propKey, receiver) {// 实现私有属性读取保护if(propKey[0] === '_'){throw new Erro(`Invalid attempt to get private "${propKey}"`);}console.log('Getting ' + propKey);return target[propKey];} });let obj = Object.create(proxy); obj.name // Getting name
set(target, propKey, value, receiver)
用于拦截 target 对象上的 propKey 的赋值操作。如果目标对象自身的某个属性,不可写且不可配置,那么set方法将不起作用。
let validator = {set: function(obj, prop, value) {if (prop === 'age') {if (!Number.isInteger(value)) {throw new TypeError('The age is not an integer');}if (value > 200) {throw new RangeError('The age seems invalid');}}// 对于满足条件的 age 属性以及其他属性,直接保存obj[prop] = value;} }; let proxy= new Proxy({}, validator) proxy.age = 100; proxy.age // 100 proxy.age = 'oppps' // 报错 proxy.age = 300 // 报错
第四个参数 receiver 表示原始操作行为所在对象,一般是 Proxy 实例本身。
const handler = {set: function(obj, prop, value, receiver) {obj[prop] = receiver;} }; const proxy = new Proxy({}, handler); proxy.name= 'Tom'; proxy.name=== proxy // trueconst exam = {} Object.setPrototypeOf(exam, proxy) exam.name = "Tom" exam.name === exam // true
注意,严格模式下,set代理如果没有返回true,就会报错。
apply(target, ctx, args)
用于拦截函数的调用、call 和 reply 操作。target 表示目标对象,ctx 表示目标对象上下文,args 表示目标对象的参数数组。
function sub(a, b){return a - b; } let handler = {apply: function(target, ctx, args){console.log('handle apply');return Reflect.apply(...arguments);} } let proxy = new Proxy(sub, handler) proxy(2, 1) // handle apply // 1
has(target, propKey)
用于拦截 HasProperty 操作,即在判断 target 对象是否存在 propKey 属性时,会被这个方法拦截。此方法不判断一个属性是对象自身的属性,还是继承的属性。
let handler = {has: function(target, propKey){console.log("handle has");return propKey in target;} } let exam = {name: "Tom"} let proxy = new Proxy(exam, handler) 'name' in proxy // handle has // true
注意:此方法不拦截 for ... in 循环。
construct(target, args)
用于拦截 new 命令。返回值必须为对象。
let handler = {construct: function (target, args, newTarget) {console.log('handle construct')return Reflect.construct(target, args, newTarget) } } class Exam { constructor (name) { this.name = name } } let ExamProxy = new Proxy(Exam, handler) let proxyObj = new ExamProxy('Tom') console.log(proxyObj) // handle construct // exam {name: "Tom"}
deleteProperty(target, propKey)
用于拦截 delete 操作,如果这个方法抛出错误或者返回 false ,propKey 属性就无法被 delete 命令删除。
defineProperty(target, propKey, propDesc)
用于拦截 Object.definePro若目标对象不可扩展,增加目标对象上不存在的属性会报错;若属性不可写或不可配置,则不能改变这些属性。
let handler = {defineProperty: function(target, propKey, propDesc){console.log("handle defineProperty");return true;} }plet target = {} let proxy = new Proxy(target, handler) proxy.name = "Tom" // handle defineProperty target // {name: "Tom"}// defineProperty 返回值为false,添加属性操作无效 let handler1 = {defineProperty: function(target, propKey, propDesc){console.log("handle defineProperty");return false;} } let target1 = {} let proxy1 = new Proxy(target1, handler1) proxy1.name = "Jerry" target1 // {}
erty 操作
getOwnPropertyDescriptor(target, propKey)
用于拦截 Object.getOwnPropertyD() 返回值为属性描述对象或者 undefined 。
let handler = {getOwnPropertyDescriptor: function(target, propKey){return Object.getOwnPropertyDescriptor(target, propKey);} } let target = {name: "Tom"} let proxy = new Proxy(target, handler) Object.getOwnPropertyDescriptor(proxy, 'name') // {value: "Tom", writable: true, enumerable: true, configurable: // true}
ptor 属性
getPrototypeOf(target)
主要用于拦截获取对象原型的操作。包括以下操作:
- Object.prototype._proto_ - Object.prototype.isPrototypeOf() - Object.getPrototypeOf() - Reflect.getPrototypeOf() - instanceof
let exam = {} let proxy = new Proxy({},{getPrototypeOf: function(target){return exam;} }) Object.getPrototypeOf(proxy) // {}
注意,返回值必须是对象或者 null ,否则报错。另外,如果目标对象不可扩展(non-extensible),getPrototypeOf 方法必须返回目标对象的原型对象。
let proxy = new Proxy({},{getPrototypeOf: function(target){return true;} }) Object.getPrototypeOf(proxy) // TypeError: 'getPrototypeOf' on proxy: trap returned neither object // nor null
isExtensible(target)
用于拦截 Object.isExtensible 操作。
该方法只能返回布尔值,否则返回值会被自动转为布尔值。
let proxy = new Proxy({},{isExtensible:function(target){return true;} }) Object.isExtensible(proxy) // true
注意:它的返回值必须与目标对象的isExtensible属性保持一致,否则会抛出错误。
let proxy = new Proxy({},{isExtensible:function(target){return false;} }) Object.isExtensible(proxy) // TypeError: 'isExtensible' on proxy: trap result does not reflect // extensibility of proxy target (which is 'true')
ownKeys(target)
用于拦截对象自身属性的读取操作。主要包括以下操作:
- Object.getOwnPropertyNames() - Object.getOwnPropertySymbols() - Object.keys() - or...in
方法返回的数组成员,只能是字符串或 Symbol 值,否则会报错。
若目标对象中含有不可配置的属性,则必须将这些属性在结果中返回,否则就会报错。
若目标对象不可扩展,则必须全部返回且只能返回目标对象包含的所有属性,不能包含不存在的属性,否则也会报错。
let proxy = new Proxy( {name: "Tom",age: 24 }, {ownKeys(target) {return ['name'];} }); Object.keys(proxy) // [ 'name' ]f返回结果中,三类属性会被过滤: // - 目标对象上没有的属性 // - 属性名为 Symbol 值的属性 // - 不可遍历的属性let target = {name: "Tom",[Symbol.for('age')]: 24, }; // 添加不可遍历属性 'gender' Object.defineProperty(target, 'gender', {enumerable: false,configurable: true,writable: true,value: 'male' }); let handler = {ownKeys(target) {return ['name', 'parent', Symbol.for('age'), 'gender'];} }; let proxy = new Proxy(target, handler); Object.keys(proxy) // ['name']
preventExtensions(target)
拦截 Object.preventExtensions 操作。
该方法必须返回一个布尔值,否则会自动转为布尔值。
// 只有目标对象不可扩展时(即 Object.isExtensible(proxy) 为 false ), // proxy.preventExtensions 才能返回 true ,否则会报错 var proxy = new Proxy({}, {preventExtensions: function(target) {return true;} }); // 由于 proxy.preventExtensions 返回 true,此处也会返回 true,因此会报错 Object.preventExtensions(proxy) 被// TypeError: 'preventExtensions' on proxy: trap returned truish but // the proxy target is extensible// 解决方案var proxy = new Proxy({}, {preventExtensions: function(target) {// 返回前先调用 Object.preventExtensionsObject.preventExtensions(target);return true;} }); Object.preventExtensions(proxy) // Proxy {}
setPrototypeOf
主要用来拦截 Object.setPrototypeOf 方法。
返回值必须为布尔值,否则会被自动转为布尔值。
若目标对象不可扩展,setPrototypeOf 方法不得改变目标对象的原型。
let proto = {} let proxy = new Proxy(function () {}, {setPrototypeOf: function(target, proto) {console.log("setPrototypeOf");return true;} } ); Object.setPrototypeOf(proxy, proto); // setPrototypeOf
Proxy.revocable()
用于返回一个可取消的 Proxy 实例。
let {proxy, revoke} = Proxy.revocable({}, {}); proxy.name = "Tom"; revoke(); proxy.name // TypeError: Cannot perform 'get' on a proxy that has been revoked
Reflect
ES6 中将 Object 的一些明显属于语言内部的方法移植到了 Reflect 对象上(当前某些方法会同时存在于 Object 和 Reflect 对象上),未来的新方法会只部署在 Reflect 对象上。
Reflect 对象对某些方法的返回结果进行了修改,使其更合理。
Reflect 对象使用函数的方式实现了 Object 的命令式操作。
静态方法
Reflect.get(target, name, receiver)
查找并返回 target 对象的 name 属性。
let exam = {name: "Tom",age: 24,get info(){return this.name + this.age;} } Reflect.get(exam, 'name'); // "Tom"// 当 target 对象中存在 name 属性的 getter 方法, getter 方法的 this 会绑定 // receiver let receiver = {name: "Jerry",age: 20 } Reflect.get(exam, 'info', receiver); // Jerry20// 当 name 为不存在于 target 对象的属性时,返回 undefined Reflect.get(exam, 'birth'); // undefined// 当 target 不是对象时,会报错 Reflect.get(1, 'name'); // TypeError
Reflect.set(target, name, value, receiver)
将 target 的 name 属性设置为 value。返回值为 boolean ,true 表示修改成功,false 表示失败。当 target 为不存在的对象时,会报错。
let exam = {name: "Tom",age: 24,set info(value){return this.age = value;} } exam.age; // 24 Reflect.set(exam, 'age', 25); // true exam.age; // 25// value 为空时会将 name 属性清除 Reflect.set(exam, 'age', ); // true exam.age; // undefined// 当 target 对象中存在 name 属性 setter 方法时,setter 方法中的 this 会绑定 // receiver , 所以修改的实际上是 receiver 的属性, let receiver = {age: 18 } Reflect.set(exam, 'info', 1, receiver); // true receiver.age; // 1let receiver1 = {name: 'oppps' } Reflect.set(exam, 'info', 1, receiver1); receiver1.age; // 1
Reflect.has(obj, name)
是 name in obj 指令的函数化,用于查找 name 属性在 obj 对象中是否存在。返回值为 boolean。如果 obj 不是对象则会报错 TypeError。
let exam = {name: "Tom",age: 24 } Reflect.has(exam, 'name'); // true
Reflect.deleteProperty(obj, property)
是 delete obj[property] 的函数化,用于删除 obj 对象的 property 属性,返回值为 boolean。如果 obj 不是对象则会报错 TypeError。
let exam = {name: "Tom",age: 24 } Reflect.deleteProperty(exam , 'name'); // true exam // {age: 24} // property 不存在时,也会返回 true Reflect.deleteProperty(exam , 'name'); // true
Reflect.construct(obj, args)
等同于 new target(...args)。
function exam(name){this.name = name; } Reflect.construct(exam, ['Tom']); // exam {name: "Tom"}
Reflect.getPrototypeOf(obj)
用于读取 obj 的 _proto_ 属性。在 obj 不是对象时不会像 Object 一样把 obj 转为对象,而是会报错。
class Exam{} let obj = new Exam() Reflect.getPrototypeOf(obj) === Exam.prototype // true
Reflect.setPrototypeOf(obj, newProto)
用于设置目标对象的 prototype。
let obj ={} Reflect.setPrototypeOf(obj, Array.prototype); // true
Reflect.apply(func, thisArg, args)
等同于 Function.prototype.apply.call(func, thisArg, args) 。func 表示目标函数;thisArg 表示目标函数绑定的 this 对象;args 表示目标函数调用时传入的参数列表,可以是数组或类似数组的对象。若目标函数无法调用,会抛出 TypeError 。
Reflect.apply(Math.max, Math, [1, 3, 5, 3, 1]); // 5
Reflect.defineProperty(target, propertyKey, attributes)
用于为目标对象定义属性。如果 target 不是对象,会抛出错误。
let myDate= {} Reflect.defineProperty(MyDate, 'now', {value: () => Date.now() }); // trueconst student = {}; Reflect.defineProperty(student, "name", {value: "Mike"}); // true student.name; // "Mike"
Reflect.getOwnPropertyDescriptor(target, propertyKey)
用于得到 target 对象的 propertyKey 属性的描述对象。在 target 不是对象时,会抛出错误表示参数非法,不会将非对象转换为对象。
var exam = {} Reflect.defineProperty(exam, 'name', {value: true,enumerable: false, }) Reflect.getOwnPropertyDescriptor(exam, 'name') // { configurable: false, enumerable: false, value: true, writable: // false}// propertyKey 属性在 target 对象中不存在时,返回 undefined Reflect.getOwnPropertyDescriptor(exam, 'age') // undefined
Reflect.isExtensible(target)
用于判断 target 对象是否可扩展。返回值为 boolean 。如果 target 参数不是对象,会抛出错误。
let exam = {} Reflect.isExtensible(exam) // true
Reflect.preventExtensions(target)
用于让 target 对象变为不可扩展。如果 target 参数不是对象,会抛出错误。
let exam = {} Reflect.preventExtensions(exam) // true
Reflect.ownKeys(target)
用于返回 target 对象的所有属性,等同于 Object.getOwnPropertyNames 与Object.getOwnPropertySymbols 之和。
var exam = {name: 1,[Symbol.for('age')]: 4 } Reflect.ownKeys(exam) // ["name", Symbol(age)]
组合使用
Reflect 对象的方法与 Proxy 对象的方法是一一对应的。所以 Proxy 对象的方法可以通过调用 Reflect 对象的方法获取默认行为,然后进行额外操作。
let exam = {name: "Tom",age: 24 } let handler = {get: function(target, key){console.log("getting "+key);return Reflect.get(target,key);},set: function(target, key, value){console.log("setting "+key+" to "+value)Reflect.set(target, key, value);} } let proxy = new Proxy(exam, handler) proxy.name = "Jerry" proxy.name // setting name to Jerry // getting name // "Jerry"
使用场景拓展
实现观察者模式
// 定义 Set 集合 const queuedObservers = new Set(); // 把观察者函数都放入 Set 集合中 const observe = fn => queuedObservers.add(fn); // observable 返回原始对象的代理,拦截赋值操作 const observable = obj => new Proxy(obj, {set}); function set(target, key, value, receiver) {// 获取对象的赋值操作const result = Reflect.set(target, key, value, receiver);// 执行所有观察者queuedObservers.forEach(observer => observer());// 执行赋值操作return result; }
ES6 之Reflect 与 Proxy概述相关推荐
- es6利用Reflect实现观察者模式,并详解Reflect对象
es6利用Reflect实现观察者模式,并详解Reflect对象 字面意思:反映;映出(影像) 先看一个简易的观察者模式: 上述观察者模式代码运行后输出: // 李四 20: // 哈哈 10: 分析 ...
- ES6中的reflect和proxy和一个on-change
理解reflect 反射,在运行时获得程序或程序集每一个类型的成员和成员信息. JAVA里程序中一般的对象的类型都是在编译期就确定下来的,而Java反射机制可以动态地创建对象并调用其属性,这样的对象的 ...
- ES6 入门—ES6 Reflect 与 Proxy
文章目录 前言 一.Proxy 二.Proxy 常用的拦截方法 2.1. get 方法 2.2. set 方法 2.3. has 方法 2.4. construct 方法 三.Reflect 四.ge ...
- ES6:Reflect
Reflect 概述. Relflect对象与Proxy对象一样,也是ES6为了操作对象而提供的新的API.Reflect对象的设计目的有几个. (1)将Object对象的一些明显属于语言内部的方法( ...
- ES6笔记 --- Reflect
概述 (1) 将 Object 对象的一些内部的方法(比如 Object.defineProperty ),放到 Reflect 对象上. 现阶段,某些方法同时在 Object 和 Reflect 对 ...
- ES6中Reflect对象使用详解(附代码)
目录 目录 Reflect的方法 Reflect.get(target, name, receiver) Reflect.set(target, name, value, receiver) Refl ...
- ES6的Reflect对象
Reflect对象的方法与Proxy对象的方法一一对应,只要proxy对象上有的方法reflect也能找到. ES6将Object对象的一些属于语言内部的方法放到Reflect对象上,从Reflect ...
- es6 实例:使用Proxy实现观察者模式
实例:使用Proxy实现观察者模式 观察者模式(Observer mode)指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行. const person = observable({ na ...
- ES6 Proxy和Reflect (上)
Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy可以理 ...
最新文章
- Reddit年度盘点:2019年最佳机器学习项目
- gulp复制整个文件夹或文件到指定目录(包括拷贝单个文件)
- Spring REST
- ajax中加上AntiForgeryToken防止CSRF攻击
- c++ 如何给 “运行中“ 的线程传递数据;
- C# 8.0 抢先看-- Async Stream
- Head First设计模式读书笔记九 第十章 状态模式
- 【深度学习】生成对抗网络(GAN)的tensorflow实现
- MT4自带30项指标介绍
- 字符串算法 金策_国家集训队论文(较全)
- SpringMybaits数据库配置解惑
- BDB 入门篇 第6章 A DPL Example一个DPL 例子
- PhalApi 事务操作
- 更新DOTA2显示无法连接到更新服务器,DOTA2无法正常更新的解决方法 官方公告
- hive以半小时为维度进行统计的需求
- linux俄罗斯方块源程序,《俄罗斯方块游戏》项目实作【附源码】
- mysql卸载什么文件夹_MySQL卸载
- Html5--(span标签)
- 奥塔在线:C#创建Winform项目时没有App.config文件的原因
- MATLAB批量将单通道图片转换为三通道图片
热门文章
- 被鹤岗买房鼓励,我带上6万来到另一小城
- 亚马逊:用CNN进行图像分类的Tricks
- 论文笔记 | CNN 是怎么学到图片绝对位置信息的
- 图表示学习+图神经网络:破解AI黑盒,揭示万物奥秘的钥匙!
- 10 个省时间的 PyCharm 技巧,提升工作效率,杠杠滴!
- 第二篇:n-gram 语言模型
- LOJ6435 PKUSC2018 星际穿越
- 基于Python的HTTPS协议模拟登陆+爬取页面
- 《.NET应用架构设计:原则、模式与实践》新书博客--试读-1.3 架构设计中的重要概念...
- SQL server数据库日志满了怎么处理?