1. 首页
  2. JavaScript 菜鸟教程
  3. JavaScript handler.set()方法

JavaScript handler.set()方法

JavaScript 中的 handler.set（） 方法用于构建允许设置对象属性的代理对象。在代理对象上设置属性时，使用目标对象、属性键和新值作为参数调用 handler.set（） 方法。然后，handler.set（） 方法可以执行任何必要的逻辑，例如在允许在目标对象上设置属性之前验证新值。此方法可用于自定义对象行为，使其可用于实现数据验证、访问控制等功能。

语法

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

new Proxy(target, {
	 	set(target, property, value, receiver) {}
});

参数

  • target − 它保存目标对象。
  • property − 它保存要设置的属性的名称或符号。
  • value − 它是要设置的属性的新值。
  • receiver − 它保存分配最初定向到的对象。

返回值

此方法返回 Boolean Value。

示例 1

让我们看看下面的示例，我们将在其中截获 objcet 上的属性并记录正在设置的属性值。

<html>
<style>
body {
	 	font-family: verdana;
	 	color: #DE3163;
}
</style>
<body>
<script>
const x = {
	 	set(target, property, value) {
	 	 	 document.write(`${value}`);
	 	 	 target[property] = value;
	 	 	 return true;
	 	},
};
const y = new Proxy({}, x);
y.car = 'POLO GT';
</script>
</body>
</html>

输出

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

示例 2

考虑另一个场景，我们将阻止属性添加。

<html>
<style>
body {
	 	font-family: verdana;
	 	color: #DE3163;
}
</style>
<body>
<script>
const a = {};
const b = {
	 	set(target, property, value) {
	 	 	 if (property === 'x') {
	 	 	 	 	document.write(`Setting ${property}: ` + " < br > ");
	 	 	 	 	target[property] = value;
	 	 	 	 	return true;
	 	 	 }
	 	 	 document.write(`Setting ${property}:` + " < br > ");
	 	 	 return false;
	 	}
};
const c = new Proxy(a, b);
c.x = 11;
document.write(c.x + " < br > ");	
c.y = 22; document.write(c.y);
</script>
</body>
</html>

输出

在执行上述脚本时，它将在网页上显示文本。

示例 3

在以下示例中，我们将验证正在设置的值是否为正数。

<html>
<style>
body {
	 	font-family: verdana;
	 	color: #DE3163;
}
</style>
<body>
<script>
const a = {};
const b = {
	 	set(target, property, value) {
	 	 	 if (typeof value === 'number' && value > 0) {
	 	 	 	 	document.write(`Setting Value for ${property}:` + " < br > ");
	 	 	 	 	target[property] = value;
	 	 	 	 	return true;
	 	 	 }
	 	 	 document.write(`Setting Value for ${property}:` + " < br > ");
	 	 	 return false;
	 	}
};
const c = new Proxy(a, b);
c.x = 'Welcome';
document.write(c.x + " < br > ");	
c.y = 123; document.write(c.y);
</script>
</body>
</html>

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

<< JavaScript handler.ownKeys()方法 JavaScript handler.setPrototypeOf()方法 >>