我最近一直在研究javascript中的proxy,我对它的能力感到惊讶。Proxy
允许你改变语言的基本结构(像object
,arrays
,functions
..)
下面是使用javascript代理的几个例子。
对象冻结
我们可以使用几行简单的代码来阻止对对象的改变操作,这本质上是冻结对象
const hero = {
name: 'Saitama',
age: 25,
class: 'B',
race: 'Human',
heroName: 'Caped Baldy',
};
const Freeze = obj =>
new Proxy(obj, {
set: function(target, key, value) {
throw Error("You can't change values this object has been frozen");
},
});
const saitama = Freeze(hero);
saitama.name = 'Garuro'; // This will throw error
你也可以冻结arrays
,Map
,WeakMap
,Set
追踪对象变化
Proxy
能改追踪对象的变化,这本质上是维护历史记录
const createHistory = obj => {
let history = [JSON.parse(JSON.stringify(obj))];
const proxiedObject = new Proxy(obj, {
set: function(target, key, value) {
history.push({ ...target, [key]: value });
Reflect.set(target, key, value);
},
});
return [history, proxiedObject];
};
const [history, proxiedObject] = createHistory(hero);
proxiedObject.name = 'Genos';
proxiedObject.class = 'C';
console.log(history);
历史对象将包含对对象所做更改的快照
[
{
name: 'Saitama',
age: 25,
class: 'B',
race: 'Human',
heroName: 'Caped Baldy'
},
{
name: 'Genos',
age: 25,
class: 'B',
race: 'Human',
heroName: 'Caped Baldy'
},
{
name: 'Genos',
age: 25,
class: 'C',
race: 'Human',
heroName: 'Caped Baldy'
}
]
同样,你也可以跟踪函数被应用触发器调用的次数
不区分大小写的属性访问
const caseInsensitive = obj =>
new Proxy(obj, {
get: function(target, key) {
// 为了简单起见,我假设属性的键值默认为小写
return Reflect.get(target, key.toLowerCase());
},
});
const proxiedObject = caseInsensitive(hero);
console.log(proxiedObject.name); // saitama
console.log(proxiedObject.NAME); // saitama
处理不存在的属性
你可以通过下面的代码轻松的处理未定义的属性
const FetchValue = obj =>
new Proxy(obj, {
get: function(target, key) {
if (target.hasOwnProperty(key)) {
return [Reflect.get(target, key), true];
}
return [null, false];
},
});
const proxiedObject = FetchValue(hero);
const [name, nameExist] = proxiedObject.name;
const [city, cityExist] = proxiedObject.city;
if (nameExist) {
console.log(name);
}
if (cityExist) {
console.log(city); //因为city属性不存在,所以不执行
}
更多的使用Proxy
的例子在这个,你可以找到更多很棒的用法 github.com/mikaelbr/aw…
原文链接
Using javascript proxy
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!