JavaScript で配列の変更を監視する方法

// 疑似コード let arr = [];
arr.__proto__ = 新しいプロトタイプ;
newPrototype.__proto__ = Array.prototype;
// 次に、新しいプロトタイプに同じ名前のメソッドを追加できます。newPrototype.push = xxx;

// Object.create は新しいオブジェクトを返します。新しいオブジェクトの __proto__ は渡されるパラメーターです。
newPrototype = Object.create(Array.prototype); を作成します。
// 次に、新しいプロトタイプに同じ名前のメソッドを追加できます。newPrototype.push = xxx;

// 監視する配列。新しいプロトタイプをバインドするだけです。let arr = [];
arr.__proto__ = 新しいプロトタイプ;

newPrototype = Object.create(Array.prototype); を作成します。

// 新しいプロトタイプに同じ名前のプッシュを追加します
newPrototype.push = function(...args) {
  // セマンティック this
  curArr = this とします。
  console.log("push が使用されています");
  //最後に、元のプッシュが実行されます
  Array.prototype.push.call(curArr, ...args) を返します。
};

// 監視する配列。新しいプロトタイプをバインドするだけです。let arr = [];
arr.__proto__ = 新しいプロトタイプ;

// pushが実行されると、arr.push(1)が出力されます。

newPrototype = Object.create(Array.prototype); を作成します。

メソッドを ["push"、"pop"、"shift"、"unshift"、"reverse"、"sort"、"splice"] とします。

メソッド.forEach(メソッド => {
  newPrototype[メソッド] = function(...args) {
    console.log(`${method} が使用されました`);
    Array.prototype[method].call(this, ...args) を返します。
  };
});

// 監視する配列。新しいプロトタイプをバインドするだけです。let arr = [];
arr.__proto__ = 新しいプロトタイプ;

// 実行するとarr.push(1)が出力されます。
arr.pop();

newPrototype = Object.create(Array.prototype); を作成します。

メソッドを ["push"、"pop"、"shift"、"unshift"、"reverse"、"sort"、"splice"] とします。

メソッド.forEach(メソッド => {
  newPrototype[メソッド] = function(...args) {
    console.log(`${method} が使用されました`);
    Array.prototype[method].call(this, ...args) を返します。
  };
});

関数 observeArr(arr) {
  // これは条件付き制限と再帰終了条件の両方です if (!Array.isArray(arr)) {
    戻る;
  }
  // 配列全体が新しいプロトタイプを指します arr.__proto__ = newPrototype;
  // 配列内の各項目は、配列の場合は、新しいプロトタイプも指します。
  arr.forEach(Arr を観察します);
}
// 監視する配列。新しいプロトタイプをバインドするだけです。let arr = [[1, 2, 3]];
観測Arr(arr);

// 実行するとarr[0].push(1)が出力されます。
arr[1].pop();

newPrototype = Object.create(Array.prototype); を作成します。

メソッドを ["push"、"pop"、"shift"、"unshift"、"reverse"、"sort"、"splice"] とします。

メソッド.forEach(メソッド => {
  newPrototype[メソッド] = function(...args) {
    console.log(`${method} が使用されました`);
    挿入します。
    スイッチ（メソッド）{
      ケース「プッシュ」:
      ケース「unshift」:
        挿入された = 引数;
        壊す;
      ケース「スプライス」:
        挿入 = args.slice(2);
        壊す;
      デフォルト：
        壊す;
    }
    挿入 && observeArr(挿入);
    Array.prototype[method].call(this, ...args); を返します。
  };
});

関数 observeArr(arr) {
  // これは条件付き制限と再帰終了条件の両方です if (!Array.isArray(arr)) {
    戻る;
  }
  // 配列全体が新しいプロトタイプを指します arr.__proto__ = newPrototype;
  // 配列内の各項目は、配列の場合は新しいプロトタイプも指します。
  arr.forEach(Arr を観察します);
}
// これをエクスポートすると、他のファイルでも使用しやすくなります export default observeArr;
// 監視する配列。新しいプロトタイプをバインドするだけです。let arr = [];
観測Arr(arr);
addItem = [1, 2, 3]とします。
arr.push(アイテムを追加);
// 実行するとaddItem.push(1)が出力されます。
アイテムを追加します。

/**
 * observeArr 部分**/
// 新しいプロトタイプを生成します。let newPrototype = Object.create(Array.prototype);

メソッドを ["push"、"pop"、"shift"、"unshift"、"reverse"、"sort"、"splice"] とします。
// 上記のメソッドを新しいプロトタイプに追加して、methods.forEach(method => {
  newPrototype[メソッド] = function(...args) {
    console.log(`${method} が使用されました`);
    挿入します。
    スイッチ（メソッド）{
      ケース「プッシュ」:
      ケース「unshift」:
        挿入された = 引数;
        壊す;
      ケース「スプライス」:
        挿入 = args.slice(2);
        壊す;
      デフォルト：
        壊す;
    }
    挿入 && observeArr(挿入);
    Array.prototype[method].call(this, ...args); を返します。
  };
});

関数 observeArr(arr) {
  // 新しい！ ！ ！オブジェクトの場合は、オブジェクトを使用する必要があります if (Object.prototype.toString.call(arr) === "[object Object]") {
    観測オブジェクト(arr)
    戻る;
  }

  Array.isArray(arr) の場合 {
    // 配列全体が新しいプロトタイプを指します arr.__proto__ = newPrototype;
    // 配列内の各項目は、配列の場合は新しいプロトタイプも指します。
    arr.forEach(Arr を観察します);
  }

  // オブジェクトでも配列でもない場合は何もしません}

/**
 * observeObj 部分**/
関数 observeObj(obj) {
  // パラメータ制限を追加します。オブジェクトのみがハイジャック可能で、これは再帰の終了条件でもあります。if (typeof obj !== "object" || obj == null) {
    戻る;
  }
  // 新しい！ ！ ！配列は処理のために配列に渡されます if (Array.isArray(obj)) {
    観測Arr(obj);
    戻る;
  }
  // オブジェクトの場合のみ再帰を開始する for (let key in obj) {
    // obj.hasOwnProperty を直接使用すると非標準のプロンプトが表示されます if (Object.prototype.hasOwnProperty.call(obj, key)) {
      obj を observeKey します。
      // ここで、属性の属性値がハイジャックされます。オブジェクトでない場合は、observeObj(obj[key]) に影響を与えずに直接返されます。
    }
  }
  obj を返します。
}
関数 observeKey(obj, key) {
  値をobj[キー]とします。
  Object.defineProperty(obj, キー, {
    得る（） {
      console.log("プロパティを読み取り", 値);
      戻り値;
    },
    set(新しい値) {
      console.log("プロパティを設定する", newValue);
      値 = 新しい値;
    }
  });
}

/**
 * デモを試す**/
データ = {a: 1、b: [1、2、{c: 2 }] }とします。
observeObj(データ);
データ.a = 2;
データ.b.push([2, 3]);

arr = [{ a: "配列内のオブジェクト" }, 3, 4]とします。
観測Arr(arr);
arr[0].a = 3;