Proxy
定义:Proxy 可以理解为在目标对象之外加一层“拦截”,外界对该对象的访问,都必须会先经过这一层拦截,因些我们可以对外界的访问做一些改写与过滤,可译为“代理器”。
var proxy = new Proxy(target, handler);
target 就是想要代理的目标对象,handler 则是一个方法,在其中定义想要代理的一些操作。常用可代理操作列表如下:
- get(target, property, receiver),拦截对象属性的读取
- set(target, property, value, receiver),拦截对象属性的设置
- has(target, property),拦截 property in target 的操作,返回一个布尔值
- deleteProperty(target, property),拦截 delete target[property]的操作,返回一个布尔值
- defineProperty(target, property, prop),拦截 Object.defineProperty 的操作,返回一个布尔值
- apply(target, object, args),拦截 函数的调用 、call 和 apply 操作
更多操作可查看MDN:https://developer.mozilla.org...
实际使用场景:
- 实现私有变量的访问拦截
let person = { name: 'test', age: 23, _privateName: 'private name', _phone: '13888888888'}let personProxy = new Proxy(person, { get(target, prop) { if(prop.startsWith('_')){ console.log('私有变量禁止访问'); return false; } return target[prop]; }, set(target, prop, value) { if(prop.startsWith('_')) { console.log('私有变量禁止修改'); return false; } target[prop] = value; }, has(target, prop) { return prop.startsWith('_') ? false : (prop in target); }})personProxy._phone; // 私有变量禁止访问personProxy._phone = '13999999999'; // 私有变量禁止修改'_phone' in personProxy; // false'name' in personProxy; // true
- 设置对象属性前进行校验
let person = { phone: ''}let personProxy = new Proxt(person, { set(target, prop, value) { if(prop === 'phone') { let reg = 'xxx'; if(!reg.test(value)){ throw Error('validate error!') } } target[prop] = value; }})
- Observe Function
function observe(obj, callback) { return new Proxy(obj, { set(target, prop, value) { callback(prop, value); target[prop] = value; } })}const bar = { open: false}const barObserve = observe(bar, (prop, value) => { prop === 'open' && value ? alert('Opening!') : console.log('Waiting');})barObserve.open = true; // 'Opening!'
Reflect
Reflect的方法与Proxy的方法一一对应 ,它可以让对 Object 的一切操作都变成函数形为;比如 key in object => Reflect.has(key)、delect object[key] => Reflect.deleteProperty(object, key)。
let proxy = new Proxt({}, { get(target, prop) { return Reflect.get(target, name); }, set(target, prop, value) { Reflect.set(target, prop, value); }, has(target, prop) { return Reflect.has(target, prop); }, deleteProperty(target, prop) { return Reflect.deleteProperty(target, prop); }})
原文链接:https://arronf2e.github.io/es6.html