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

更新時間：2021年08月26日 16:47:01 作者：CSDN

這篇文章主要為大家詳細介紹了JavaScript代理和代理的使用的方法，感興趣的小伙伴們可以參考一下，希望能給你帶來幫助

什么是代理

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

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

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

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

Proxy的基本知識

語法：

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

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

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

OK！那么恭喜你，你已經(jīng)掌握了Proxy的定義。

在使用中，需要我們?nèi)ジ噘M神的是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可以實現(xiàn)的

跟蹤屬性訪問

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

 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 (其實這一步已經(jīng)針對`target`創(chuàng)建了一個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中創(chuàng)建對應個這個key，然后返回一個針對這個key的代理對象。

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

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