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>

执行上述脚本后，输出窗口将弹出，在网页上显示文本。

打印页面