JavaScript Handler set() 方法

JavaScript 中的 handler.set() 方法用於構建一個代理物件，允許設定物件屬性。當在代理物件上設定屬性時，會使用目標物件、屬性鍵和新值作為引數呼叫 handler.set() 方法。然後，handler.set() 方法可以執行任何必要的邏輯，例如在允許在目標物件上設定屬性之前驗證新值。此方法可用於自定義物件行為，使其可用於實現資料驗證、訪問控制等功能。

語法

以下是 JavaScript handler.set() 方法的語法：

new Proxy(target, {
   set(target, property, value, receiver) {}
});

引數

target − 包含目標物件。
property − 包含要設定的屬性的名稱或符號。
value − 要設定的屬性的新值。
receiver − 包含最初將賦值定向到的物件。

返回值

此方法返回一個布林值。

示例 1

讓我們來看下面的例子，我們將攔截物件的屬性並記錄正在設定的屬性值。

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const x = {
   set(target, property, value) {
      document.write(`${value}`);
      target[property] = value;
      return true;
   },
};
const y = new Proxy({}, x);
y.car = 'POLO GT';
</script>
</body>
</html>

輸出

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

示例 2

考慮另一種情況，我們將阻止新增屬性。

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const a = {};
const b = {
   set(target, property, value) {
      if (property === 'x') {
         document.write(`Setting ${property}: ` + " < br > ");
         target[property] = value;
         return true;
      }
      document.write(`Setting ${property}:` + " < br > ");
      return false;
   }
};
const c = new Proxy(a, b);
c.x = 11;
document.write(c.x + " < br > "); 
c.y = 22; document.write(c.y);
</script>
</body>
</html>

輸出

執行上述指令碼後，它將在網頁上顯示文字。

示例 3

在下面的例子中，我們將驗證正在設定的值是否為正數。

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const a = {};
const b = {
   set(target, property, value) {
      if (typeof value === 'number' && value > 0) {
         document.write(`Setting Value for ${property}:` + " < br > ");
         target[property] = value;
         return true;
      }
      document.write(`Setting Value for ${property}:` + " < br > ");
      return false;
   }
};
const c = new Proxy(a, b);
c.x = 'Welcome';
document.write(c.x + " < br > "); 
c.y = 123; document.write(c.y);
</script>
</body>
</html>

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

列印頁面