Proxy agent literal meaning, can be understood as a constructor,
var proxy = new Proxy(target, handler);
The generation Proxy instance, is actually a variant of object, you can do what you want to do some logic inside the handler, modify the original language defined function transformed into effect you want. target parameter indicates the target object to be intercepted, handler parameter is an object, used to customize the behavior of interception.
var obj = new Proxy({}, {
get: function (target, key, receiver) {
console.log('get..')
return Reflect.get(target, key, receiver);
},
set: function (target, key, value, receiver) {
console.log('set..')
return Reflect.set(target, key,'李四', receiver);
}
});
obj.name = '张三 '
console.log(obj.name)
General definition of a target object if a property is set object.name = '张三'to get to object.nameis Joe Smith, John Doe but above may be modified to handle the interception inside, this is the role of Proxy, can be programmed to modify the original programming language
If the handler does not set any interception, it is equivalent to the direct access to the original object.
var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = '张三';
target.a // "张三"
Proxy instance can be used as a prototype to another object. Thus created out of objects that have the effect of intercepting Proxy instance
var proxy = new Proxy({}, {
get: function(target, property) {
return 35;
}
});
let obj = Object.create(proxy);
obj.time // 35
An interceptor function, may be provided to intercept a plurality of operation
（1）get(target, propKey, receiver)
拦截对象属性的读取，比如proxy.foo和proxy['foo']。
最后一个参数receiver是一个对象，可选，参见下面Reflect.get的部分。
（2）set(target, propKey, value, receiver)
拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
（3）has(target, propKey)
拦截propKey in proxy的操作，以及对象的hasOwnProperty方法，返回一个布尔值。
（4）deleteProperty(target, propKey)
拦截delete proxy[propKey]的操作，返回一个布尔值。
（5）ownKeys(target)
拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)，返回一个数组。该方法返回对象所有自身的属性，而Object.keys()仅返回对象可遍历的属性。
（6）getOwnPropertyDescriptor(target, propKey)
拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
（7）defineProperty(target, propKey, propDesc)
拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
（8）preventExtensions(target)
拦截Object.preventExtensions(proxy)，返回一个布尔值。
（9）getPrototypeOf(target)
拦截Object.getPrototypeOf(proxy)，返回一个对象。
（10）isExtensible(target)
拦截Object.isExtensible(proxy)，返回一个布尔值。
（11）setPrototypeOf(target, proto)
拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。
如果目标对象是函数，那么还有两种额外操作可以拦截。
（12）apply(target, object, args)
拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
（13）construct(target, args)
拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。
Reflect
Reflect an object with Proxy objects, but also objects ES6 provided to operate the new API. Reflect an object designed to have several.
(1) clearly belong to some of the internal language methods (such Object.defineProperty) Object object, the object placed on Reflect
(2) Modify Object returns some result of the method, let it becomes more reasonable. For example, Object.defineProperty (obj, name, desc) when the property can not be defined, it will throw an error, but Reflect.defineProperty (obj, name, desc) will return false.
// 老写法
try {
Object.defineProperty(target, property, attributes);
// success
} catch (e) {
// failure
}
// ES6写法
if (Reflect.defineProperty(target, property, attributes)) {
// success
} else {
// failure
}
(3) Let Object operations becomes a function of behavior. Some Object operations are imperative, such as name in obj and delete obj [name], and Reflect.has (obj, name) and Reflect.deleteProperty (obj, name) so that they become a function of behavior.
// 老写法
'assign' in Object // true
// ES6写法
Reflect.has(Object, 'assign') // true
Method (. 4) Reflect objects and objects correspond Proxy method, as long as the Proxy object methods, a method can be found in the corresponding Reflect object. This allows Proxy object can call the corresponding Reflect method to easily complete the default behavior, as a basis for modifying behavior. In other words, no matter how Proxy modify the default behavior, you can always get the default behavior on Reflect.
Proxy(target, {
set: function(target, name, value, receiver) {
var success = Reflect.set(target,name, value, receiver);
if (success) {
log('property ' + name + ' on ' + target + ' set to ' + value);
}
return success;
}
});
The above code, Proxy property assignment method to intercept the behavior of target objects. It uses Reflect.set attribute value assigned to the method of the object, and then the deployment of additional features.
The method follows the object list Reflect, a total of 13 (with the same method on the action mostly Object object are the same).
Reflect.apply(target,thisArg,args)
Reflect.construct(target,args)
Reflect.get(target,name,receiver)
Reflect.set(target,name,value,receiver)
Reflect.defineProperty(target,name,desc)
Reflect.deleteProperty(target,name)
Reflect.has(target,name)
Reflect.ownKeys(target)
Reflect.isExtensible(target)
Reflect.preventExtensions(target)
Reflect.getOwnPropertyDescriptor(target, name)
Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)