一篇文章搞懂JavaScript中的代理和代理的使用

Posted on by

什麼是代理

MDN上的定義：Proxy（也就是代理） 對象用於定義基本操作的自定義行為（如屬性查找，賦值，枚舉，函數調用等）。

官方的定義總是這麼晦澀枯燥，那麼究竟Proxy能做什麼？

1.代理這個概念來自於元編程，就是一種你可以編寫出一個可以讀取、修改、分析、甚至生成新程序的程序。而JS可以通過Proxy和Reflect這兩個對象來進行js元編程！！

2.Proxy就是代理，當我們不方便去訪問某個對象或者不滿足於簡單的訪問時，代理就可以作為“中間人”來幫助我們更好的來控制對象的操作！！

Proxy的基本知識

語法：

const handler = {};
let target = {};//目標對象
let userProxy = new Proxy(target,handler);//成功實現代理！！
userProxy.a = 1;
console.log(target.a);//1
console.log(target == userProxy);//false

target: 要使用 Proxy 包裝的目標對象

handler: 一個通常以函數作為屬性的對象，各屬性中的函數分別定義瞭在執行各種操作時代理的行為。

OK！那麼恭喜你，你已經掌握瞭Proxy的定義。

在使用中，需要我們去更多費神的是handler中代理行為的代碼，它可以幫助我們來更好的使用Proxy

handler對象方法

const handler = {
	get(target,prop,receiver){
		console.log('get!');
		return 'a';
	}
}
let target = {name:'tar'};
let userProxy = new Proxy(target,handler);
userProxy.name

當然還有其他更多的方法請參考MDN：handler 對象的方法

Proxy可以實現的

跟蹤屬性訪問

當我們需要知道對象什麼時候被訪問、修改時。

 let target = {
	name:'ww'
	}
 const handlers = {
    get(tar, prop){
     	console.log('get');
     	return Reflect.get(...arguments); 
     },
     set(tar,prop){
		console.log('set');
		return Reflect.set(...arguments);
	 }
  }
  let userProxy = new Proxy(target, handlers);
  userProxy.name;
  userProxy.name = 'wqw';

解決對象屬性為undefined的問題

let target = {}
  let handlers = {
    get: (target, property) => {
      target[property] = (property in target) ? target[property] : {}
      if (typeof target[property] === 'object') {
        return new Proxy(target[property], handlers)
      }
      return target[property]
    }
  }
  let proxy = new Proxy(target, handlers)
  console.log('z' in proxy.x.y) // false (其實這一步已經針對`target`創建瞭一個x.y的屬性)
  proxy.x.y.z = 'hello'
  console.log('z' in proxy.x.y) // true
  console.log(target.x.y.z)     // hello

我們代理瞭get，並在裡邊進行邏輯處理，如果我們要進行get的值來自一個不存在的key，則我們會在target中創建對應個這個key，然後返回一個針對這個key的代理對象。

這樣就能夠保證我們的取值操作一定不會拋出can not get xxx from undefined

但是這會有一個小缺點，就是如果你確實要判斷這個key是否存在隻能夠通過in操作符來判斷，而不能夠直接通過get來判斷。

參考資料：

MDN-Proxy

JS-設計模式

Proxy可以做哪些有趣的事情

元編程

總結

本篇文章就到這裡瞭，希望能給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容！

推薦閱讀：