JavaScript 之 Proxy
前言
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。
语法
var proxy = new Proxy(target, handler);
Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。其中:
new Proxy()
表示生成一个 Proxy 实例- target 参数表示所要拦截的目标对象
- handler 参数也是一个对象,用来定制拦截行为
let target = {};
let handler = {};
let proxy = new Proxy(target,handler);
proxy.name = '编程三昧';
console.log(target.name);
// '编程三昧'
还有一个技巧是将 Proxy 对象,设置到
object.proxy
属性,从而在 object 对象上调用:let proxy = new Proxy({}, {
get: function(target, property) {
return 35;
}
});
let obj = Object.create(proxy);
obj.time // 35
get() get() 方法用于拦截某个属性的读取操作,可以接受三个参数,依次为:
- 目标对象
- 属性名
- proxy 实例本身(严格地说,是操作行为所针对的对象),可选。
get()
方法的用法,上文已经有一个例子,下面是另一个拦截读取操作的例子:letperosn = {
name:'james',
age:26,
profession:'software'
}var proxy = new Proxy(perosn,{
get:function(target,property) {
if (property in target) {
return target[property];
} else {
throw new ReferenceError("propertype\""+property + "\" does no exit" );
}
}
});
console.log(proxy.name,proxy.profession);
// james software
console.log(proxy.sex);
// Uncaught ReferenceError: propertype"sex" does no exit
set()
set()
方法用来拦截某个属性的赋值操作,可以接受四个参数,依次为:- 目标对象
- 属性名
- 属性值
- Proxy 实例本身,可选。
let perosn = {
name:'james',
age:26,
profession:'software'
}let proxy = new Proxy(perosn,{
get:function(target,property) {
if (property in target) {
return target[property];
} else {
throw new ReferenceError("propertype\""+property + "\" does no exit" );
}
},
set:function(target,key,value) {
if(key === 'age') {
if(value>80) {
throw ReferenceError("invail");
} else {
return target[key] = value;
}
} else {
return target[key];
}
}
});
proxy.age = 60;
console.log(proxy.name,proxy.profession,proxy.age);
// james software 60proxy.age = 99;
// Uncaught ReferenceError: invail
apply()
apply()
方法拦截:- 函数的调用
- call 操作
- apply 操作
apply()
方法可以接受三个参数,分别是:- 目标对象
- 目标对象的上下文对象(this)
- 目标对象的参数数组。
let twice = {
apply(target, ctx, agrs) {
return Reflect.apply(...arguments) * 2;
}
};
function sum (a, b) {
return a + b;
}
let proxy5 = new Proxy(sum, twice);
console.log(proxy5(1, 3));
// 8
console.log(proxy5.apply(null, [1, 3]));
// 8
另外,直接调用Reflect.apply方法,也会被拦截。
Reflect.apply(proxy5, null, [9, 10]) // 38
has()
has()
方法用来拦截 HasProperty 操作,即判断对象是否具有某个属性时,这个方法会生效。典型的操作就是 in 运算符。has()
方法可以接受两个参数,分别是目标对象、需查询的属性名。下面的例子使用 has 方法隐藏某些属性,不被 in 运算符发现。
let stu1 = {name: '张三', score: 59};
let stu2 = {name: '李四', score: 99};
let handler = {
has(target, prop) {
if (prop === 'score' && target[prop] < 60) {
console.log(`${target.name} 不及格`);
return false;
}
return prop in target;
}
}let oproxy1 = new Proxy(stu1, handler);
let oproxy2 = new Proxy(stu2, handler);
'score' in oproxy1
// 张三 不及格
// false'score' in oproxy2
// truefor (let a in oproxy1) {
console.log(oproxy1[a]);
}
// 张三
// 59for (let b in oproxy2) {
console.log(oproxy2[b]);
}
// 李四
// 99
上面代码中,has 拦截只对 in 运算符生效,对
for...in
循环不生效,导致不符合要求的属性没有被 for...in 循环所排除。Proxy 支持的拦截操作一览 Proxy 支持的拦截操作基本有 13 种。
get(target, propKey, receiver)
拦截对象属性的读取,比如:
proxy.foo
proxy['foo']
。
拦截对象属性的设置,比如
proxy.foo = v
或 proxy['foo'] = v
,返回一个布尔值。has(target, propKey)
拦截
propKey in proxy
的操作,返回一个布尔值。deleteProperty(target, propKey)
拦截
delete proxy[propKey]
的操作,返回一个布尔值。ownKeys(target)
拦截:
Object.getOwnPropertyNames(proxy)
Object.getOwnPropertySymbols(proxy)
Object.keys(proxy)
for...in
循环
该方法返回目标对象所有自身的属性的属性名,而
Object.keys()
的返回结果仅包括目标对象自身的可遍历属性。getOwnPropertyDescriptor(target, propKey)
拦截
Object.getOwnPropertyDescriptor(proxy, propKey)
,返回属性的描述对象。defineProperty(target, propKey, propDesc)
拦截:
Object.defineProperty(proxy, propKey, propDesc)
Object.defineProperties(proxy, propDescs)
preventExtensions(target)
拦截
Object.preventExtensions(proxy)
,返回一个布尔值。getPrototypeOf(target)
拦截
Object.getPrototypeOf(proxy)
,返回一个对象。isExtensible(target)
拦截
Object.isExtensible(proxy)
,返回一个布尔值。setPrototypeOf(target, proto)
拦截
Object.setPrototypeOf(proxy, proto)
,返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
apply(target, object, args)
拦截 Proxy 实例作为函数调用的操作,比如:
proxy(...args)
proxy.call(object, ...args)
proxy.apply(...)
。
拦截 Proxy 实例作为构造函数调用的操作,比如:
new proxy(...args)
。~
~ 本文完,感谢阅读!
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!
推荐阅读
- PMSJ寻平面设计师之现代(Hyundai)
- 太平之莲
- 闲杂“细雨”
- 七年之痒之后
- 深入理解Go之generate
- 由浅入深理解AOP
- 期刊|期刊 | 国内核心期刊之(北大核心)
- 生活随笔|好天气下的意外之喜
- 感恩之旅第75天
- python学习之|python学习之 实现QQ自动发送消息