javascript 中的原型对象通过原型链机制将 web api 挂载到全局对象上，使得开发者可以直接调用如 fetch、document.getelementbyid 等接口。理解这一概念的关键在于区分宿主环境（浏览器）提供的内置对象与 javascript 语言核心定义的原型结构。在浏览器环境中，web api 并非直接定义在 object.prototype 或 function.prototype 上，而是作为全局对象（如 window）的属性存在，并通过原型链向上查找实现继承。
Web API 在全局对象中的位置是怎样的
Web API 主要挂载在浏览器的全局对象 window 上，而不是直接挂在某个特定的原型链节点上。这意味着当你调用 console.log() 时，JavaScript 引擎首先在 window 对象自身属性中查找该函数，如果未找到则沿着原型链向上搜索。这种设计允许 Web API 与 JavaScript 核心语法解耦，同时保持全局访问的便利性。
const api = window.fetch; // 获取全局 fetch 方法 console.log(typeof api); // "function" console.log(api === window.fetch); // true // 验证原型链关系 console.log(Object.getPrototypeOf(window) === null); // true, window 是顶层对象
上述代码展示了如何从全局对象中提取 Web API。由于 window 是浏览器环境的根对象，其原型链通常终止于 null。因此，Web API 并不参与典型的对象实例化原型链，而是作为全局命名空间的一部分直接暴露给脚本。
立即学习“Java免费学习笔记（深入）”；
DOM 元素的原型链与 Web API 的关系是什么
DOM 元素（如 div、p）的原型链独立于全局 Web API，但通过原型链可以访问到通用的 DOM 操作方法。例如，HTMLDivElement.prototype 定义了所有 div 元素共享的方法，而具体的 Web API 如 addEventListener 则可能由浏览器内部实现并挂载到这些原型上。理解这一点有助于区分哪些方法是语言层面的，哪些是环境层面的。
const div = document.createElement('div');
console.log(div.addEventListener); // function
console.log(Object.getPrototypeOf(div).constructor.name); // "HTMLDivElement"
// 检查原型链上的方法来源
console.log(div.hasOwnProperty('addEventListener')); // false, 来自原型链
console.log(Object.getPrototypeOf(div).hasOwnProperty('addEventListener')); // true (假设)这段代码演示了 DOM 元素如何通过原型链访问 Web API。虽然 addEventListener 是一个 Web API，但它被绑定在 DOM 元素的原型上，从而实现了面向对象的操作方式。这种设计使得每个 DOM 元素实例都能共享相同的行为，而不需要为每个实例重复定义方法。
自定义对象如何继承 Web API 的功能
自定义对象无法直接继承 Web API，因为 Web API 是宿主环境特有的功能，不属于 JavaScript 语言标准。然而，可以通过组合模式或代理模式模拟类似行为。例如，创建一个包装器对象，内部持有 DOM 元素引用，并转发方法调用。这种方式避免了直接修改原型链，同时提供了更灵活的控制能力。
class DOMWrapper {
constructor(element) {
this.element = element;
}
addEventListener(type, listener) {
this.element.addEventListener(type, listener);
}
get innerHTML() {
return this.element.innerHTML;
}
}
const div = document.createElement('div');
const wrapper = new DOMWrapper(div);
wrapper.addEventListener('click', () => console.log('clicked'));
console.log(wrapper.innerHTML); // 输出 div 的内容此示例展示了如何使用类封装 DOM 元素，并提供一个安全的接口来访问 Web API。这种方法不仅保留了原始 DOM 元素的功能，还允许添加额外的逻辑或验证步骤。通过这种方式，开发者可以在不依赖全局上下文的情况下管理 DOM 操作，提高代码的可测试性和可维护性。
