编写XMLHttpRequest包装器时，为何`XMLHttpRequest.prototype.onload`抛出非法调用错误？

这个问题我之前封装XHR工具的时候也踩过一模一样的坑，核心原因其实是**XMLHttpRequest.prototype.onload是浏览器内置的访问器属性（Accessor Property），而非普通的数据属性**。

具体原理拆解： #

当你直接写XMLHttpRequest.prototype.onload时，本质是在调用这个属性的getter函数。而浏览器给这个内置getter加了限制：它要求this必须指向一个有效的XMLHttpRequest实例，绝对不能是XMLHttpRequest.prototype本身。

当你直接在原型对象上调用这个getter时，this的指向变成了XMLHttpRequest.prototype（这只是构造函数的原型对象，并非真正的XHR实例），浏览器的安全检测机制立刻识别出这种非法调用，于是抛出Uncaught TypeError: Illegal invocation错误。

验证合法用法： #

只有让this指向真实的XHR实例时，访问onload才是正常的，比如：

const xhr = new XMLHttpRequest();
console.log(xhr.onload); // 正常输出，不会触发错误

针对包装器场景的解决方案： #

如果你想封装XHR的onload逻辑，别直接去碰prototype.onload，而是通过自定义访问器属性覆盖原生逻辑，确保get/set里的this始终指向实例：

// 自定义XHR的onload包装逻辑
Object.defineProperty(XMLHttpRequest.prototype, 'onload', {
  get() {
    // this此时指向XHR实例
    return this._wrappedOnload || null;
  },
  set(callback) {
    // 可以在这里插入自定义预处理逻辑
    this._wrappedOnload = (event) => {
      console.log('自定义onload钩子触发');
      callback?.(event); // 调用用户传入的原始回调
    };
    // 若需要保留原生行为，也可在这里关联原生处理逻辑
  },
  configurable: true,
  enumerable: true
});

说白了，浏览器内置API的很多原型属性都带有上下文校验，必须在实例环境下才能正常访问，直接操作原型上的这些属性就会触发非法调用错误。

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