Apoderado
1. Introducción
es6Se ha diseñado recientemente un nuevo Proxytipo llamado "Agente". El significado original de esta palabra es "proxy ". Intercepción, el acceso del mundo exterior a este objeto primero debe pasar a través de esta capa de intercepción .Proxy
dar un ejemplo sencillo
Por ejemplo, el agente de licor Maotai, con este agente, no podemos obtener licor directamente de la empresa Maotai, debemos pasar por este agente.
Cuanto dinero dice el agente, es cuanto dinero, si el agente dice que no, no hay
ProxyEl proxy es un objeto.Después de que este objeto es proxy, no podemos acceder directamente a este objeto, pero debemos acceder a él a través de un proxy.
Por ejemplo, si desea obtener el valor de un determinado atributo, si el agente dice que no hay valor, no existirá y el agente le devolverá el valor que quiera devolverle.
ProxyEl proxy de acceso está especialmente configurado para el objeto, ya sea que esté leyendo o escribiendo, debe pasar por el proxy, y el proxyproceso de lectura y escritura del objeto se puede monitorear fácilmente a través del proxy.
2. uso
¿ Cómo usar Proxyel proceso de lectura y escritura del objeto de monitoreo? Defina un objeto, hay un atributo y un atributo personen el objeto , y luego cree un objeto proxy a través del método , que es el conjunto de intercepción para el objeto.nameheightnew Proxypersonproxyperson
ProxyEl constructor necesita 2 parámetros, uno es el objeto de destino que necesita ser proxy, y el otro es el objeto de procesamiento del proxy.En este objeto de procesamiento, el acceso get()de la propiedad del objeto se puede monitorear a través del método y set()el proceso de la configuración de la propiedad del objeto se puede monitorear a través del método.
const person={
name:'zzz',
height:185
}
const proxy=new Proxy(person,{
get(){
//监视对象属性的访问
},
set(){
//监视对象设置属性的过程
}
})
3. Método de instancia de proxy
1. método get()
getEl método se utiliza para interceptar la operación de lectura de una propiedad y puede aceptar tres parámetros, en orden deEl objeto de destino, el nombre del atributo y proxyla instancia en sí (el objeto al que apunta el comportamiento de la operación), el último parámetro es opcional。
const proxy=new Proxy(person,{
get(target,propKey){
// 目标对象 访问的属性名
console.log(target,propKey); // { } , name
},
set(){
}
})
console.log(proxy.name); // zzz
// 第二个例子
var person = {
name: "张三"
};
var proxy = new Proxy(person, {
get: function(target, propKey) {
if (propKey in target) {
return target[propKey];
} else {
throw new ReferenceError("Prop name \"" + propKey + "\" does not exist.");
}
}
});
proxy.name // "张三"
proxy.age // 抛出一个错误
get()La lógica normal del método debe ser juzgar si hay un nombre de atributo accedido en el objeto de destino del proxy, devolver el valor correspondiente si existe o devolver undefinedun valor predeterminado si no existe.
get(target,propKey){
return propKey in target? target[propKey]:'default'
},
//分别打印存在的属性和不存在的属性
console.log(proxy.name); //zzz
console.log(proxy.age); //default
2. método set()
set()El método se utiliza para interceptar la operación de asignación de una propiedad y puede aceptar cuatro parámetros, en orden deObjeto de destino, nombre de atributo, valor de atributo e instancia de Proxy en sí, donde el último parámetro es opcional。
set(target,propKey,value){
console.log(target,propKey,value);
}
proxy.sex='男'
La consola imprimirá las propiedades escritas y los valores de propiedad.
set()La lógica normal del método debe ser establecer el atributo especificado para el destino del proxy y hacer una verificación de datos antes de configurarlo. Por ejemplo, si el nombre del atributo es altura, entonces es necesario juzgar si es un número o lanzar un error
set(target,propKey,value){
if(propKey=== 'height'){
//判断属性名是否为height
if(!Number.isInteger(value)){
//判断是否为整数
throw new TypeError(`${
value} is not an int`)
}
}
target[propKey]=value
}
setEl cuarto parámetro del método receiverse refiere al objeto donde se encuentra el comportamiento de la operación original, generalmente proxyla instancia misma.
const handler = {
set: function(obj, prop, value, receiver) {
obj[prop] = receiver;
return true;
}
}
const proxy = new Proxy({
}, handler);
proxy.foo = 'bar';
proxy.foo === proxy;
3. método de aplicación ()
applyLlamada de función de interceptación de método cally applyoperación
Acepta tres parámetros, que son == objeto de destino, objeto de contexto del objeto de destino ( this) y matriz de parámetros del objeto de destino.
var handler = {
apply(target, ctx, args){
return Reflect.apply(...arguments);
}
};
En el siguiente código, la variable pes Proxyuna instancia de , cuando se llama como una función ( p()), será applyinterceptada por el método y devolverá una cadena.
var target = function(){
return 'I am the target'};
var handler = {
apply: function(){
return 'i am the proxy';
}
}
var p = new Proxy(target, handler);
console.log(p()); // "i am the proxy"
4. ¿Por qué existe el Proxy?
Porque antes de ES6, solíamos Object.defineProperty()configurar el oyente para monitorear la adquisición y reescritura de las propiedades del objeto. Pero si hay otras operaciones en él, no podemos monitorearlo, por lo que para resolver ese problema, Proxyse agrega un proxy en ES6. ProxyPuede ayudarnos a monitorear operaciones en objetos.
comparar los dos
Object.defineProperty
let info = {
name: 'dmc',
age: 20
}
Object.defineProperty(info, 'name', {
get() {
console.log('get--获取info的name值')
return 'dl'
},
set() {
console.log('set--设置info的name值')
}
})
console.log(info.name) // get--获取info的name值 dl
info.name = 'dmc' // set--设置info的name值
Proxy
let info = {
name: 'dmc',
age: 20
}
let infoProxy = new Proxy(info, {
get(target, key) {
console.log('获取对象属性')
return target[key]
},
set(target, key, newValue) {
console.log('设置对象属性')
target[key] = newValue
}
})