監聽數組Array變化或Obj屬性變化

工作中經常會遇到監聽數組發生變化時執行相應的回調觸發邏輯，客戶應用場景中需要實現對象變數的動態監聽，當變數發生變化時觸發回調函數，實現事件發送等應用場景。      
通常由以下兩種方式實現需求

一.通過改變對象原型prototype方法實現回調監聽

//創建一個數組原型對象
var arrayProtoType = Object.create(Array.prototype);
var ArrayProto = [];
//重構原型里的方法，同時將重構後的方法賦值給自定義好的數組
Object.getOwnPropertyNames(Array.prototype).forEach(function (key) {
  // console.log(key)
  if (typeof arrayProtoType[key] === "function") {
    ArrayProto[key] = function () {
      listenProtoMethods(key);
      return arrayProtoType[key].apply(this, arguments);
    };
  } else {
    listenProps(key);
    ArrayProto[key] = arrayProtoType[key];
  }
});
function listenProtoMethods(method) {
  console.log("".concat(method, "\u89E6\u53D1\u4E86"));
  //當監聽到數組函數變化時執行回調邏輯callback
    dataChanged();
}

function listenProps(prop) {
  console.log("".concat(prop, "\u89E6\u53D1\u4E86"));
  //當監聽到數組屬性變化時執行回調邏輯callback
	 dataChanged();
}
//監聽到屬性發生變化時執行以下方法
function dataChanged(){
	console.log('arry data has changed...')
}
var arryWatched = [];
//將被監聽的數組原型鏈指向新構造的原型對象
arryWatched.__proto__ = ArrayProto;
//執行以下函數時將觸發回調函數
arryWatched.push();
arryWatched.join();

二.利用Proxy對象將監聽對象與配置的監聽函數進行關聯綁定，實現監聽屬性變化

        此種方法存在相容性問題，低版本瀏覽器不支持Proxy函數

const array = []; 
//定義監聽配置條件
const changeHandler = {
  get(target, property) {
    return target[property];
  },
  set(target, property, value) {
    target[property] = value;
    console.log('數組發生變化:', target);
    return true;
  },
  deleteProperty(target, property) {
    delete target[property];
    console.log('數組發生變化:', target);
    return true;
  }
};
//new一個代理對象將監聽配置掛接到數組對象實現監聽數組變化
const proxyArray = new Proxy(array, changeHandler);
proxyArray.push("data1")
proxyArray.push("data2")