JavaScript  handler.get() 方法



JavaScript 中的 handler.get() 方法是 Proxy 对象的一部分,可以拦截对目标对象的属性访问。它需要两个参数:target 对象和 accessed 属性。访问属性时,将触发此方法,从而允许在返回属性值之前执行自定义行为,例如日志记录、验证。它通常用于在 JavaScript 应用程序中实现数据验证或调试等功能。handler.get() 提供了一种强大的方法来自定义在 JavaScript 对象中访问属性的方式,使开发人员能够创建更灵活的代码。

语法

以下是 JavaScript handler.get() 方法的语法 -


new Proxy(target, {
	 	get(target, property, receiver) {}
});

参数

  • target − 它保存目标对象。
  • property − 它是要获取的属性的名称或符号。
  • receiver - 代理或从 proxy 继承的对象。

返回值

此方法返回任何值。

示例 1

让我们看看下面的示例,我们将在其中访问对象的属性。


<html>
<style>
body {
	 	font-family: verdana;
	 	color: #DE3163;
}
</style>
<body>
<script>
const x = {
	 	car: 'RS6',
	 	model: 2018
};
const y = {
	 	get: function(target, prop) {
	 	 	 return x[prop];
	 	}
};
const z = new Proxy(x, y);
document.write(z.car);
</script>
</body>
</html>

输出

如果我们执行上述程序,它将在网页上显示文本。

示例 2

考虑另一个场景,我们将使用数组索引访问该属性。


<html>
<style>
body {
	 	font-family: verdana;
	 	color: #DE3163;
}
</style>
<body>
<script>
const x = [11, 23, 33, 44];
const y = {
	 	get: function(target, prop, receiver) {
	 	 	 if (prop === 'first') {
	 	 	 	 	return x[0];
	 	 	 }
	 	 	 return x[prop];
	 	}
};
const z = new Proxy(x, y);
document.write(z[1]);
</script>
</body>
</html>

输出

在执行上述脚本时,它将在网页上显示一个数字。

示例 3

在下面的示例中,我们将检查对象上是否存在该属性。


<html>
<style>
body {
	 	font-family: verdana;
	 	color: #DE3163;
}
</style>
<body>
<script>
const x = {
	 	bike: "Hayabusa",
	 	model: 2024
};
const y = {
	 	get: function(target, prop, receiver) {
	 	 	 if (prop in x) {
	 	 	 	 	return x[prop];
	 	 	 } else {
	 	 	 	 	return 'Property does not exist.';
	 	 	 }
	 	}
};
const proxy = new Proxy(x, y);
document.write(proxy.bike + " < br > ");
document.write(proxy.engine);
</script>
</body>
</html>

当我们执行上述代码时,它将生成一个由网页上显示的文本组成的输出。