如何在JavaScript中监听变量变化自动更新另一变量

Great question! Let's walk through practical ways to make bar automatically update whenever foo changes, based on your example where bar = foo + 1.

方法1：使用Getter函数（最简单的场景） #

如果你的需求很直接，不需要bar能被手动赋值，用一个getter函数就能完美解决。每次访问bar时，它都会实时基于当前的foo值计算结果：

let foo = 1;

// 定义bar为getter属性
Object.defineProperty(window, 'bar', {
  get() {
    return foo + 1;
  },
  enumerable: true // 让bar能被遍历到（可选）
});

// 测试一下
console.log(bar); // 输出 2
foo = 5;
console.log(bar); // 输出 6

或者在现代JS里，你可以用更简洁的类字段语法（如果在模块或类中）：

let foo = 1;
const get bar() {
  return foo + 1;
}

注意：用这种方式定义的bar是只读的，你不能直接给bar赋值（比如bar = 10会报错），因为它的值完全依赖于foo。

方法2：用Object.defineProperty监听foo的变化 #

如果你需要更灵活的控制（比如允许bar在某些情况下被手动修改，或者要在foo变化时执行额外逻辑），可以监听foo的赋值操作：

// 用内部变量存储实际值，避免循环引用
let _foo = 1;
let _bar = _foo + 1;

// 监听foo的get和set
Object.defineProperty(window, 'foo', {
  get() {
    return _foo;
  },
  set(newValue) {
    _foo = newValue;
    // 当foo被修改时，自动更新bar
    _bar = _foo + 1;
    // 这里还可以加其他逻辑，比如触发回调函数
    console.log('foo changed! bar updated to', _bar);
  },
  enumerable: true
});

// 定义bar的getter
Object.defineProperty(window, 'bar', {
  get() {
    return _bar;
  },
  // 可选：允许手动修改bar
  set(newValue) {
    _bar = newValue;
  },
  enumerable: true
});

// 测试
console.log(bar); // 2
foo = 8; // 控制台会输出 "foo changed! bar updated to 9"
console.log(bar); // 9
// 手动修改bar（如果开启了set）
bar = 20;
console.log(bar); // 20

方法3：ES6 Proxy（适合复杂对象场景） #

如果foo是某个对象的属性，或者你需要监听多个变量的变化，ES6的Proxy是更强大的方案。它能拦截对象的所有属性操作：

// 创建一个包含foo的对象，用Proxy包裹
const state = new Proxy({ foo: 1 }, {
  set(target, prop, value) {
    target[prop] = value;
    // 当foo被修改时，自动更新bar
    if (prop === 'foo') {
      target.bar = target.foo + 1;
    }
    // 必须返回true表示赋值成功
    return true;
  }
});

// 初始化bar
state.bar = state.foo + 1;

// 测试
console.log(state.bar); // 2
state.foo = 15;
console.log(state.bar); // 16

Proxy的优势在于它能处理更复杂的对象结构，比如嵌套属性、动态添加的属性，适合做小型状态管理。

框架中的方案（可选） #

如果你在使用前端框架，比如React或Vue，它们已经内置了响应式系统：

• 在React中，你可以用useState存储foo，然后用useMemo计算bar：

  const [foo, setFoo] = useState(1);
  const bar = useMemo(() => foo + 1, [foo]);
  

• 在Vue中，只需要声明响应式数据，bar会自动依赖foo更新：

  const { foo, bar } = reactive({
    foo: 1,
    get bar() { return this.foo + 1; }
  });
  

内容的提问来源于stack exchange，提问作者Quilty Kim