JavaScript handler ownKeys() 方法

handler.ownKeys() 是 JavaScript 中的一个方法，与代理对象结合使用。代理是 JavaScript 中的一个对象，它封装了另一个对象(目标对象)，并允许您修改和拦截针对该对象的操作。这些操作包括获取和设置属性、调用函数等。

handler.ownKeys() 方法是代理处理程序对象可以定义的陷阱之一。当对已包装在代理中的目标对象调用 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>

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