ES6：Proxy Reflect

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/post/es6-proxy-reflect