JavaScript Handler ownKeys() 方法

handler.ownKeys() 是 JavaScript 中的一個方法，用於與 Proxy 物件結合使用。Proxy 是 JavaScript 中的一個物件，它封裝另一個物件（目標物件），並允許你修改和攔截對該物件的運算。這包括獲取和設定屬性、呼叫函式等運算。

handler.ownKeys() 方法是 Proxy 處理程式物件可以定義的陷阱之一。當在包裝在代理中的目標物件上呼叫 Object.getOwnPropertyNames()、Object.getOwnPropertySymbols() 或 Object.keys() 方法時，它使你能夠攔截獲取該物件自身屬性鍵的過程。此方法使你能夠強有力地控制如何在代理物件上列舉屬性，使你能夠根據你的需求自定義屬性訪問和行為。

語法

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

new Proxy(target, {
   ownKeys(target) {}
});

引數

target - 它儲存目標物件。

返回值

此方法返回可列舉的物件。

示例 1

讓我們來看下面的例子，我們將使用 handler.ownKeys() 返回所有鍵。

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const a = {
   ownKeys(target) {
      return Reflect.ownKeys(target);
   },
};
const b = new Proxy({
   x: 1,
   y: 2
}, a);
document.write(JSON.stringify(Object.keys(b)));
</script>
</body>
</html>

輸出

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

示例 2

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

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
let a = {
   x: 1,
   y: 2,
};
let b = {
   ownKeys(a) {
      return Reflect.ownKeys(a).concat(["z"]);
   }
};
let c = new Proxy(a, b);
document.write(JSON.stringify(Object.getOwnPropertyNames(c)));
</script>
</body>
</html>

輸出

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

示例 3

在下面的示例中，我們將刪除屬性並使用 handler.ownKeys() 返回所有鍵。

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const a = {
   ownKeys(b) {
      return Reflect.ownKeys(b).filter(key => key !== 'y');
   },
};
const c = new Proxy({
   x: 1,
   y: 2
}, a);
document.write(JSON.stringify(Object.keys(c)));
</script>
</body>
</html>

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

示例 4

以下是一個示例，我們將使用 handler.ownKeys() 更改列舉鍵的順序。

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
let a = {
   x: 1,
   y: 2
};
let b = {
   ownKeys(a) {
      return ['y', 'x'];
   }
};
let c = new Proxy(a, b);
document.write(JSON.stringify(Object.keys(c)));
</script>
</body>
</html>

執行上述指令碼後，輸出視窗將彈出，在網頁上顯示文字。

列印頁面