使用Object.defineProperty进行数据劫持_j*ascript进阶

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用Object.defineProperty进行数据劫持_j*ascript进阶

2025-11-12

浏览次数：次

返回列表

数据劫持是通过Object.defineProperty拦截对象属性的读取和修改操作，实现对数据变化的监听，在Vue 2中用于响应式系统；其核心是利用get和set捕获属性访问与赋值，结合递归遍历实现深度监听，但存在无法监控数组索引变化、动态增删属性等局限，需配合$set等方法弥补，最终被Vue 3的Proxy方案取代。

使用object.defineproperty进行数据劫持_javascript进阶

在J*aScript中，实现数据的响应式监听是很多框架（如Vue.js 2.x）的核心机制之一。其中，Object.defineProperty 是实现数据劫持的关键手段。通过它，我们可以拦截对象属性的读取和修改操作，从而在数据变化时自动触发视图更新或其他逻辑处理。

什么是数据劫起？

数据劫持指的是在不改变原始数据使用方式的前提下，通过技术手段“监听”对象属性的获取和设置行为。一旦某个属性被访问或修改，我们就可以执行额外的操作，比如更新UI、打印日志、校验数据等。

在 Vue 2 中，就是利用 Object.defineProperty 对 data 中的每个属性进行劫持，实现了响应式系统。

Object.defineProperty 基本用法

这个方法允许精确控制对象属性的行为。它的基本语法是：

Object.defineProperty(obj, prop, descriptor)

obj：要定义属性的对象
prop：要定义或修改的属性名
descriptor：属性描述符，包括 get、set、value、writable、enumerable、configurable 等

在做数据劫持时，最常用的是 get 和 set 拦截器。

示例：简单监听属性读写

网趣网上购物系统HTML静态版

网趣购物系统静态版支持网站一键静态生成，采用动态进度条模式生成静态，生成过程更加清晰明确，商品管理上增加淘宝数据包导入功能，与淘宝数据同步更新!采用领先的AJAX+XML相融技术，速度更快更高效！系统进行了大量的实用性更新，如优化核心算法、增加商品图片批量上传、谷歌地图浏览插入等，静态版独特的生成算法技术使静态生成过程可随意掌控，从而可以大大减轻服务器的负担，结合多种强大的SEO优化方式于一体，使

0 查看详情网趣网上购物系统HTML静态版

let data = {
  name: 'Alice'
};

let tempValue = data.name;

Object.defineProperty(data, 'name', {
  get() {
    console.log('属性被读取了');
    return tempValue;
  },
  set(newValue) {
    console.log('属性被修改为：' + newValue);
    tempValue = newValue;
    // 这里可以触发视图更新
  }
});

data.name;     // 输出：属性被读取了
data.name = 'Bob'; // 输出：属性被修改为：Bob

深度监听对象属性

上面的例子只监听了一个属性。实际应用中，我们需要递归遍历对象的所有属性，包括嵌套对象，才能实现完整的响应式。

以下是一个简化版的深度劫持实现：

function observe(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return;
  }

  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key]);
  });
}

function defineReactive(obj, key, value) {
  observe(value); // 如果值是对象，继续劫持

  Object.defineProperty(obj, key, {
    get() {
      console.log(`读取 ${key}：${value}`);
      return value;
    },
    set(newVal) {
      if (newVal === value) return;
      console.log(`${key} 从 ${value} 变更为 ${newVal}`);
      value = newVal;
      observe(newVal); // 新值如果是对象，也要劫持
    }
  });
}

// 使用示例
const data = {
  user: {
    name: 'Tom',
    age: 25
  }
};

observe(data);

data.user.name;        // 读取 name：Tom
data.user.name = 'Jerry'; // name 从 Tom 变更为 Jerry