JavaScript 实现数组变化监测的原理与代码实现

// 创建继承自 Array.prototype 的新原型
let newPrototype = Object.create(Array.prototype);

// 定义需要劫持的方法列表
const methodsToPatch = [
  'push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'
];

// 遍历并重新定义这些方法
methodsToPatch.forEach(method => {
  // 缓存原生方法
  const originalMethod = Array.prototype[method];
  
  newPrototype[method] = function(...args) {
    console.log(`检测到调用: ${method}`);
    // 执行原生逻辑，保持 this 指向当前数组
    return originalMethod.call(this, ...args);
  };
});

// 将自定义原型赋予数组
const arr = [];
arr.__proto__ = newPrototype;

// 测试
arr.push(1); // 控制台打印: 检测到调用: push

function observeArr(arr) {
  if (!Array.isArray(arr)) return;
  
  // 1. 绑定原型
  arr.__proto__ = newPrototype;
  
  // 2. 遍历每一项，如果是数组则递归处理
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      observeArr(arr[i]);
    }
  }
}

methodsToPatch.forEach(method => {
  const originalMethod = Array.prototype[method];
  
  newPrototype[method] = function(...args) {
    let insertedItems;
    
    switch (method) {
      case 'push':
      case 'unshift':
        insertedItems = args;
        break;
      case 'splice':
        // splice(start, deleteCount, ...items)
        insertedItems = args.slice(2);
        break;
      default:
        insertedItems = [];
    }
    
    // 对新插入的数组项进行观测
    if (insertedItems.length > 0) {
      insertedItems.forEach(item => {
        if (Array.isArray(item)) {
          observeArr(item);
        }
      });
    }
    
    return originalMethod.call(this, ...args);
  };
});

/**
 * 完整的 observe 模块逻辑
 */
let newPrototype = Object.create(Array.prototype);
const methodsToPatch = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];

// 1. 劫持数组方法
methodsToPatch.forEach(method => {
  const originalMethod = Array.prototype[method];
  newPrototype[method] = function(...args) {
    // 获取新增项
    let inserted;
    if (['push', 'unshift'].includes(method)) inserted = args;
    else if (method === 'splice') inserted = args.slice(2);
    
    // 对新增项进行处理
    if (inserted) {
      inserted.forEach(item => {
        if (typeof item === 'object' && item !== null) {
          if (Array.isArray(item)) observeArr(item);
          else observeObj(item);
        }
      });
    }
    return originalMethod.call(this, ...args);
  };
});

// 2. 递归观测数组
function observeArr(arr) {
  if (!Array.isArray(arr)) return;
  arr.__proto__ = newPrototype;
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i];
    if (item instanceof Object) {
      if (Array.isArray(item)) observeArr(item);
      else observeObj(item);
    }
  }
}

// 3. 观测对象 (简化版 DefineProperty)
function observeObj(obj) {
  if (typeof obj !== 'object' || obj == null) return;
  if (Array.isArray(obj)) { observeArr(obj); return; }
  
  const keys = Object.keys(obj);
  keys.forEach(key => {
    let value = obj[key];
    // 如果值是对象/数组，递归观测
    if (typeof value === 'object' && value != null) {
      if (Array.isArray(value)) observeArr(value);
      else observeObj(value);
    }
    
    Object.defineProperty(obj, key, {
      get() {
        console.log(`读取属性: ${key}, 值: ${value}`);
        return value;
      },
      set(newVal) {
        console.log(`设置属性: ${key}, 新值: ${newVal}`);
        if (typeof newVal === 'object' && newVal != null) {
          if (Array.isArray(newVal)) observeArr(newVal);
          else observeObj(newVal);
        }
        value = newVal;
      }
    });
  });
}

// 测试示例
const data = { a: 1, b: [{ c: 2 }] };
observeObj(data);
data.a = 99;       // 触发对象 setter
data.b[0].push(3); // 触发数组方法劫持