JavaScript Handler get() 方法



JavaScript 中的 handler.get() 方法是 Proxy 物件的一部分,它允許攔截目標物件的屬性訪問。它接受兩個引數:目標物件和被訪問的屬性。當屬性被訪問時,此方法會被觸發,允許自定義行為,例如在返回屬性值之前進行日誌記錄或驗證。它通常用於在 JavaScript 應用程式中實現資料驗證或除錯等功能。handler.get() 提供了一種強大的方法來自定義如何在 JavaScript 物件中訪問屬性,使開發人員能夠建立更靈活的程式碼。

語法

以下是 JavaScript handler.get() 方法的語法:

new Proxy(target, {
   get(target, property, receiver) {}
});

引數

  • target − 包含目標物件。
  • property − 要獲取的屬性的名稱或符號。
  • receiver − 代理或繼承自代理的物件。

返回值

此方法返回任意值。

示例 1

讓我們看下面的例子,我們將訪問物件的屬性。

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const x = {
   car: 'RS6',
   model: 2018
};
const y = {
   get: function(target, prop) {
      return x[prop];
   }
};
const z = new Proxy(x, y);
document.write(z.car);
</script>
</body>
</html>

輸出

如果我們執行上面的程式,它將在網頁上顯示文字。

示例 2

考慮另一種情況,我們將使用陣列索引訪問屬性。

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const x = [11, 23, 33, 44];
const y = {
   get: function(target, prop, receiver) {
      if (prop === 'first') {
         return x[0];
      }
      return x[prop];
   }
};
const z = new Proxy(x, y);
document.write(z[1]);
</script>
</body>
</html>

輸出

執行上述指令碼後,它將在網頁上顯示一個數字。

示例 3

在下面的例子中,我們將檢查屬性是否存在於物件中。

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const x = {
   bike: "Hayabusa",
   model: 2024
};
const y = {
   get: function(target, prop, receiver) {
      if (prop in x) {
         return x[prop];
      } else {
         return 'Property does not exist.';
      }
   }
};
const proxy = new Proxy(x, y);
document.write(proxy.bike + " < br > ");
document.write(proxy.engine);
</script>
</body>
</html>

當我們執行上述程式碼時,它將生成一個包含在網頁上顯示的文字的輸出。

廣告