当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript响应式编程：观察者模式实现数据监听

JavaScript响应式编程：观察者模式实现数据监听

2026-02-05 11:37:32 0浏览收藏

今天golang学习网给大家带来了《JavaScript如何实现响应式编程？观察者模式监听数据变化》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

JavaScript响应式编程核心是观察者模式，通过Proxy拦截get/set实现依赖收集与触发，或用Object.defineProperty兼容旧环境；其本质是Subject（响应式对象）与Observer（副作用函数）的自动关联。

javascript如何实现响应式编程_观察者模式如何监听数据变化

JavaScript 中实现响应式编程，核心是让数据变化能自动触发相关逻辑（比如更新视图），而观察者模式正是支撑这一能力的经典设计模式之一。它不直接“监听”原始 JS 对象属性变化（ES5 无法拦截赋值），而是通过封装数据访问与修改过程，使依赖能被收集、变化时被通知。

用 Proxy 实现现代响应式（推荐）

ES6 的 Proxy 可以拦截对象的读取（get）和写入（set）操作，天然适合构建响应式系统：

在 get 中收集当前正在执行的副作用函数（如渲染函数）作为依赖；
在 set 中触发所有已收集的依赖重新执行；
支持嵌套对象、数组索引、新增/删除属性等场景（配合 Reflect）。

示例简版：

const effectStack = [];
function effect(fn) {
  const e = () => { fn(); };
  e();
  return e;
}

function reactive(obj) {
  const handler = {
    get(target, key, receiver) {
      track(target, key); // 收集依赖
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return result;
    }
  };
  return new Proxy(obj, handler);
}

// 简化依赖管理（实际需 WeakMap + Map 结构）
const depsMap = new WeakMap();
function track(target, key) {
  let deps = depsMap.get(target);
  if (!deps) {
    deps = new Map();
    depsMap.set(target, deps);
  }
  let dep = deps.get(key);
  if (!dep) {
    dep = new Set();
    deps.set(key, dep);
  }
  dep.add(activeEffect); // activeEffect 是当前正在执行的 effect 函数
}

function trigger(target, key) {
  const deps = depsMap.get(target)?.get(key);
  if (deps) deps.forEach(fn => fn());
}