So überwachen Sie Array-Änderungen in JavaScript

// Pseudocode let arr = [];
arr.__proto__ = neuer Prototyp;
neuerPrototype.__proto__ = Array.prototype;
// Dann können Sie dem neuen Prototyp eine Methode mit demselben Namen hinzufügen newPrototype.push = xxx;

// Object.create gibt ein neues Objekt zurück und das __proto__ des neuen Objekts ist der übergebene Parameter.
Fügt neue Prototypen zu Object.create(Array.prototype);
// Dann können Sie dem neuen Prototyp eine Methode mit demselben Namen hinzufügen newPrototype.push = xxx;

// Zu überwachendes Array, binden Sie einfach den neuen Prototyp let arr = [];
arr.__proto__ = neuer Prototyp;

Fügt neue Prototypen zu Object.create(Array.prototype);

// Füge dem neuen Prototyp einen Push mit dem gleichen Namen hinzu
neuerPrototype.push = Funktion(...args) {
  // Semantisches dies
  lass curArr = dies;
  console.log("Push wird verwendet");
  // Abschließend wird der ursprüngliche Push ausgeführt
  gibt Array.prototype.push.call(curArr, ...args) zurück;
};

// Zu überwachendes Array, binden Sie einfach den neuen Prototyp let arr = [];
arr.__proto__ = neuer Prototyp;

// Wenn Push ausgeführt wird, wird arr.push(1) gedruckt;

Fügt neue Prototypen zu Object.create(Array.prototype);

let-Methoden = ["push", "pop", "shift", "unshift", "reverse", "sort", "spleißen"];

Methoden.fürJedes(Methode => {
  neuerPrototyp[Methode] = Funktion(...Argumente) {
    console.log(`${method} verwendet`);
    gibt Array.prototype[Methode].call(diese, ...args) zurück;
  };
});

// Zu überwachendes Array, binden Sie einfach den neuen Prototyp let arr = [];
arr.__proto__ = neuer Prototyp;

// Bei der Ausführung wird arr.push(1) gedruckt;
arr.pop();

Fügt neue Prototypen zu Object.create(Array.prototype);

let-Methoden = ["push", "pop", "shift", "unshift", "reverse", "sort", "spleißen"];

Methoden.fürJedes(Methode => {
  neuerPrototyp[Methode] = Funktion(...Argumente) {
    console.log(`${method} verwendet`);
    gibt Array.prototype[Methode].call(diese, ...args) zurück;
  };
});

Funktion beobachteArr(arr) {
  // Es ist sowohl eine bedingte Einschränkung als auch eine rekursive Abbruchbedingung, wenn (!Array.isArray(arr)) {
    zurückkehren;
  }
  // Das gesamte Array zeigt auf den neuen Prototyp arr.__proto__ = newPrototype;
  // Jedes Element im Array, sofern es ein Array ist, verweist auch auf den neuen Prototyp.
  arr.forEach(beobachtenArr);
}
// Zu überwachendes Array, binden Sie einfach den neuen Prototyp let arr = [[1, 2, 3]];
beobachteArr(arr);

// Bei der Ausführung wird arr[0].push(1) gedruckt;
arr[1].pop();

Fügt neue Prototypen zu Object.create(Array.prototype);

let-Methoden = ["push", "pop", "shift", "unshift", "reverse", "sort", "spleißen"];

Methoden.fürJedes(Methode => {
  neuerPrototyp[Methode] = Funktion(...Argumente) {
    console.log(`${method} verwendet`);
    eingefügt lassen;
    Schalter (Methode) {
      Fall "push":
      Fall "unshift":
        eingefügt = Argumente;
        brechen;
      Fall "Spleißen":
        eingefügt = args.slice(2);
        brechen;
      Standard:
        brechen;
    }
    eingefügt und observeArr (eingefügt);
    gibt Array.prototype[Methode].call(diese, ...args) zurück;
  };
});

