参考Mdn Proxy的文章
A Proxy has two parameters
- target the original object which you want to proxy
- handler an object that defines which operations will be intercepted and how to redefine intercepted operations.
Proxy.handler 功能
handler.apply(target,thisArg,argumentsList)
The handler.apply() method is a trap for a function call. handler.apply()方法会触发方法的调用；
@params {any} target the target object
@params {any} thisArg the this argument for the call
@params {Array} argumentsList the arguments for the call
@return {any} the return of the call
// 旧有方法
function test(name){
console.log('name==',name);
return name;
}
// 新增需求要求的验证方法
let validateName = function(name){
if(name === 'sfg'){
return true;
}
return false;
}
// 使用一个proxy 来控制调用 test之前先调用validateName方法
let testProxy = new Proxy(test,{
apply: function(target,thisArg,arguments){
if(validateName(arguments[0])){
return target.apply(thisArg,arguments);
}
return false;
}
})
console.log(testProxy('sfg'));
console.log(testProxy('sfg11'));
handler.construct(target, argumentsList, newTarget)
The handler.construct() method is a trap for the new operator. In order for the new operation to be valid on the resulting Proxy object, the target used to initialize the proxy must itself have a [[Construct]] internal method (i.e. new target must be valid).
handler.construct() 方法是被new 操作触发。为了使new 操作的有效结果是Proxy的对象，通常初始化的对象自身必须拥有Cunstruct这个内部方法（例如new Target必须是可以的)
Parameters
- target the target object
- argumentsList the list of arguments for the constructor
- newTarget The constructor that was originally called
Return value
The construct method must return an object.
// 例如实现除重
function Student(name, grade){
this.name = name;
this.grade = grade;
}
let students = new Map();
let StudentProxy = new Proxy(Student,{
construct: function(target,argumentsList, newTarget){
let key = `${argumentsList[0]}--${argumentsList[1]}`;
if(students.has(key)){
return students.get(key);
}
let student = new target(argumentsList[0],argumentsList[1]);
students.set(key,student);
return student;
}
})
handler.defineProperty
handler.deleteProperty
handler.get
The handler.get() method is a trap for getting a property value.
Parameters
- target the target object
- property The name or Symbol of the property to set.
- receiver The object to which the assignment was originally directed. This is usually the proxy itself. But a set() handler can also be called indirectly, via the prototype chain or various other ways.
Return value
The get() method can return any value.
handler.set
The handler.set() method is a trap for setting a property value.
Parameters
- target the target object
- property The name or Symbol of the property to set.
- value The new value of the property to set.
- receiver The object to which the assignment was originally directed. This is usually the proxy itself. But a set() handler can also be called indirectly, via the prototype chain or various other ways.
Return value
The set() method should return a boolean value.
- Return true to indicate that assignment succeeded.
- If the set() method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown. 如果set()方法返回false 且在strict模式下，会抛出一个TypeError异常
let MyGet = {
list: [1,2,3],
info: {
name: 'sfg',
info: {
age: 32
}
},
name: 'sfg111',
}
let MyGetProxy = new Proxy(MyGet,{
get: function(target,proxy,receiver){
console.log('get',target,proxy,receiver);
return target[proxy]
},
set: function(target,property,value,receiver){
console.log(target,property,value);
target[property] = value;
return true;
}
})
