0Pricing
JavaScript Academy · 课时

全局对象、fetch 可用性与文件/网络接口

安全检测运行时环境（globalThis/window/global），检查 fetch 是否可用，并理解为何文件操作需要 Node，而浏览器主要处理 DOM 和网络

全局对象、fetch 可用性与文件/网络接口 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 3 节课。

全局概览

目标：了解代码运行的位置。

  • 全局对象：globalThis、window、global
  • fetch：进行特性检测，不要想当然地假设它存在
  • 文件：Node 有 fs，浏览器没有
  • URL：两者都支持
全局对象、fetch 可用性与文件/网络接口 — 插图 1

运行时探测（安全方式）

使用typeof检查来避免 ReferenceErrors，并了解代码的运行环境。

// Detect presence of common globals
const hasWindow = typeof window !== "undefined";
const hasGlobal = typeof global !== "undefined";
const hasProcess = typeof process !== "undefined" && process && typeof process.version === "string";

console.log("globalThis exists?", typeof globalThis !== "undefined");
console.log("window?", hasWindow);
console.log("global?", hasGlobal);
console.log("Node process?", hasProcess);
全局对象、fetch 可用性与文件/网络接口 — 插图 2

fetch：特性检测

浏览器通常有fetch；较旧的 Node 版本可能没有。请先检查typeof fetch。

// Feature-detect fetch; do not assume it exists everywhere
const hasFetch = typeof fetch === "function";
console.log("fetch available?", hasFetch);

// If available, you could call fetch(...). For a safe demo we only log.
if (!hasFetch) {
  console.log("Provide a fallback or use a library in Node versions without fetch.");
}
全局对象、fetch 可用性与文件/网络接口 — 插图 3

文件：Node 与浏览器

Node 通过fs提供文件功能，浏览器则没有。通过特性检查，让同一条代码路径保持安全。

// Files are a Node concern; browsers cannot read your disk directly
const hasRequire = typeof require === "function";
console.log("CommonJS require available?", hasRequire);

// Safe message instead of real file I/O (keeps the demo runnable everywhere)
if (hasRequire) {
  console.log("In Node you can use fs for files; in browsers you cannot.");
} else {
  console.log("No require here; likely a browser-like or sandboxed runtime.");
}
全局对象、fetch 可用性与文件/网络接口 — 插图 4

共享功能：URL API

URL类可以在不同运行时中一致地解析地址，对小型工具很有帮助。

// URL is available in both environments
const u = new URL("https://example.com/path?x=1#top");
console.log("host:", u.host);
console.log("pathname:", u.pathname);
console.log("search:", u.search);
console.log("hash:", u.hash);
全局对象、fetch 可用性与文件/网络接口 — 插图 5

适合初学者的习惯

提示：

  • 使用它之前先检查typeof fetch。
  • 文件操作需要 Node（例如fs）；浏览器主要处理 DOM 和网络。
  • 使用globalThis获取可移植的全局对象。
  • 优先进行小型特性检查，不要猜测环境。
全局对象、fetch 可用性与文件/网络接口 — 插图 6

fetch 检测测验

快速检查：安全地检测 fetch。

全局对象、fetch 可用性与文件/网络接口 — 插图 7

总结

总结：通过安全的typeof检查检测运行时，通过特性检测确认fetch，记住文件功能属于Node端，并在两种环境中使用URL。

全局对象、fetch 可用性与文件/网络接口 — 插图 8

常见问题解答

「全局对象、fetch 可用性与文件/网络接口」课时是免费的吗？

是的 — 「全局对象、fetch 可用性与文件/网络接口」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 3 节课。

「全局对象、fetch 可用性与文件/网络接口」这节课中我会学到什么？

安全检测运行时环境（globalThis/window/global），检查 fetch 是否可用，并理解为何文件操作需要 Node，而浏览器主要处理 DOM 和网络 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。

「全局对象、fetch 可用性与文件/网络接口」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 全局对象、fetch 可用性与文件/网络接口
  2. ESM 加载器细节、路径与 URL 的差异
  3. 环境变量与配置模式
← 返回 JavaScript Academy