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 并不参与典型的对象实例化原型链，而是作为全局命名空间的一部分直接暴露给脚本。
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 操作，提高代码的可测试性和可维护性。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
