JavaScript Handler get() 方法

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

语法

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

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

参数

target − 包含目标对象。
property − 要获取的属性的名称或符号。
receiver − 代理或继承自代理的对象。

返回值

此方法返回任意值。

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

当我们执行上述代码时，它将生成一个包含在网页上显示的文本的输出。

打印页面