宿主函数

宿主函数

以下是关于 JavaScript 宿主函数（Host Functions） 的详细介绍及整理表格。宿主函数是由 JavaScript 的宿主环境（如浏览器或 Node. js）提供的 API，而非 ECMAScript 标准的一部分。下面以浏览器环境为例进行说明：

什么是宿主函数？

• 宿主环境：JavaScript 的运行环境（如浏览器、Node. js）。
• 宿主对象/函数：由宿主环境提供的对象或函数，用于与外部系统交互（如操作 DOM、处理网络请求、访问硬件等）。
• 与内置对象的区别：内置对象（如 Array、Math）是 ECMAScript 标准定义的，而宿主对象（如 document、XMLHttpRequest）由宿主环境实现。

---

浏览器中的常见宿主函数及方法

以下是浏览器环境中常见的宿主函数及其核心方法，按功能分类整理：

1. DOM 操作

宿主对象/函数	常用方法/属性	描述
document	getElementById(), querySelector(), createElement()	访问或创建 DOM 元素。
Element	appendChild(), removeChild(), setAttribute(), classList	操作元素属性、子元素或类名。
EventTarget	addEventListener(), removeEventListener()	绑定或移除事件监听器（如点击、键盘事件）。

2. BOM（浏览器对象模型）

宿主对象/函数	常用方法/属性	描述
window	alert(), setTimeout(), setInterval(), fetch()	控制浏览器窗口、定时任务、网络请求。
navigator	userAgent, geolocation, clipboard	获取浏览器信息、地理位置或剪贴板权限。
location	href, reload(), search	操作或获取当前页面的 URL 信息。
history	pushState(), replaceState(), back()	管理浏览历史（用于单页应用路由）。

3. 存储与缓存

宿主对象/函数	常用方法/属性	描述
localStorage	setItem(), getItem(), removeItem()	持久化存储键值对数据（关闭浏览器后保留）。
sessionStorage	setItem(), getItem(), removeItem()	会话级存储键值对数据（关闭标签页后清除）。
IndexedDB	open(), createObjectStore(), transaction()	浏览器端数据库，支持复杂数据存储。

4. 网络请求

宿主对象/函数	常用方法/属性	描述
XMLHttpRequest	open(), send(), onreadystatechange	传统 AJAX 请求（逐渐被 fetch 取代）。
fetch()	fetch(url).then().catch()	基于 Promise 的现代网络请求方法。
WebSocket	new WebSocket(), send(), onmessage	实现客户端与服务器的双向实时通信。

5. 多媒体

宿主对象/函数	常用方法/属性	描述
<audio>/<video>	play(), pause(), currentTime, volume	控制音视频播放。
CanvasRenderingContext2D	fillRect(), drawImage(), beginPath()	通过 <canvas> 绘制 2D 图形或动画。

6. 其他 Web API

宿主对象/函数	常用方法/属性	描述
console	log(), error(), warn(), table()	控制台输出调试信息。
Geolocation	getCurrentPosition(), watchPosition()	获取用户地理位置（需授权）。
MutationObserver	observe(), disconnect()	监听 DOM 树变化。

示例代码

// 使用宿主函数 setTimeout（属于 window 对象）
setTimeout(() => {
  console.log("延迟执行");
}, 1000);
// 使用宿主函数 fetch
fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data));
// 使用 DOM 操作宿主函数
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
  alert("按钮被点击！");
});

---

总结

• 宿主函数依赖环境：不同宿主环境（浏览器、Node. js）提供的 API 不同。
• 功能丰富性：通过宿主函数，JavaScript 可以操作页面、发送请求、访问硬件等。
• 兼容性注意：部分宿主函数可能不被旧浏览器支持（如 fetch），需使用 Polyfill 或降级方案。