<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          Javascript Proxy對象 簡介

          時間:?2017-12-28閱讀:?1209標簽:?proxy

          ES6 中引入Proxies,讓你可以自定義Object的基本操作。例如,get就是Object的基礎操作方法。

          const obj = {
             val: 10
          };
          
          console.log(obj.val);
          

          這里,console.log()表達式在對象obj上執行get方法來獲取val的值。

          另一個對象的基本操作方法是 set。

          const obj = {
             val: 10
          };
          
          obj.val2 = 20;
          

          這里,set方法用來給對象obj設置一個新的值。


          如何創建Proxy?

          const proxiedObject = new Proxy(initialObj, handler);
          

          調用Proxy構造函數,new Proxy()將返回一個對象,不僅包含了initialObj里的值,而且其基本操作(如get 和 set)現在可以通過handler對象來指定一些自定義邏輯。

          我們寫個例子來理解這個概念,

          const handler = {
              get: function() {
                  console.log('A value has been accessed');
              }
          }
          
          const initialObj = {
              id: 1,
              name: 'Foo Bar'
          }
          
          const proxiedObj = new Proxy(initialObj, handler);
          
          console.log(proxiedObj.name);
          

          現在,如果我們沒有構造一個Proxy對象,執行第14行的console.log(proxiedObj.name)會在控制臺輸出 “Foo Bar”。

          不過現在我們定義了一個Proxy,并在第三行get方法中定義了一些自定義邏輯。

          現在執行console.log(proxiedObj.name)會在控制臺輸出 “A value has been accessed”。


          仔細看,你會發現控制臺中實際上有兩條記錄。 “A value has been accessed” 和 undefined。 為什么?

          get運算符的默認實現是返回Object中存儲的值。由于我們將它重寫為只記錄一條語句,該值永遠不會返回,因此第14行的console.log()輸出undefined。

          讓我們來解決這個問題!

          get運算符有兩個參數 - 對象本身和被訪問的屬性。

          const handler = {
              get: function(obj, prop) {
                  console.log('A value has been accessed');
                  return obj[prop]; // 返回訪問的key在obj的值
              }
          }
          
          const initialObj = {
              id: 1,
              name: 'Foo Bar'
          }
          
          const proxiedObj = new Proxy(initialObj, handler);
          
          console.log(proxiedObj.name);
          
          返回屬性值


          返回屬性值 --- 控制臺的輸出

          好多了吧! 

          我們為get提供的自定義覆蓋被稱為“攔截器”(大概基于操作系統攔截的概念)。 handler對象基本上是一個包含一組“攔截”的對象,每當訪問對象屬性時都會被觸發。

          我們給set也添加一個“攔截器”。 我們將做同樣的事情 - 任何時候設置一個值,我們將記錄被修改的屬性,以及為該鍵設置的值。

          set操作符有三個參數 - 對象本身,被訪問的屬性和為該屬性設置的值。

          const handler = {
              get: function(obj, prop) {
                  console.log('A value has been accessed');
                  return obj[prop];
              },
              set: function(obj, prop, value) {
                  console.log(`${prop} is being set to ${value}`);
              }
          }
          
          const initialObj = {
              id: 1,
              name: 'Foo Bar'
          }
          
          const proxiedObj = new Proxy(initialObj, handler);
          
          proxiedObj.age = 24
          
          添加set “攔截器”

          這里,在第18行進行的訪問將觸發第6行定義的功能,該功能將記錄正在訪問的屬性和正在設置的值。


          Set “攔截器”?—— 控制臺的輸出

          一個真實的例子

          假設我們有一個定義叫person的對象

          const person = {
             id: 1,
             name: 'Foo Bar'
          };
          

          如果我們想讓這個對象的id屬性是一個私有屬性呢? 沒人能夠通過person.id訪問這個屬性,如果有人這樣做,我們需要拋出一個錯誤。 我們將如何做到這一點?

          讓Proxies來拯救吧!

          我們所需要做的就是給這個對象創建一個Proxy,并覆蓋get運算符來阻止我們訪問id屬性!

          const handler = {
              get: function(obj, prop) {
                  if (prop === 'id') { // Check if the id is being accessed
                      throw new Error('Cannot access private properties!'); // Throw an error
                  } else {
                      return obj[prop]; // If it's not the id property, return it as usual
                  }
              }
          }
          
          const person = {
              id: 1,
              name: 'Foo Bar'
          }
          
          const proxiedPerson = new Proxy(person, handler);
          
          console.log(proxiedPerson.id);
          
          阻止訪問私有屬性

          這里,在我們給get創建的“攔截器”,我們檢查被訪問的屬性是否是id屬性,如果是的話,我們會拋出一個錯誤。 否則,我們照常返回值。


          私有屬性?—?控制臺輸出

          另一個極好的用例是校驗。 通過設置set“攔截器”,我們可以在設置值之前添加自定義驗證。 如果該值不符合驗證,我們可以拋出一個錯誤!

          const handler = {
              set: function(obj, prop, value) {
                  if (typeof value !== 'string') {
                      throw new Error('Only string values can be stored in this object!');
                  } else {
                      obj[prop] = value;
                  }
              }
          }
          
          const obj = {};
          
          const proxiedObj = new Proxy(obj, handler);
          
          console.log(proxiedObj); // This will log an empty object
          proxiedObj.name = 'Foo Bar'; // This should be allowed
          console.log(proxiedObj); // This will log an object with the name property set
          
          proxiedObj.age = 24; // This will throw an error.
          
          自定義對象的屬性校驗


          自定義校驗 - 控制臺輸出

          在上面的例子中,我們已經看到了get和set“陷阱”。 實際上可以設置更多的“陷阱”。 你可以在這里找到整個列表

          Proxy對象只是在閱讀關于它們的這篇文章之后才進入我的視野,我已經可以在我每天寫的代碼中看到它們的用處了!

          如果你之前在項目或工作中使用過Proxies,我很樂意聽到!

          ~最后~


          如果您覺得這篇文章對您有用,請點個贊!

          在什么地方卡住了,需要更多的幫助,還是只想打個招呼? 在Hashnode 給我直接發問題,或者在Twitter上Call我。 你也可以在Github上找到我。

          來源:原文來源翻譯來源
          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/291

          Vue3解決問題之Proxy在Vue中的作用

          Reflect 是一個內置的對象,它提供攔截 JavaScript 操作的方法。這些方法與proxy handlers的方法相同。Reflect不是一個函數對象,因此它是不可構造的。可用來替換部分Object靜態函數, 比較好的一點是__避免直接報錯__

          ES6的標準內置對象Proxy

          Proxy是ES6規范定義的標準內置對象,可以對目標對象的讀取、函數調用等操作進行攔截。一般來說,通過Proxy可以讓目標對象“可控”,比如是否能調用對象的某個方法,能否往對象添加屬性等等。

          ES6之Proxy

          Proxy用于修改某些操作的默認行為,等同于在語言層面做出修改,所以屬于一種『元編程』即對編程語言進行編程。Proxy 是在目標對象之前架設一層『攔截』,外部對對象的訪問,都需要經過該層攔截。因此在攔截中對外界的訪問進行過濾和改寫。

          Proxy 的巧用

          使用Proxy,你可以將一只貓偽裝成一只老虎。下面大約有6個例子,我希望它們能讓你相信,Proxy 提供了強大的 Javascript 元編程。盡管它不像其他ES6功能用的普遍,但Proxy有許多用途

          ES6中代理和反射(proxy)

          通過調用new proxy()你可以創建一個代理來替代另一個對象(被稱為目標),這個代理對目標對象進行了虛擬,因此該代理與該目標對象表面上可以被當做同一個對象來對待。

          Proxy及其優勢

          通常,當談到JavaScript語言時,我們討論的是ES6標準提供的新特性,本文也不例外。 我們將討論JavaScript代理以及它們的作用,但在我們深入研究之前,我們先來看一下Proxy的定義是什么。

          Js中Proxy

          Proxy 用于修改某些操作的默認行為(基本操作有屬性查找,賦值,枚舉,函數調用等)。get(target, propKey, receiver):攔截對象屬性的讀取;set: function(obj, prop, value,receive) : 攔截某個屬性的賦值操作

          使用 Proxy 更好的封裝 Storage API

          這篇文章提到 Proxy 這種語法可以用來封裝 sessionStorage、 localStorage 甚至是 IndexedDB。可以使用 Proxy 代理來使 API 更容易使用。首先介紹一下 Proxy 的基本用法:

          ES6 系列之 defineProperty 與 proxy

          我們或多或少都聽過數據綁定這個詞,數據綁定”的關鍵在于監聽數據的變化,可是對于這樣一個對象:var obj = {value: 1},我們該怎么知道 obj 發生了改變呢?ES5 提供了 Object.defineProperty 方法,該方法可以在一個對象上定義一個新屬性

          拿Proxy可以做哪些有意思的事兒

          Proxy是什么意思?Proxy是ES6中提供的新的API,可以用來定義對象各種基本操作的自定義行為,在我們需要對一些對象的行為進行控制時將變得非常有效。

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网