es6代理模式怎么理解

本文小編為大家詳細介紹“es6代理模式怎么理解”，內容詳細，步驟清晰，細節處理妥當，希望這篇“es6代理模式怎么理解”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

es6代理模式是一種設計模式，指的是一個類別可以作為其他東西的接口，具體的表現形式就是es6中新增的Proxy對象；Proxy對象用于定義基本操作的自定義行為，語法為“let p=new Proxy(target,handler);”。

本教程操作環境：windows10系統、ECMAScript 6.0版、Dell G3電腦。

es6代理模式是什么

代理模式（英語：Proxy Pattern）是程序設計中的一種設計模式。

所謂的代理者是指一個類別可以作為其它東西的接口。代理者可以作任何東西的接口：網絡連接、內存中的大對象、文件或其它昂貴或無法復制的資源。

而在JavaScript中代理模式的具體表現形式就是ES6中的新增對象---Proxy

Proxy 的解釋是:

Proxy對象用于定義基本操作的自定義行為（如屬性查找，賦值，枚舉，函數調用等）。

簡單來說: Proxy 對象就是可以讓你去對JavaScript中的一切合法對象的基本操作進行自定義.然后用你自定義的操作去覆蓋其對象的基本操作.也就是當一個對象去執行一個基本操作時,其執行的過程和結果是你自定義的,而不是對象的.

:sweat:好吧,用文字表達可能太復雜了.我們還是直接上代碼吧.

Proxy的語法是:

let p = new Proxy(target, handler);

• target 是你要代理的對象.它可以是JavaScript中的任何合法對象.如: (數組, 對象, 函數等等)

• handler 是你要自定義操作方法的一個集合.

• p 是一個被代理后的新對象,它擁有 target 的一切屬性和方法.只不過其行為和結果是在 handler 中自定義的.

然后讓我們來看這段代碼:

let obj = {
 a: 1,
 b: 2,
}
 
const p = new Proxy(obj, {
 get(target, key, value) {
  if (key === 'c') {
   return '我是自定義的一個結果';
  } else {
   return target[key];
  }
 },
 
 set(target, key, value) {
  if (value === 4) {
   target[key] = '我是自定義的一個結果';
  } else {
   target[key] = value;
  }
 }
})
console.log(obj.a) // 1
console.log(obj.c) // undefined
console.log(p.a) // 1
console.log(p.c) // 我是自定義的一個結果
obj.name = '李白';
console.log(obj.name); // 李白
obj.age = 4;
console.log(obj.age); // 4
p.name = '李白';
console.log(p.name); // 李白
p.age = 4;
console.log(p.age); // 我是自定義的一個結果

從上面這段代碼中,我可以很清楚的看到 Proxy 對象的作用.即是之前所受的 用于定義基本操作的自定義行為 .同樣的 get 和 set 操作.沒有沒代理的對象所得的結果是其JavaScript本身的執行機制運行計算后所得到的.而被代理了的對象的結果則是我們自定義的.

Proxy的兼容性如下：

讀到這里，這篇“es6代理模式怎么理解”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。