ES6Proxy-Reflect

jiezi

6 年前

定义：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 的方法与 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