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

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

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

什么是代理

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

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

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

2.Proxy就是代理，當(dāng)我們不方便去訪問某個(gè)對(duì)象或者不滿足于簡(jiǎn)單的訪問時(shí)，代理就可以作為“中間人”來幫助我們更好的來控制對(duì)象的操作！！

Proxy的基本知識(shí)

語法：

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

target: 要使用 Proxy 包裝的目標(biāo)對(duì)象

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

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

在使用中，需要我們?nèi)ジ噘M(fèi)神的是handler中代理行為的代碼，它可以幫助我們來更好的使用Proxy

handler對(duì)象方法

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

當(dāng)然還有其他更多的方法請(qǐng)參考MDN：handler 對(duì)象的方法

Proxy可以實(shí)現(xiàn)的

跟蹤屬性訪問

當(dāng)我們需要知道對(duì)象什么時(shí)候被訪問、修改時(shí)。

 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';

解決對(duì)象屬性為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 (其實(shí)這一步已經(jīng)針對(duì)`target`創(chuàng)建了一個(gè)x.y的屬性)
  proxy.x.y.z = 'hello'
  console.log('z' in proxy.x.y) // true
  console.log(target.x.y.z)     // hello

我們代理了get，并在里邊進(jìn)行邏輯處理，如果我們要進(jìn)行g(shù)et的值來自一個(gè)不存在的key，則我們會(huì)在target中創(chuàng)建對(duì)應(yīng)個(gè)這個(gè)key，然后返回一個(gè)針對(duì)這個(gè)key的代理對(duì)象。

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

但是這會(huì)有一個(gè)小缺點(diǎn)，就是如果你確實(shí)要判斷這個(gè)key是否存在只能夠通過in操作符來判斷，而不能夠直接通過get來判斷。