🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# Proxy与Reflect > 英文释义,分别为 【委托,代理】 【反射】。 **proxy [使用场景](http://pinggod.com/2016/%E5%AE%9E%E4%BE%8B%E8%A7%A3%E6%9E%90-ES6-Proxy-%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF/)** >改变了过去对象监听的复杂操作,使用proxy可以用一种更优雅的方式实现外部对对象的访问。 **Reflect [MDN详解](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect)** >概念:reflect 是es6新增的一个全局对象。顾名思义,反射,类似于Java里面的反射机制。在Java里面,反射是个很头疼的概念。简单理解为:通过反射,我们可以在运行时获得程序或程序集中每一个类型的成员和成员的信息。对于Java来说,程序中一般的对象的类型都是在编译期就确定下来的,而Java反射机制可以动态地创建对象并调用其属性,这样的对象的类型在编译期是未知的。所以我们可以通过反射机制直接创建对象,即使这个对象的类型在编译期是未知的。 </br> </br> 理解:有这么一个全局对象,上面直接挂载了对象的某些特殊方法,这些方法可以通过Reflect.apply这种形式来使用,当然所有方法都是可以在 Object 的原型链中找到的 **Reflect的好处** - 用一个单一的全局对象去存储这些方法,能够保持其它的JavaScript代码的整洁、干净。不然的话,这些方法可能是全局的,或者要通过原型来调用。 - 将一些命令式的操作如delete,in等使用函数来替代,这样做的目的是为了让代码更加好维护,更容易向下兼容;也避免出现更多的保留字。 ```javascript //Vue以及angular使用es5 defineProperty,内部响应式数据原理 function Archiver() { var temperature = null; var archive = []; Object.defineProperty(this, 'temperature', { get: function () { console.log('get!'); return temperature; }, set: function (value) { temperature = value; archive.push({ val: temperature }); } }); this.getArchive = function () { return archive; }; } var arc = new Archiver(); arc.temperature; // 'get!' arc.temperature = 11; arc.temperature = 13; arc.getArchive(); // [{ val: 11 }, { val: 13 }] console.log(arc.temperature); /*es6 proxy以及Reflect实现方式*/ module.exports = (object, onChange) => { const handler = { get(target, property, receiver) { try { return new Proxy(target[property], handler); } catch (err) { return Reflect.get(target, property, receiver); } }, defineProperty(target, property, descriptor) { onChange(); return Reflect.defineProperty(target, property, descriptor); }, deleteProperty(target, property) { onChange(); return Reflect.deleteProperty(target, property); } }; return new Proxy(object, handler); }; ```