使用JavaScript matchMedia无法修改Intersection Observer关联的option变量值

• 配置读取时机错位：IntersectionObserver 构造函数在实例化时，会一次性从传入的参数对象上把配置值拷贝到自身内部，后续完全不会跟踪原对象的属性变更。如果代码执行顺序是先实例化IO、后执行matchMedia的赋值逻辑，哪怕后续修改了option.threshold，已经生成的IO实例依然保留实例化时拿到的旧threshold值（即初始的0.8），不会自动同步新配置。
• 匹配逻辑仅单次执行：代码中的matchMedia判断没有做动态事件监听，仅在脚本首次加载、页面初始渲染时执行了一次宽度匹配。如果脚本执行时视口宽度刚好未达到1250px的阈值，后续哪怕窗口拉伸到符合条件的宽度，也不会重新触发threshold的赋值逻辑。
• 作用域引用错位：贴出的代码被块级花括号包裹，如果在块外其他作用域存在同名的option变量声明，块内修改的threshold本质是块内临时变量的属性，和最终传给IO实例的option不是同一个对象引用，自然不会产生预期效果。

• 调整代码执行顺序：先完成所有响应式判断、把option的所有属性值确定下来，再执行IO的实例化操作，示例代码如下：

// 先定义基础配置
let option = { threshold: 0.8 };
let mediaQuery1 = window.matchMedia('(min-width:1250px)');

// 先执行初始匹配赋值，确定threshold值
if (mediaQuery1.matches) {
  option.threshold = 1;
}

// 配置完全确定后，再初始化IO实例
const observer = new IntersectionObserver(你的观察回调逻辑, option);

• 增加响应式动态监听：如果需要适配窗口尺寸动态变化的场景，需要给matchMedia对象添加change事件监听，在视口尺寸跨过阈值时同步更新IO的配置，同时做旧版本浏览器的兼容处理：

// 定义配置更新逻辑
const syncObserverConfig = (e) => {
  option.threshold = e.matches ? 1 : 0.8;
  // 显式给IO实例同步新的threshold值
  observer.threshold = option.threshold;
}
// 监听视口尺寸变化
mediaQuery1.addEventListener('change', syncObserverConfig);
// 兼容Chrome 79及更早的旧版本
mediaQuery1.addListener(syncObserverConfig);

• 排查引用一致性：确认传给IO构造函数的option和matchMedia逻辑中修改的option是同一个对象，避免在不同作用域重复声明同名option变量造成引用错位。

内容的提问来源于stack exchange，提问作者Haytham Kenway