如何安全访问 HTML 元素原型上的访问器属性（如 href）-js教程-PHP中文网

如何安全访问 HTML 元素原型上的访问器属性（如 href）

在自定义 JavaScript 控制台或序列化 DOM 元素时，直接调用 HTMLAnchorElement.prototype.href 的 getter 会触发 “Illegal invocation” 错误；根本原因是访问器函数丢失了必需的 this 上下文，而正确绑定元素实例即可解决。

在自定义 javascript 控制台或序列化 dom 元素时，直接调用 `htmlanchorelement.prototype.href` 的 getter 会触发 “illegal invocation” 错误；根本原因是访问器函数丢失了必需的 `this` 上下文，而正确绑定元素实例即可解决。

当你执行如下代码时：

const a = document.createElement('a');
const proto = Object.getPrototypeOf(a);
console.log(proto.href); // ❌ Illegal invocation

错误并非源于属性不存在，而是 href 是一个访问器属性（accessor property），其 get 函数内部依赖 this 指向一个合法的 <a></a> 元素实例（即实现了 HTMLAnchorElement 接口的对象）。一旦脱离原始上下文（例如通过 proto.href 访问），this 变为 proto（即 HTMLAnchorElement.prototype），而该对象不具备 DOM 元素的内部槽位（internal slots），因此浏览器拒绝执行并抛出 Illegal invocation。

对比之下，以下写法不报错但毫无意义：

console.log(HTMLAnchorElement.href); // ✅ undefined（无错误）

因为 HTMLAnchorElement 是构造函数（普通函数对象），它自身没有 href 属性 —— href 定义在其 prototype 对象上，且仅对实例有效。

✅ 正确解决方案是显式绑定 this：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

const a = document.createElement('a');
const desc = Object.getOwnPropertyDescriptor(
  Object.getPrototypeOf(a),
  'href'
);
if (desc && typeof desc.get === 'function') {
  const hrefGetter = desc.get.bind(a); // 关键：绑定到具体元素实例
  console.log(hrefGetter()); // ✅ ""（空字符串，符合预期）
}

你也可以封装为通用工具函数，安全读取任意 DOM 元素的访问器属性：

function safeGetAccessor(el, prop) {
  const proto = Object.getPrototypeOf(el);
  const desc = Object.getOwnPropertyDescriptor(proto, prop);
  if (desc?.get) {
    return desc.get.bind(el)();
  }
  return el[prop]; // 回退到普通属性访问
}

// 使用示例
const link = document.createElement('a');
link.href = '/test';
console.log(safeGetAccessor(link, 'href')); // ✅ "/test"
console.log(safeGetAccessor(link, 'toString')); // ✅ "[object HTMLAnchorElement]"

⚠️ 注意事项：

并非所有原型属性都是访问器；id、className 等可直接读取，但 href、src、offsetTop、clientWidth 等涉及计算或 DOM 交互的属性多为访问器，需谨慎处理；
bind() 创建新函数，若频繁调用建议缓存绑定后的 getter（尤其在遍历大量元素时）；
在自定义 stringify 实现中，应优先使用 el.getAttribute('href') 获取反射属性值（更安全、语义明确），仅当需获取解析后 URL（如绝对路径）时才调用 el.href —— 此时务必确保 el 是真实元素实例。