applay()方法拦截函数的调用,call和apply操作。
apply()方法可以接受三个参数,分别是目标对象,目标的上下文对象(this)和目标对象的参数数组。
var handler = {
apply (target, ctx, args) {
return Reflect.apply(...arguments);
}
};
下面是一个例子。
var target = function () { return 'I am the target'; };
var handler = {
apply: function () {
return 'I am the proxy';
}
};
var p = new Proxy(target, handler);
p()
// "I am the proxy"
上面代码中,变量p
是 Proxy 的实例,当它作为函数调用时(p()
),就会被apply
方法拦截,返回一个字符串。
下面是另一个例子。
var twice = {
apply (target, ctx, args) {
return Reflect.apply(...arguments) * 2;
}
};
function sum (left, right) {
return left + right;
};
var proxy = new Proxy(sum, twice);
proxy(1, 2) // 6
proxy.call(null, 5, 6) // 22
proxy.apply(null, [7, 8]) // 30
上面代码中,每当执行proxy
函数(直接调用或call
和apply
调用),就会被apply
方法拦截。另外,直接调用Reflect.apply
方法,也会被拦截。
Reflect.apply(proxy, null, [9, 10]) // 38
has()
has()方法用来拦截HasProperty操作,即判断对象具有某个属性时对象会生效。典型的操作就是in运算符。
下面的方法使用has隐藏某些属性,不会被in运算符发现。
var handler = {
has (target, key) {
if (key[0] === '_') {
return false;
}
return key in target;
}
};
var target = { _prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
'_prop' in proxy // false
上面代码中,如果原对象的属性名的第一个字符是下划线,proxy.has
就会返回false
,从而不会被in
运算符发现。
如果原对象不可配置或者禁止扩展,这时has拦截会报错。
var obj = { a: 10 };
Object.preventExtensions(obj);
var p = new Proxy(obj, {
has: function(target, prop) {
return false;
}
});
'a' in p // TypeError is thrown
上面代码中,obj对象禁止扩展,结果使用has拦截就会报错,也就是说,如果某个属性不可配置(或者目标对象不可扩展),则has方法就不得“隐藏”(即返回false)目标对象的该属性。
值得注意的是,has
方法拦截的是HasProperty
操作,而不是HasOwnProperty
操作,即has
方法不判断一个属性是对象自身的属性,还是继承的属性。
另外,虽然for……in循环也用到了in运算符,但是has拦截对for……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
// true
for (let a in oproxy1) {
console.log(oproxy1[a]);
}
// 张三
// 59
for (let b in oproxy2) {
console.log(oproxy2[b]);
}
// 李四
// 99
上面代码中,has
拦截只对in
运算符生效,对for...in
循环不生效,导致不符合要求的属性没有被排除在for...in
循环之外。construct()
construct()方法用于拦截new命令,下面是拦截对象的写法。
var handler = {
construct (target, args, newTarget) {
return new target(...args);
}
};
conctruct方法可以接受两个参数。
target:目标对象
args:构建函数的参数对象
var p = new Proxy(function () {}, {
construct: function(target, args) {
console.log('called: ' + args.join(', '));
return { value: args[0] * 10 };
}
});
(new p(1)).value
// "called: 1"
// 10
construct
方法返回的必须是一个对象,否则会报错。var p = new Proxy(function() {}, {
construct: function(target, argumentsList) {
return 1;
}
});
new p() // 报错