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