Funktion beobachteArr(arr) {
  // Es ist sowohl eine bedingte Einschränkung als auch eine rekursive Abbruchbedingung, wenn (!Array.isArray(arr)) {
    zurückkehren;
  }
  // Das gesamte Array zeigt auf den neuen Prototyp arr.__proto__ = newPrototype;
  // Jedes Element im Array, sofern es ein Array ist, verweist auch auf den neuen Prototyp.
  arr.forEach(beobachtenArr);
}
// Dies kann exportiert werden, um die Verwendung anderer Dateien zu erleichtern. Exportieren Sie standardmäßig „objectArr“.
// Zu überwachendes Array, binden Sie einfach den neuen Prototyp let arr = [];
beobachteArr(arr);
Lassen Sie addItem = [1, 2, 3];
arr.push(Element hinzufügen);
// Bei der Ausführung wird addItem.push(1) gedruckt;
addItem.pop();

/**
 * observeArr-Teil**/
// Einen neuen Prototyp generieren let newPrototype = Object.create(Array.prototype);

let-Methoden = ["push", "pop", "shift", "unshift", "reverse", "sort", "spleißen"];
// Füge die obige Methode zum neuen Prototyp hinzu, um methods.forEach(method => { zu kapern.
  neuerPrototyp[Methode] = Funktion(...Argumente) {
    console.log(`${method} verwendet`);
    eingefügt lassen;
    Schalter (Methode) {
      Fall "push":
      Fall "unshift":
        eingefügt = Argumente;
        brechen;
      Fall "Spleißen":
        eingefügt = args.slice(2);
        brechen;
      Standard:
        brechen;
    }
    eingefügt und observeArr (eingefügt);
    gibt Array.prototype[Methode].call(diese, ...args) zurück;
  };
});

Funktion beobachteArr(arr) {
  // Neu! ! ! Wenn es ein Objekt ist, müssen Sie das Objekt verwenden, wenn (Object.prototype.toString.call(arr) === "[object Object]") {
    beobachteObj(arr);
    zurückkehren;
  }

  wenn (Array.isArray(arr)) {
    // Das gesamte Array zeigt auf den neuen Prototyp arr.__proto__ = newPrototype;
    // Jedes Element im Array, sofern es ein Array ist, verweist auch auf den neuen Prototyp.
    arr.forEach(beobachtenArr);
  }

  // Kein Objekt oder Array, nichts tun}

/**
 * observeObj-Teil**/
Funktion Obj beobachten(Objekt) {
  // Parameterbeschränkungen hinzufügen, es können nur Objekte gekapert werden, was auch die Abbruchbedingung der Rekursion ist, wenn (typeof obj !== "object" || obj == null) {
    zurückkehren;
  }
  // Neu! ! ! Array wird zur Verarbeitung an Array übergeben, wenn (Array.isArray(obj)) {
    beobachteArr(Objekt);
    zurückkehren;
  }
  // Rekursion nur starten, wenn es sich um ein Objekt handelt for (let key in obj) {
    // Die direkte Verwendung von obj.hasOwnProperty führt zu einem nicht standardmäßigen if (Object.prototype.hasOwnProperty.call(obj, key)) {
      observeKey(Objekt, Schlüssel);
      // Hier wird der Attributwert des Attributs gekapert. Wenn es kein Objekt ist, wird es direkt zurückgegeben, ohne Auswirkungen auf observeObj(obj[key]);
    }
  }
  gibt Objekt zurück;
}
Funktion observeKey(Objekt, Schlüssel) {
  let value = obj[Schlüssel];
  Objekt.defineProperty(Objekt, Schlüssel, {
    erhalten() {
      console.log("Eigenschaften lesen", Wert);
      Rückgabewert;
    },
    setze(neuerWert) {
      console.log("Eigenschaften festlegen", neuerWert);
      Wert = neuerWert;
    }
  });
}

/**
 * Probieren Sie die Demo aus**/
lass Daten = { a: 1, b: [1, 2, { c: 2 }] };
Obj beobachten(Daten);
Daten.a = 2;
daten.b.push([2, 3]);

let arr = [{ a: "Objekt im Array" }, 3, 4];
beobachteArr(arr);
arr[0].a = 3;