# 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年年終總結