JavaScript中代理的使用方法

本篇內容介紹了“JavaScript中代理的使用方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

目錄

• 什么是代理

• Proxy的基本知識

• handler對象方法

• Proxy可以實現的

  
  

什么是代理

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來判斷。

“JavaScript中代理的使用方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！