如何追踪第三方库父类只读props.disabled属性的设置来源？

由于父类的props是只读属性无法直接替换为Proxy，可尝试以下几种可行方案：

方案1：重定义props.disabled的setter #

如果props对象本身并非冻结状态，且disabled属性是可配置的，可以在子类构造函数中重新定义该属性的getter/setter，插入调试逻辑：

class MyComponent extends ThirdPartyComponent {
  constructor(...args) {
    super(...args);
    
    let currentDisabled = this.props.disabled;
    // 重新定义disabled属性
    Object.defineProperty(this.props, 'disabled', {
      get() {
        return currentDisabled;
      },
      set(newVal) {
        // 触发调试断点，或打印调用栈
        debugger;
        console.trace(`disabled被设置为: ${newVal}`);
        currentDisabled = newVal;
      },
      configurable: true,
      enumerable: true
    });
  }
}

注意：如果第三方库将props对象冻结（Object.isFrozen(this.props)返回true），或disabled属性被设为configurable: false，此方案会失效。

方案2：代理父类构造函数拦截props初始化 #

如果父类在构造过程中创建props对象，可通过代理父类构造函数，在实例化完成后立即修改props.disabled的属性描述符：

// 保存原始父类构造函数
const OriginalThirdParty = ThirdPartyComponent;
// 创建代理后的构造函数
const ProxiedThirdParty = new Proxy(OriginalThirdParty, {
  construct(target, args) {
    const instance = new target(...args);
    // 在这里修改props.disabled的setter
    let currentDisabled = instance.props.disabled;
    Object.defineProperty(instance.props, 'disabled', {
      get() {
        return currentDisabled;
      },
      set(newVal) {
        debugger;
        console.trace('disabled设置来源调用栈：');
        currentDisabled = newVal;
      },
      configurable: true
    });
    return instance;
  }
});

// 子类继承代理后的父类
class MyComponent extends ProxiedThirdParty {
  // 子类自定义逻辑
}

方案3：重写props的getter返回Proxy #

如果父类的props是通过getter定义的（而非只读数据属性），可以在子类中重写props getter，返回一个包装了原始props的Proxy：

class MyComponent extends ThirdPartyComponent {
  get props() {
    const originalProps = super.props;
    return new Proxy(originalProps, {
      set(target, prop, value) {
        if (prop === 'disabled') {
          debugger;
          console.trace('disabled属性被修改');
        }
        // 执行原始的设置逻辑
        return Reflect.set(target, prop, value);
      }
    });
  }
}

此方案仅适用于父类props是getter的场景，若父类props是不可写的数据属性，重写getter会覆盖原有的只读属性逻辑。

方案4：使用浏览器调试工具直接拦截 #

如果上述代码方案都无法生效，可以借助浏览器调试工具的原生能力：

• 在Chrome DevTools的Sources面板中，搜索第三方库代码中可能涉及props.disabled赋值的位置，添加条件断点；
• 若不确定具体位置，可在控制台执行debug(Object.defineProperty)，当任何属性被定义或修改时触发断点，然后筛选prop === 'disabled'的情况；
• 对于UI组件，可在Elements面板找到对应元素，右键选择Break on -> Attribute modifications，追踪与disabled相关的DOM属性变化（需注意DOM属性与props的映射关系）。

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