# 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);
};
```
- 01.let-const
- 02.对象数组解构&赋值
- 03.字符串扩展,数值扩展,数组扩展
- 04.数组扩展
- 05.对象扩展
- 06.06.Symbol原始数据类型
- 07.set数据结构
- 08.map数据结构
- 09.proxy与Reflect
- 10.类
- 11.Promise
- 12.Iterator(迭代器)
- 13.Generator(生成器)
- 14.module与模块化
- 15.es6学习总结
- 记录- Vue拖拽实例
- 记录-git使用天坑之分支切换
- node -- session & cookie & localStorge
- 18.12关于前端战略技术储备与问题反馈
- Vue组件通信方式总结以及遇到的问题
- 01.版本回溯以及文件修改
- 02.远端控制
- 03.分支管理
- node 入门 留言板
- nodejs模块与 commonjs 规范
- 19年技术发展规划
- JS错误处理 -> 提升程序健壮性
- Git 基本使用
- 18年年终总结