JavaScript API是浏览器内置的工具箱，提供DOM操作、网络请求、本地存储、地理位置等能力，挂载于window对象，调用需注意兼容性、权限和异步处理。

JavaScript API 是浏览器提供的一组预定义功能，让你能用 JavaScript 控制网页行为、访问设备能力、处理数据或与用户交互。它不是你写的代码，而是浏览器“自带的工具箱”，比如弹出提示框、获取当前时间、操作网页结构、发送网络请求、读取本地存储等。

常见的浏览器内置 JavaScript API

这些 API 直接挂载在全局 window 对象上（所以通常可以直接调用，不用额外导入）：

• DOM API：操作网页内容，如 document.getElementById()、element.addEventListener()
• Fetch API：发起网络请求，如 fetch('/api/data').then(r => r.json())
• localStorage / sessionStorage：在浏览器中存取字符串数据，如 localStorage.setItem('theme', 'dark')
• Date API：处理时间，如 new Date().getFullYear()
• Geolocation API：获取用户地理位置，需用户授权，如 navigator.geolocation.getCurrentPosition(...)
• Console API：调试输出，如 console.log()、console.error()

调用浏览器 API 的基本方式

绝大多数浏览器 API 都通过对象方法或属性调用，语法和普通 JS 函数一样，但要注意使用条件和权限限制：

• 直接调用全局方法或属性，例如：alert('Hello')、location.href = 'https://example.com'
• 通过 navigator、document、window 等宿主对象访问，例如：navigator.onLine 判断是否联网，document.body.innerHTML = '...' 修改页面内容
• 异步 API（如 fetch、geolocation）通常返回 Promise 或需要传回调函数，记得用 then() 或 async/await 处理结果
• 部分 API 有安全限制：只能在 HTTPS 页面使用（如 Geolocation、Notifications），或仅在用户交互后触发（如 AudioContext）

检查 API 是否可用 & 兼容性处理

不是所有 API 在每个浏览器或版本中都支持，调用前建议检测：

• 用 typeof 或 in 检查是否存在，例如：if ('fetch' in window) { ... }
• 对关键功能做降级处理，比如 fetch 不支持时改用 XMLHttpRequest
• 查看 caniuse.com 或 MDN 文档了解兼容性表
• 现代项目可借助 Babel + polyfill（如 core-js）补全旧环境缺失的能力

一个完整的小例子：获取并显示用户位置

这段代码展示了真实场景中如何调用 Geolocation API，并处理成功与失败情况：

if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      console.log(`纬度：${latitude}，经度：${longitude}`);
    },
    (error) => {
      console.error('定位失败：', error.message);
    }
  );
} else {
  console.warn('当前浏览器不支持地理位置');
}