JavaScript handler.ownKeys()方法_JavaScript 菜鸟教程

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

handler.ownKeys（）方法是 Proxy 处理程序对象可以定义的陷阱之一。当在已包装在代理中的目标对象上调用 Object.getOwnPropertyNames（）、Object.getOwnPropertySymbols（）或 Object.keys（）方法时，它使您能够拦截获取该对象自己的属性键的过程。此方法使您可以对代理对象上的属性枚举方式进行强控制，从而使您能够根据需要自定义属性访问和行为。

语法

以下是 JavaScript handler.ownKeys（） 方法的语法 -

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

参数

target − 它保存目标对象。

返回值

此方法返回 enumerable 对象。

示例 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>

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

<< JavaScript handler.isExtensible()方法 JavaScript handler.set()方法 >>