主题
JS 运行时
JS 知识体系可分为几个部分?
ECMAScript(ES)标准
JavaScript 语言的核心规范,包括语法、数据类型、语句、函数、对象、Promise、模块等。
运行时(Runtime)环境扩展
- Web API(浏览器环境)
- Node.js API(服务端环境)
- 小程序 API(移动端/特定平台)
- 其他运行时 API(如 Electron、React Native 等)
浏览器
浏览器常见的全局对象?
window:浏览器的顶级全局对象,所有全局变量和函数其实都是它的属性。globalThis:ES2020 引入的通用全局对象,在浏览器等价于window,在 Node.js 等其他运行时也有对应实现,推荐跨环境时使用。self:主线程下等价于window,在 Web Worker 代表当前 worker 的全局作用域。frames:指向窗口中的所有<iframe>集合。- 常用全局对象属性/方法:
document、console、alert、prompt、confirm、setTimeout、setInterval、fetch、localStorage、sessionStorage、navigator、location、history、screen等,实际上都是window的属性。 - 其他:如
Event、XMLHttpRequest、MutationObserver等构造函数。
如何在浏览器中运行 JS?
<script> 标签
我们几乎可以使用 <script> 标签将 JavaScript 程序插入到 HTML 文档的任何位置。
比如:
html
<!DOCTYPE HTML>
<html>
<body>
<p>script 标签之前...</p>
<script>
alert('Hello, world!');
</script>
<p>...script 标签之后</p>
</body>
</html><script> 标签中包裹了 JavaScript 代码,当浏览器遇到 <script> 标签,代码会自动运行。
<script> 现代标记
1. type 属性:<script type=…>
在老的 HTML4 标准中,要求 script 标签有 type 属性。通常是 type="text/javascript"。这样的属性声明现在已经不再需要。而且,现代 HTML 标准已经完全改变了此属性的含义。现在,它可以用于 JavaScript 模块。
2. language 属性:<script language=…>
这个属性是为了显示脚本使用的语言。这个属性现在已经没有任何意义,因为语言默认就是 JavaScript。不再需要使用它了。
3. 外部脚本
如果你有大量的 JavaScript 代码,我们可以将它放入一个单独的文件。脚本文件可以通过 src 属性(attribute)添加到 HTML 文件中。
html
<script src="/path/to/script.js"></script>这里,/path/to/script.js 是脚本文件从网站根目录开始的绝对路径。
当然也可以提供当前页面的相对路径。例如,src="script.js"、src="./script.js",表示当前文件夹中的 script.js 文件。
html
<script src="/path/to/script.js"></script>
<script src="./path/to/script.js"></script>我们也可以提供一个完整的 URL 地址,例如:
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>要附加多个脚本,请使用多个标签:
html
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
...提示
一般来说,只有最简单的脚本才嵌入到 HTML 中。更复杂的脚本存放在单独的文件中。
使用独立文件的好处是浏览器会下载它,然后将它保存到浏览器的 缓存 中。
之后,其他页面想要相同的脚本就会从缓存中获取,而不是下载它。所以文件实际上只会下载一次。这可以节省流量,并使得页面(加载)更快。
如果设置了 src 属性,script 标签内容将会被忽略。
一个单独的 <script> 标签不能同时有 src 属性和内部包裹的代码。
这将不会工作:
html
<script src="file.js">
alert(1); // 此内容会被忽略,因为设定了 src
</script>我们必须进行选择,要么使用外部的 <script src="…">,要么使用正常包裹代码的 <script>。
为了让上面的例子工作,我们可以将它分成两个 <script> 标签。
html
<script src="file.js"></script>
<script>
alert(1)
</script>Node.js
Node.js 常见的全局对象?
global:Node.js 的全局对象,类似于浏览器的window。globalThis:跨环境通用的全局对象,在 Node.js 下等价于global。process:提供进程信息与控制方法。Buffer:处理二进制数据。console:用于输出信息。__dirname、__filename:当前模块的目录和文件名(实际是每个模块的局部变量,但可直接访问)。require、module、exports:CommonJS 模块系统相关。setTimeout、setInterval、setImmediate及对应的 clear 方法。- ……
如何在 Node.js 中运行 JS?
对于 Node.js 环境,需要使用诸如 node my.js 的命令行来执行它。
