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 同样是 代理 门卫 引领 三个关键词来表达。