Directorio de artículos
1. ¿Qué es el proxy?
Se puede entender que el proxy 目标对象之前establece una capa de " 拦截", y el acceso externo al objeto debe pasar primero a través de esta capa de interceptación, por lo que proporciona un mecanismo para filtrar y reescribir el acceso externo.
2. gramática
var proxy = new Proxy(target, handler);
Explicación: Todos los usos del objeto Proxy se realizan en el formato anterior, la única diferencia es la forma en que se escribe el parámetro del controlador. Entre ellos, new Proxy() significa generar uno Proxy实例, target参数indicar qué se va a interceptar 目标对象, handler参数y también es un objeto para personalización 拦截行为.
3. Método de proxy
1. método obtener ()
El método get se utiliza para interceptar un determinado atributo 读取操作y puede aceptar tres parámetros, en orden, 目标对象y 属性名él mismo proxy 实例(estrictamente hablando, es el objeto al que se dirige el comportamiento de la operación), y el último parámetro es opcional.
gramática:
var handler = {
get (target, propKey, ctx) {
return target[propKey];
}
};
ejemplo:
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.");
}
}
});
console.log(proxy.name) // "张三"
console.log(proxy.age) // 抛出一个错误
resultado de la operación:
Explicación: El código anterior indica que si se accede a una propiedad que no existe en el objeto de destino, se generará un error. Sin esta función de interceptación, acceder a propiedades inexistentes solo devolverá un valor indefinido.
2. método establecer ()
El método set se utiliza para interceptar un determinado atributo y 赋值操作puede aceptar cuatro parámetros, en orden 目标对象, y él mismo, siendo el último parámetro opcional.属性名属性值Proxy 实例
gramática:
var handler = {
set (target, propKey, propValue, ctx) {
target[propKey] = propValue;
}
};
ejemplo:
let validator = {
set: function(obj, prop, value) {
if (prop === 'age') {
if (!Number.isInteger(value)) {
throw new TypeError('The age is not an integer');
}
if (value > 200) {
throw new RangeError('The age seems invalid');
}
}
// 对于满足条件的 age 属性以及其他属性，直接保存
obj[prop] = value;
return true;
}
};
let person = new Proxy({
}, validator);
person.age = 100;
console.log(person.age) // 100
person.age = 'young' // 报错
person.age = 300 // 报错
resultado de la operación:
Explicación: en el código anterior, debido a la función de valor establecido, cualquier asignación de atributo de edad que no cumpla con los requisitos arrojará un error. Este es un método de implementación de verificación de datos. Con el método set, también puede vincular datos, es decir, cada vez que el objeto cambia, el DOM se actualizará automáticamente.
3. método aplicar ()
El método de aplicación intercepta 函数的调用y callopera apply. El método de aplicación puede aceptar tres parámetros, a saber 目标对象, el objeto de destino 上下文对象(este) y el objeto de destino 参数数组.
gramática:
var handler = {
apply (target, ctx, args) {
return Reflect.apply(...arguments);
}
};
ejemplo:
var target = function () {
return 'I am the target'; };
var handler = {
apply: function () {
return 'I am the proxy';
}
};
var p = new Proxy(target, handler);
p()
resultado de la operación:
Explicación: En el código anterior, la variable p es una instancia de Proxy. Cuando se llama como función (p()), será apply方法interceptada y se devolverá una cadena.
4. método tiene ()
El método has() se utiliza para interceptar HasProperty操作, es decir, al determinar si un objeto tiene un determinado atributo, este método tendrá efecto. La operación típica es in运算符. El método has() puede aceptar dos parámetros, a saber 目标对象, el que se va a consultar 属性名.
gramática:
var handler = {
has (target, propKey) {
return propKey in target;
}
};
ejemplo:
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);
flag = 'prop' in proxy
alert(flag)
resultado de la operación:
Explicación: En el código anterior, si el primer carácter del nombre del atributo del objeto original es un guión bajo, proxy.has() devolverá falso y el operador in no lo descubrirá.
5, método de construcción ()
El método construct() se utiliza para interceptar new命令. A continuación se explica cómo escribir el objeto interceptado. El método construct() puede aceptar tres parámetros: el objeto de destino, la matriz de parámetros del constructor y el objeto de destino 上下文对象(este)
gramática:
var handler = {
construct (target, args, ctx) {
return new target(...args);
}
};
ejemplo:
const p = new Proxy(function () {
}, {
construct: function(target, args) {
console.log('called: ' + args.join(', '));
return {
value: args[0] * 10 };
}
});
console.log((new p(1)).value)
resultado de la operación:
Explicación: El método construct() debe devolver un objeto; de lo contrario, se informará un error.
6, método eliminarProperty()
El método deleteProperty se utiliza para interceptar delete操作. Si este método arroja un error o devuelve falso, el comando de eliminación no puede eliminar la propiedad actual. El método deleteProperty() acepta dos parámetros: 目标对象,目标属性
gramática:
var handler = {
deleteProperty (target, propKey) {
delete target[propKey];
}
};
ejemplo:
var handler = {
deleteProperty (target, key) {
invariant(key, 'delete');
delete target[key];
return true;
}
};
function invariant (key, action) {
if (key[0] === '_') {
throw new Error(`Invalid attempt to ${
action} private "${
key}" property`);
}
}
var target = {
_prop: 'foo' };
var proxy = new Proxy(target, handler);
delete proxy._prop
// Error: Invalid attempt to delete private "_prop" property
resultado de la operación:
Explicación: En el código anterior, el método deleteProperty intercepta el operador de eliminación. Si elimina una propiedad cuyo primer carácter es un guión bajo, se informará un error.