JavaScript Handler setPrototypeOf() 方法

JavaScript 中的 handler.setPrototypeOf() 方法允許您將指定物件的原型設定為另一個物件。此方法允許您修改物件的原型，從而有效地更改其繼承鏈。您可以使用它來動態更改程式碼中物件的執行方式。但是，務必謹慎使用此方法，因為如果使用不當，可能會導致意外行為。此方法也是 Proxy 物件處理程式的一部分，它允許您透過為其提供攔截器來修改 Proxy 物件的行為。

語法

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

new Proxy(target, {
   setPrototypeOf(target, prototype) {}
});

引數

target − 它儲存目標物件。
prototype − 它是要設定的新原型物件或 null。

返回值

此方法返回一個布林值，如果原型成功更改則返回 true。

示例 1

讓我們來看下面的示例，我們將更改物件的原型。

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const x = {};
const y = {
   a: 10
};
const z = {
   setPrototypeOf(target, prototype) {
      return Reflect.setPrototypeOf(target, prototype);
   }
};
const b = new Proxy(x, z);
z.setPrototypeOf(b, y);
document.write(b.a);
</script>
</body>
</html>

輸出

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

示例 2

考慮另一個場景，我們將阻止原型更改。

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const x = {};
const y = {
   a: 10
};
const z = {
   setPrototypeOf(target, prototype) {
      console.error("Prototype setting is not allowed");
      return false;
   }
};
const b = new Proxy(x, z);
z.setPrototypeOf(b, y);
document.write(b.a);
</script>
</body>
</html>

輸出

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

示例 3

在下面的示例中，我們將記錄每次更改物件時發生的原型更改。

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const a = {};
const b = {
   setPrototypeOf(target, proto) {
      document.write("Prototype changed to: " + JSON.stringify(d));
      return Reflect.setPrototypeOf(target, proto);
   }
};
const c = new Proxy(a, b);
const d = {
   x: 'WELCOME'
};
Object.setPrototypeOf(c, d);
</script>
</body>
</html>

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

列印頁面