如何使用Object.defineProperty动态劫持数组原型方法以实现数组变动监听-js教程-PHP中文网

object.defineproperty无法可靠实现数组响应式，因其不能拦截push等原生方法的内部操作、无法自动处理动态新增索引、存在全局污染风险；vue 2采用包装变异方法+递归observe方案，vue 3则用proxy全面替代。

如何使用object.defineproperty动态劫持数组原型方法以实现数组变动监听

直接劫持数组原型方法无法可靠实现响应式监听，因为数组的多数变更操作（如 push、pop、splice 等）不触发 setter，而 Object.defineProperty 本身也不能监听数组索引赋值以外的变动（例如 arr[0] = x 可拦截，但 arr.push(x) 不会访问属性，自然不会触发 set）。

为什么不能只靠 defineProperty 劫持 Array.prototype

JavaScript 数组的内置方法（如 push、unshift、splice）在执行时，内部直接修改数组的 length 和索引属性，并不经过用户定义的 getter/setter。即使你重写了 Array.prototype.push，它调用的底层逻辑仍是原生行为，不会自动触发响应式更新通知——除非你在重写中手动调用依赖收集或更新函数。

Object.defineProperty 只能拦截对**已有属性**的读写（且对数组索引这种数字属性支持有限）
数组长度动态增长时新增的索引（如从 arr[0] 到 arr[1]）默认不可枚举、不可配置，defineProperty 需显式为每个新索引定义响应式属性，成本高且不现实
直接修改 Array.prototype 会影响全局，存在污染风险，也不符合现代框架（如 Vue 2 的实际做法）

Vue 2 的实际做法：包装数组方法 + 递归 defineProperty

Vue 2 并非单纯“劫持原型”，而是：先缓存原生数组方法，再用自定义函数包裹它们，在调用前后手动触发依赖更新；同时对数组元素做递归响应式处理（如果元素是对象）。

Product Manager Skills

一款AI工具，主要用于产品经理技能，适用于 Claude Code、Codex、Cursor 和 Windsurf。涵盖 SaaS 指标诊断、PRD 评审、路线图规划、需求探索，以及面向产品经理的职业转型辅导等，适合需要提升相关任务效率的用户。

下载

重写 push、pop、shift、unshift、splice、sort、reverse 这 7 个会改变原数组的方法
在包装函数内：先调用原生方法，再调用 ob.dep.notify()（通知依赖更新），并对新增元素调用 observeArray()
对数组自身使用 Object.defineProperty 拦截 length 属性（仅限 Vue 内部 observer 实例），但不依赖它做核心监听

简易可运行示例（仅演示思路，不用于生产）

以下代码模拟 Vue 2 的关键逻辑，仅包装 push 和 splice，并为数组元素添加响应式：

// 1. 创建响应式数组代理
function observeArray(arr) {
  if (!Array.isArray(arr)) return;
  
  // 2. 包装变异方法（仅示例两个）
  const methodsToPatch = ['push', 'splice'];
  const arrayProto = Array.prototype;
  const newArrayProto = Object.create(arrayProto);

  methodsToPatch.forEach(method => {
    newArrayProto[method] = function(...args) {
      const result = arrayProto[method].apply(this, args);
      console.log(`数组被 ${method} 修改`, this);
      // 这里应触发视图更新（如 dep.notify()）
      // 同时对新增项进行 observe（如果需要深度响应式）
      if (method === 'push' || method === 'splice') {
        const inserted = method === 'push' ? args : args.slice(2);
        inserted.forEach(item => observe(item));
      }
      return result;
    };
  });

  // 3. 替换实例的 __proto__（仅作演示，生产环境慎用）
  arr.__proto__ = newArrayProto;

  // 4. 对现有元素递归 observe
  arr.forEach(item => observe(item));
}

// 5. 基础响应式 observe（简化版）
function observe(obj) {
  if (obj == null || typeof obj !== 'object') return;
  if (Array.isArray(obj)) {
    observeArray(obj);
  } else {
    Object.keys(obj).forEach(key => {
      defineReactive(obj, key, obj[key]);
    });
  }
}

function defineReactive(obj, key, val) {
  observe(val); // 深度观察
  Object.defineProperty(obj, key, {
    get() { return val; },
    set(newVal) {
      if (val === newVal) return;
      console.log(`属性 ${key} 被设为`, newVal);
      val = newVal;
      observe(newVal); // 新值也要响应式
    }
  });
}

// 使用
const arr = [1, 2];
observe(arr);
arr.push(3); // 控制台输出：数组被 push 修改