js es6 Proxy

传统的get,set

ES6 中引入Proxies,让你可以自定义Object的基本操作。例如,get就是Object的基础操作方法。

const obj = {
val: 10
};

console.log(obj.val);

这里,console.log()表达式在对象obj上执行get方法来获取val的值。

另一个对象的基本操作方法是 set。

const obj = {
val: 10
};

obj.val2 = 20;

这里,set方法用来给对象obj设置一个新的值。

proxy

const handler={
	get:function(obj,prop){
		console.log('get');
		return obj[prop];
	}
}
const initialobj={
	id:1,
	name:'Foo Bar'
}
const proxiedObject=new Proxy(initialobj,handler);
console.log(proxiedObject.id);

这个时候我们得到的结果为1,那么这样有什么用呢?可以想象一下假如我们暴露出整个initialobj对象,那么其中的属性会全部暴露出去。
proxy这个意思是代理的意思,那么这个时候我们可以这样处理。
比如我想封装这个initialobj对象,那么我改如何?
或者说我想让id为private,ok,这就是一个困难了。
当然我们有方法的,比如说,拆分,但是这不是ok的。


const handler={
	get:function(obj,prop){
		if(prop=='id')
		{
			return 6;
		}
		console.log('get');
		return obj[prop];
	}
}
const initialobj={
	id:1,
	name:'Foo Bar'
}
const proxiedObject=new Proxy(initialobj,handler);
console.log(proxiedObject.id);

这个时候就是返回6了,相当于代理,门卫,引领三个关键词。

<script>
  const handler = {
	get: function(obj, prop) {
	  if (prop == "id") {
		return 6;
	  }
	  console.log("get");
	  return obj[prop];
	},
	set: function(obj, prop, value) {
	  if (typeof value !== "string") {
		throw new Error("Only string values can be stored in this object!");
	  } else {
		obj[prop] = value;
	  }
	}
  };
  const initialobj = {
	id: 1,
	name: "Foo Bar"
  };
  const proxiedObject = new Proxy(initialobj, handler);
  console.log(proxiedObject.id);
  proxiedObject.name = 8;
</script>

set 同样是 代理 门卫 引领 三个关键词来表达。

posted @   敖毛毛  阅读(1110)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示