Detaillierte Erklärung des JavaScript-Proxy-Objekts

Inhaltsverzeichnis

1. Was ist ein Proxy?
2. Wie wird es verwendet?

1. Einfaches Beispiel für die Verwendung von Proxy
2. Das Zielobjekt wird korrekt geändert
3. Verwenden Sie Set-Handler zur Datenvalidierung
4. Erweiterter Konstruktor

Zusammenfassen

1. Was ist ein Proxy?

Das Proxy-Objekt wird verwendet, um bestimmte Vorgänge des Zielobjekts abzufangen und zu ändern.

// Syntax const p = neuer Proxy(Ziel, Handler)

Ziel: Das Zielobjekt (kann jeder beliebige Objekttyp sein, einschließlich eines nativen Arrays, einer Funktion oder sogar eines anderen Proxys).
Handler: Ein Objekt mit Funktionen als Attributen zum Implementieren von Interception- und benutzerdefinierten Vorgängen.

2. Wie wird es verwendet?

1. Einfaches Beispiel für die Verwendung von Proxy

Beim Zugriff auf eine nicht vorhandene Eigenschaft wird der Standardwert „return“ (zurückgeben) anstelle von „undefiniert“ festgelegt.

// 1. Suchen Sie einen geeigneten Handler und schreiben Sie den Code const handler = {
    bekomme: Funktion(Objekt, Eigenschaft) {
        Gibt Eigenschaft in Objekt zurück? Objekt[Eigenschaft]: 37;
    }
};
// 2. Erstellen Sie ein neues Proxy-Objekt const p = new Proxy({}, handler);
// 3. Operation ausführen pa = 1;
pb = undefiniert;
// 4. Überprüfen Sie die Ergebnisse console.log(pa, pb); // 1, undefiniert
console.log('c' in p, pc); // falsch, 37

2. Das Zielobjekt wird korrekt geändert

lass Ziel = {};
lass p = neuer Proxy(Ziel, {});
pa = 37; // Die Operation wird an das Ziel weitergeleitet console.log(target.a); // 37. Die Operation wurde korrekt weitergeleitet

3. Verwenden Sie Set-Handler zur Datenvalidierung

let validator = {
  setze: Funktion(Objekt, Eigenschaft, Wert) {
    wenn (Eigenschaft === 'Alter') {
      wenn (!Number.isInteger(value)) {
        throw new TypeError('Das Alter ist keine Ganzzahl');
      }
      wenn (Wert > 200) {
        throw new RangeError('Das Alter scheint ungültig zu sein');
      }
    }
    // Das Standardverhalten zum Speichern des Wertes
    obj[Eigenschaft] = Wert;
    // Zeigt Erfolg an return true;
  }
};
let person = neuer Proxy({}, Validator);
Person.Alter = 100;
Konsole.log(Person.Alter);
// 100
Person.Alter = "jung";
// Löst eine Ausnahme aus: Nicht abgefangener TypeError: Das Alter ist keine Ganzzahl
Person.Alter = 300;
// Löst eine Ausnahme aus: Uncaught RangeError: Das Alter scheint ungültig

4. Erweiterter Konstruktor

Funktion erweitern(sup, base) {
  var descriptor = Object.getOwnPropertyDescriptor(
    base.prototype, "Konstruktor"
  );
  base.prototype = Objekt.erstellen(sup.prototype);
  var handler = {
    Konstrukt: Funktion(Ziel, Argumente) {
      var obj = Objekt.create(base.prototype);
      dies.anwenden(Ziel, Objekt, Argumente);
      gibt Objekt zurück;
    },
    anwenden: Funktion(Ziel, das, Argumente) {
      sup.apply(das, args);
      base.apply(das, Argumente);
    }
  };
  var Proxy = neuer Proxy (Basis, Handler);
  Deskriptor.Wert = Proxy;
  Object.defineProperty(base.prototype, "Konstruktor", Deskriptor);
  Proxy zurückgeben;
}
var Person = Funktion (Name) {
  dieser.name = Name
};
var Junge = erweitern(Person, Funktion (Name, Alter) {
  dieses.Alter = Alter;
});
Junge.Prototyp.Geschlecht = "M";
var Peter = neuer Junge("Peter", 13);
console.log(Peter.sex); // "M"
console.log(Peter.name); // "Peter"
console.log(Peter.age); // 13