How to monitor array changes in JavaScript

// Pseudocode let arr = [];
arr.__proto__ = newPrototype;
newPrototype.__proto__ = Array.prototype;
// Then you can add a method with the same name to the new prototype newPrototype.push = xxx;

// Object.create returns a new object, and the __proto__ of the new object is the parameter passed in.
let newPrototype = Object.create(Array.prototype);
// Then you can add a method with the same name to the new prototype newPrototype.push = xxx;

// Array to be monitored, just bind the new prototype let arr = [];
arr.__proto__ = newPrototype;

let newPrototype = Object.create(Array.prototype);

// Add a push with the same name to the new prototype
newPrototype.push = function(...args) {
  // Semantic this
  let curArr = this;
  console.log("push is used");
  //Finally, the original push will be executed
  return Array.prototype.push.call(curArr, ...args);
};

// Array to be monitored, just bind the new prototype let arr = [];
arr.__proto__ = newPrototype;

// When push is executed, arr.push(1) will be printed;

let newPrototype = Object.create(Array.prototype);

let methods = ["push", "pop", "shift", "unshift", "reverse", "sort", "splice"];

methods.forEach(method => {
  newPrototype[method] = function(...args) {
    console.log(`${method} used`);
    return Array.prototype[method].call(this, ...args);
  };
});

// Array to be monitored, just bind the new prototype let arr = [];
arr.__proto__ = newPrototype;

// When executed, arr.push(1) will be printed;
arr.pop();

let newPrototype = Object.create(Array.prototype);

let methods = ["push", "pop", "shift", "unshift", "reverse", "sort", "splice"];

methods.forEach(method => {
  newPrototype[method] = function(...args) {
    console.log(`${method} used`);
    return Array.prototype[method].call(this, ...args);
  };
});

function observeArr(arr) {
  // It is both a conditional restriction and a recursive termination condition if (!Array.isArray(arr)) {
    return;
  }
  // The entire array points to the new prototype arr.__proto__ = newPrototype;
  // Each item in the array, if it is an array, also points to the new prototype.
  arr.forEach(observeArr);
}
// Array to be monitored, just bind the new prototype let arr = [[1, 2, 3]];
observeArr(arr);

// When executed, arr[0].push(1) will be printed;
arr[1].pop();

let newPrototype = Object.create(Array.prototype);

let methods = ["push", "pop", "shift", "unshift", "reverse", "sort", "splice"];

methods.forEach(method => {
  newPrototype[method] = function(...args) {
    console.log(`${method} used`);
    let inserted;
    switch (method) {
      case "push":
      case "unshift":
        inserted = args;
        break;
      case "splice":
        inserted = args.slice(2);
        break;
      default:
        break;
    }
    inserted && observeArr(inserted);
    return Array.prototype[method].call(this, ...args);
  };
});

function observeArr(arr) {
  // It is both a conditional restriction and a recursive termination condition if (!Array.isArray(arr)) {
    return;
  }
  // The entire array points to the new prototype arr.__proto__ = newPrototype;
  // Each item in the array, if it is an array, also points to the new prototype.
  arr.forEach(observeArr);
}
// This can be exported to facilitate other files to use export default observeArr;
// Array to be monitored, just bind the new prototype let arr = [];
observeArr(arr);
let addItem = [1, 2, 3];
arr.push(addItem);
// When executed, addItem.push(1) will be printed;
addItem.pop();

/**
 * observeArr part**/
// Generate a new prototype let newPrototype = Object.create(Array.prototype);

let methods = ["push", "pop", "shift", "unshift", "reverse", "sort", "splice"];
// Add the above method to the new prototype to hijack methods.forEach(method => {
  newPrototype[method] = function(...args) {
    console.log(`${method} used`);
    let inserted;
    switch (method) {
      case "push":
      case "unshift":
        inserted = args;
        break;
      case "splice":
        inserted = args.slice(2);
        break;
      default:
        break;
    }
    inserted && observeArr(inserted);
    return Array.prototype[method].call(this, ...args);
  };
});

function observeArr(arr) {
  // New! ! ! If it is an object, you need to use the object if (Object.prototype.toString.call(arr) === "[object Object]") {
    observeObj(arr);
    return;
  }

  if (Array.isArray(arr)) {
    // The entire array points to the new prototype arr.__proto__ = newPrototype;
    // Each item in the array, if it is an array, also points to the new prototype.
    arr.forEach(observeArr);
  }

  // Not an object or array, do nothing}

/**
 * observeObj part**/
function observeObj(obj) {
  // Add parameter restrictions, only objects can be hijacked, which is also the termination condition of recursion if (typeof obj !== "object" || obj == null) {
    return;
  }
  // New! ! ! Array is handed over to array for processing if (Array.isArray(obj)) {
    observeArr(obj);
    return;
  }
  // Only start recursion if it is an object for (let key in obj) {
    // Directly using obj.hasOwnProperty will prompt non-standard if (Object.prototype.hasOwnProperty.call(obj, key)) {
      observeKey(obj, key);
      // Here, the attribute value of the attribute is hijacked. If it is not an object, it is returned directly without affecting observeObj(obj[key]);
    }
  }
  return obj;
}
function observeKey(obj, key) {
  let value = obj[key];
  Object.defineProperty(obj, key, {
    get() {
      console.log("Read properties", value);
      return value;
    },
    set(newValue) {
      console.log("Set properties", newValue);
      value = newValue;
    }
  });
}

/**
 * Try the demo**/
let data = { a: 1, b: [1, 2, { c: 2 }] };
observeObj(data);
data.a = 2;
data.b.push([2, 3]);

let arr = [{ a: "object in array" }, 3, 4];
observeArr(arr);
arr[0].a = 3;