javascript数组实例扩展方法（JavaScript如何监测数组的变化）

// 伪代码
let arr = [];
arr.__proto__ = newPrototype;
newPrototype.__proto__ = Array.prototype;
// 然后可以在新原型上添加同名的方法就可以了
newPrototype.push = xxx;

// Object.create返回一个新对象，而来新对象的__proto__就是传进去的参数。
let newPrototype = Object.create(Array.prototype);
// 然后可以在新原型上添加同名的方法就可以了
newPrototype.push = xxx;

// 需要监测的数组，绑定新的原型就可以了
let arr = [];
arr.__proto__ = newPrototype;

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

// 在新原型上添加同名push
newPrototype.push = function(...args) {
  // 语义化this
  let curArr = this;
  console.log("使用了push");
  // 最后还是会执行原始的push
  return Array.prototype.push.call(curArr, ...args);
};

// 需要监测的数组，绑定新的原型就可以了
let arr = [];
arr.__proto__ = newPrototype;

// 执行push的时候，就会打印了
arr.push(1);

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}`);
    return Array.prototype[method].call(this, ...args);
  };
});

// 需要监测的数组，绑定新的原型就可以了
let arr = [];
arr.__proto__ = newPrototype;

// 执行的时候，就会打印了
arr.push(1);
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}`);
    return Array.prototype[method].call(this, ...args);
  };
});

function observeArr(arr) {
  // 既是条件限制，也是递归的终止条件
  if (!Array.isArray(arr)) {
    return;
  }
  // 整个数组指向新的原型
  arr.__proto__ = newPrototype;
  // 数组的每项，如果是数组，也指向新的原型。
  arr.forEach(observeArr);
}
// 需要监测的数组，绑定新的原型就可以了
let arr = [[1, 2, 3]];
observeArr(arr);

// 执行的时候，就会打印了
arr[0].push(1);
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}`);
    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) {
  // 即是条件限制，也是递归的终止条件
  if (!Array.isArray(arr)) {
    return;
  }
  // 整个数组指向新的原型
  arr.__proto__ = newPrototype;
  // 数组的每项，如果是数组，也指向新的原型。
  arr.forEach(observeArr);
}
// 这里可以导出去，方便别的文件使用
export default observeArr;
// 需要监测的数组，绑定新的原型就可以了
let arr = [];
observeArr(arr);
let addItem = [1, 2, 3];
arr.push(addItem);
// 执行的时候，就会打印了
addItem.push(1);
addItem.pop();

/**
 * observeArr的部分
 **/
// 生成新的原型
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}`);
    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) {
  // 新加！！！是对象的话，需要用对象
  if (Object.prototype.toString.call(arr) === "[object Object]") {
    observeObj(arr);
    return;
  }

  if (Array.isArray(arr)) {
    // 整个数组指向新的原型
    arr.__proto__ = newPrototype;
    // 数组的每项，如果是数组，也指向新的原型。
    arr.forEach(observeArr);
  }

  // 不是对象或者数组的，什么都不做
}

/**
 * observeObj的部分
 **/
function observeObj(obj) {
  // 加上参数限制，必须是对象才有劫持，也是递归的终止条件
  if (typeof obj !== "object" || obj == null) {
    return;
  }
  // 新加！！！数组交给数组处理
  if (Array.isArray(obj)) {
    observeArr(obj);
    return;
  }
  // 是对象的话 才开始递归
  for (let key in obj) {
    // 直接使用 obj.hasOwnProperty会提示不规范
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      observeKey(obj, key);
      // 这里劫持该属性的属性值，如果不是对象直接返回，不影响
      observeObj(obj[key]);
    }
  }
  return obj;
}
function observeKey(obj, key) {
  let value = obj[key];
  Object.defineProperty(obj, key, {
    get() {
      console.log("读取属性", value);
      return value;
    },
    set(newValue) {
      console.log("设置属性", newValue);
      value = newValue;
    }
  });
}

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

let arr = [{ a: "数组里的对象" }, 3, 4];
observeArr(arr);
arr[0].a = 3;