Introduction détaillée à Proxy en JavaScript (exemple de code)

Cet article vous apporte une introduction détaillée (exemple de code) sur Proxy en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Le proxy nous permet de surveiller et d'interférer avec la plupart des comportements de n'importe quel objet et de mettre en œuvre des comportements de programme plus personnalisés.

Utilisation : nouveau proxy (cible, gestionnaire).

Proxy capture le comportement du programme sur l'objet correspondant en définissant une méthode d'écoute du comportement.

    const obj = {};
    const proxy = new Proxy(obj, {
        // ...
    })

Le constructeur de Proxy accepte deux paramètres. Le premier paramètre est l'objet cible qui doit être empaqueté. Le deuxième paramètre est l'écouteur utilisé pour surveiller le comportement de l'objet cible. certains paramètres pour surveiller le comportement du programme correspondant.
Propriétés d'écoute, paramètres et contenu de surveillance

属性值	监听器参数	监听内容
has	(target, prop)	监听 in 语句的使用
get	(target, prop, reciver)	监听目标对象的属性读取
set	(target, prop, value, reciver)	监听目标对象的属性赋值
deleteProperty	(target, prop)	监听 delete 语句对目标对象的删除属性行为
ownKeys	(target)	监听 Object.getOwnPropertyName() 的读取
apply	(target, thisArg, arguments)	监听目标函数(作为目标对象)的调用行为
construct	(target, arguments, newTarget)	监听目标构造函数(作为目标对象)利用 new 而生成实例的行为
getPrototypeOf	(target)	监听 Objext.getPrototypeOf() 的读取
setPrototypeOf	(target, prototype)	监听 Objext.setPrototypeOf() 的调用
isExtensible	(target)	监听 Objext.isExtensible() 的读取
preventExtensions	(target)	监听 Objext.preventExtensions() 的读取
getOwnPropertyDescriptor	(target, prop)	监听 Objext.getOwnPropertyDescriptor() 的调用
defineProperty	(target, property, descriptor)	监听 Object.defineProperty() 的调用

has

Vous pouvez définir la méthode d'écoute has pour le gestionnaire proxy afin de permettre au programme d'écoute de vérifier une chaîne ou un nombre via le in instruction Le processus permettant de savoir s'il s'agit de la clé de propriété d'une propriété dans l'objet cible de ce proxy.

const p = new Proxy({}, {
    has(target, prop){
        console.log(`Checking "${prop}" is in the target or not`);
        return true;
    }
})

console.log('foo' in p);
// Checking "foo" is in the target or not
// true

Il y a deux choses à noter à propos de cette méthode d'écoute. Si ces deux situations sont rencontrées, une TypeError sera générée.

1. Lorsque l'objet cible est désactivé par d'autres programmes via Object.preventExtensions() (l'objet ne peut pas ajouter de nouveaux attributs, il ne peut opérer que sur les attributs actuellement existants, y compris la lecture, l'exploitation et la suppression, mais une fois supprimée, elle ne peut pas être redéfinie) et que la clé de propriété en cours de vérification existe dans l'objet cible, la méthode d'écoute ne peut pas renvoyer false.

const obj = {foo: 1};

Object.preventExtensions(obj);

const p = new Proxy(obj, {
    has(target, prop){
        console.log(`Checking "${prop}" is in the target or not`);
        return false; 
    }
})

console.log('foo' in p);   
//抛出Uncaught TypeError:

2. Lorsque la clé de propriété en cours de vérification existe dans l'objet cible et que la configuration configurable de la propriété est fausse, la méthode d'écoute ne peut pas renvoyer faux.

const obj = {};

Object.defineProperty(obj, 'foo', {
    configurable: false,
    value: 10
})

const p = new Proxy(obj, {
    has(target, prop){
        console.log(`Checking "${prop}" is in the target or not`);
        return false;
    }
})

console.log('foo' in p);
//抛出Uncaught TypeError:

get

Getter ne peut surveiller que les clés de propriété connues, mais ne peut pas intercepter tous les comportements de lecture de propriété. Le proxy peut intercepter en définissant la méthode d'écoute get et interférer avec tous les comportements de lecture de propriété. l'objet cible.

const obj = {foo: 1};
const p = new Proxy(obj, {
    get(target, prop){
        console.log(`Program is trying to fetch the property "${prop}".`);
        return target[prop];
    }
})

alert(p.foo);  // Program is trying to fetch the property "foo".
alert(p.something);    // Program is trying to fetch the property "something".

  Cette méthode d'écoute a également quelque chose à prendre en compte - lorsque les propriétés configurables et inscriptibles des propriétés de lecture de l'objet cible sont toutes deux fausses, la valeur renvoyée par la méthode d'écoute doit être la même que l'originale. propriétés de l'objet cible. Les valeurs sont cohérentes.

const obj = {};

Object.defineProperty(obj, 'foo', {
    configurable: false,
    value: 10,
    writable: false
})

const p = new Proxy(obj, {
    get(target, prop){
        return 20;
    }
})

console.log(p.foo);

set

- handler.set est utilisé pour surveiller tous les comportements d'attribution d'attributs de l'objet cible. Notez que si une propriété de l'objet cible lui-même n'est pas accessible en écriture ou configurable, alors set ne doit pas modifier la valeur de cette propriété et ne peut renvoyer que la même valeur, sinon une erreur sera signalée.

const obj = {};
const p = new Proxy(obj, {
    set(target, prop, value){
        console.log(`Setting value "${value}" on the key "${prop}" in the target object`);
        target[prop] = value;
        return true;
    }
})

p.foo = 1;  
// Setting value "1" on the key "foo" in the target object

apply

handler.apply , Proxy fournit également la fonction en tant qu'objet cible avec des attributs pour surveiller son comportement d'appel.

const sum = function(...args) {
  return args
    .map(Number)
    .filter(Boolean)
    .reduce((a, b) => a + b);

}

const p = new Proxy(sum, {
  apply(target, thisArg, args) {
    console.log(`Function is being called with arguments [${args.join()}] and context ${thisArg}`);
    return target.call(thisArg, ...args);
  }
})

console.log(p(1, 2, 3));
// Function is being called with arguments [1,2,3] and context undefined
// 6

construct

- handler.construct, Proxy peut également utiliser la classe comme objet d'écoute cible et surveiller son comportement de production de nouvelles instances via la nouvelle instruction. en tant que constructeur sur le constructeur du constructeur.

class Foo{};

const p = new Proxy(Foo, {
    construct(target, args, newTarget){
        return {arguments: args}    // 这里返回的结果会是 new 所得到的实例
    }
});

const obj = new p(1, 2, 3);
console.log(obj.arguments);  // [1, 2, 3]

Créer un objet Proxy révocable

Utilisation : Proxy.revocable(target, handler) : (proxy, revoke).

const obj = {foo: 10};
const revocable = Proxy.revocable(obj, {
    get(target, prop){
        return 20;
    }
})
const proxy = revocable.proxy;
console.log(proxy.foo); // 20
revocable.revoke();
console.log(proxy.foo); 
// TypeError: Cannot perform 'get' on a proxy that has been revoked

Proxy.revocable(target, handler) renverra un objet avec deux attributs. L'un des proxy est l'objet Proxy révocable généré par la fonction, et l'autre revoke est l'objet Proxy révocable généré par la fonction. la fonction. La méthode d'annulation de l'objet Proxy à l'instant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!