【ES6】Proxy 代理_6ftproxy-优快云博客

本文链接：https://blog.youkuaiyun.com/python2021_7/article/details/123097327

本文介绍了JavaScript中的Proxy对象，它允许我们创建对象的代理以拦截和自定义基本操作，如属性查找、枚举、赋值和函数调用。通过示例展示了如何使用Proxy进行对象的查找和劫持，实现数据的拦截与动态响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、Proxy代理是什么？
二、使用步骤
- 1.Proxy查找
- 2.Proxy代理劫持
总结

前言

一、Proxy代理是什么？

示例：Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如：属性查找，枚举，赋值，函数调用等）
。

二、使用步骤

1.Proxy查找

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var obj = {
				'name': '木木',
				age: 18
			};

			var o = new Proxy(obj, {
				get: function(target, prop) {
					if (prop in target) {
						return target[prop]
					} else {
						return '我查查';
					}
				},
				set: function(target, prop, value) {
					if (porp === 'age') {
						if (value > 200 || va < 0) {
							throw RangeError('这个年龄恐怕不是人类')
						} else {
							target[prop] = value;
						}
					} else {
						target[prop] = value;
					}
				}
			})
		</script>
	</body>
</html>

2.Proxy代理劫持

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="inp">
		<p id="myp"></p>
	</body>
	<script type="text/javascript">
		// 获取两个节点
		var inp = document.getElementById('inp');
		var myp = document.getElementById('myp');
		// 定义对象obj
		var obj = {
			msg: '我喜欢Vue'
		};
		// 使用代理劫持obj
		var o = new Proxy(obj, {
			// get 劫持
			get(target, prop) {
				return target[prop]
			},
			// set 劫持
			set(target, prop, value) {
				// 只要被设置 value会输出
				// console.log(value);
				if (prop === 'msg') {
					// 更新
					myp.innerText = value;
					inp.value = value;
				}
				target[prop] = value;
			}
		})
		// 设置节点的值或者文本
		inp.value = o.msg;
		myp.innerText = o.msg;

		// 目标：当input发生变化时候，p的内容也会跟随变化
		// 给inp表单添加input事件修改o.msg的值
		inp.oninput = function() {
			o.msg = inp.value
		}
	</script>
</html>