<script> 标签使用什么 JS 作用域？

Question

我在我的 html 中写了一些在 <script> 标签之间的 JS：

console.log('exist in ? scope', foo !== undefined)
console.log('exist in window scope', window.foo !== undefined)
console.log('exist in document scope', document.foo !== undefined)
console.log('exist in globalThis scope', globalThis.foo !== undefined)

<script>
  class FooBar {}; 
  const foo = new FooBar()
</script>

在我的 JS 开发控制台中，我可以找到 FooBar 和 foo。

我希望他们在window、document、globalThis，并且能够使用window.foo访问，但事实并非如此。

在哪个范围内保留这些变量？

Answer 1

script 标签就是……一个 HTML 标签。因此，它没有作用域，因为它不是 JavaScript，而是 HTML。 script 元素为您所做的是允许 HTML 解析器“停止”并让 JavaScript 解释器接管。 script标签内的JS会按照标准的JS规则执行。这意味着引用将通过正常的范围链过程进行评估。

本质上，JS 中的所有内容都是全局的，除非您将其编码为其他方式。

请记住，window 不是 JavaScript 的一部分。它是浏览器提供的API，所以当我们谈论“全球”时，我们并不总是在谈论window。例如，在 node.js 中，没有 window 或 document，但仍然存在全局作用域。因此，在 JS 中，您可以拥有全局变量，但这并不意味着它们会自动附加为 window 对象的属性。

• JS 中的全局变量只需声明其引用名称即可访问。
• 任何具有 ID 属性的 HTML 元素都将成为 window对象。
• 作为window 对象的一部分明确创建的任何 JS 属性 将通过 window 对象可用。
• 作为加载页面一部分的任何 HTML 元素都将被加载 可通过 DOM API 访问（即document.querySelector， document.getElementById）。

这是 another answer 不久前谈论“作用域链”及其工作原理。