优秀的编程知识分享平台

网站首页 > 技术文章 正文

JavaScript，ES6，Proxy，代理/代理器，代理模式，代码案例

nanyue 2024-10-18 07:40:39 技术文章 4 ℃

Proxy代理/代理器

Proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

代理模式

代理是一个对象（proxy）用它来控制目标对象的访问，为此先与目标对象相同的接口，但是不同于装饰者模式，它对目标对象不进行任何修改，它的目的在于延缓"复杂"对象的初始化时间，也就是说当用到这个目标对象时再初始化。

Proxy代码案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript，ES6，Proxy代理，代理模式，代码案例</title>
	</head>
	<body>
		<script>
			// ====================================================================//
			// proxy，代理，操作对象时，先经过代理，才能到达对象，可以起到"拦截"的作用
			// ====================================================================//
			let user ={
				'id': 1001,
				'name': "张三",
				'code': "A12345678"
			}
			const handler = {
				get:(object,prop)=>{
					return object[prop];
				},
				set:(object,prop,value)=>{
					console.log(`代理：设置了user的${prop}属性为:${value}`);
					object[prop] = value;
				}
			}
			const userProxy = new Proxy(user,handler);
			console.log("代理访问：" + userProxy.id);
			userProxy.name = "李四";
			console.log("代理访问：" + userProxy.name);
			// ====================================================================//
			// 
			// ====================================================================//
			var _vm = {
			    data(){
			        return{
			            id: 1,
			            name: "名称",
			            code: 'ABCDEFG'
			        }
			    }
			}
			console.log("原始，id=" + _vm.data().id); // 正常的输出
			console.log("原始，name=" + _vm.data().name); // 正常的输出
			// 代理
			var vm = new Proxy(_vm,{
			    get:(obj,prop)=>{
			        return obj.data()[prop];
			    },
			    set:(obj,prop,value)=>{
			        obj.data()[prop] = value;
			    }
			})
			console.log("代理，id=" + vm.id);
			console.log("代理，name=" + vm.name);
		</script>
	</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表