JavaScript如何调用浏览器非JS特性？setTimeout等Web API相关疑问

这些问题问得非常到位，刚好是JS开发者从入门到进阶阶段常困惑的底层逻辑点，我来逐个拆解清楚：

1. JavaScript如何使用浏览器中未包含在自身的特性？ #

核心逻辑很简单：浏览器会在JavaScript的执行环境中，注入一套全局可用的「Web API」接口。这些接口不属于JavaScript语言本身的官方规范（也就是ECMA-262定义的内容），而是浏览器厂商基于Web标准（比如HTML、DOM规范）实现的扩展能力。

举几个实际例子：

• 要操作页面元素？直接调用浏览器提供的document.getElementById()，document就是浏览器给JS的全局对象；
• 要发起网络请求？用全局方法fetch()，这也是浏览器暴露的Web API；
• 要监听页面滚动？用window.addEventListener('scroll', ...)，window同样是浏览器注入的全局顶层对象。

你只需要按照JS语法调用这些接口，就能触发浏览器底层的功能，完全不用关心底层是怎么实现的。

2. setTimeout及Web API的实现、调用逻辑，以及跨语言转换工具 #

（1）Web API是用其他编程语言编写的吗？ #

没错！像setTimeout、DOM操作、Canvas、WebGL这类Web API，几乎都是用**C/C++**这类底层语言实现的——毕竟浏览器本身（比如Chrome的Blink渲染引擎、Firefox的Gecko引擎）就是基于C/C++开发的，这些API本质是浏览器和JS引擎之间的"通信桥梁"。

（2）JS语法不同，怎么调用其他语言实现的特性？ #

这其实是「封装」的功劳：浏览器已经把底层C/C++实现的功能，包装成了JavaScript能完全理解的函数、对象、方法。

比如你调用setTimeout(() => console.log('Hello'), 1000)时：

1. JS引擎会把这个请求传递给浏览器的事件循环系统（底层C/C++实现）；
2. 事件循环会在1秒后，把回调函数放进JS的任务队列；
3. 等JS引擎当前的执行栈清空后，就会执行这个回调函数。

整个过程中你只需要写符合JS语法的代码，底层的语言差异已经被浏览器的接口完全屏蔽了——就像你调用一个JS函数时，不用关心它内部是用原生JS写的，还是用Wasm实现的一样。

（3）有没有可将其他语言代码转换为JavaScript的转换器？ #

当然有，目前主流的方案分为两类：

• WebAssembly（Wasm）工具链：这是最推荐的跨语言方案，比如Emscripten可以把C/C++代码编译成Wasm模块，JS能直接调用模块里的函数；Rust、Go、Swift这类语言也有成熟的工具链，能把代码编译成Wasm，和JS无缝交互。
• 直接转译为JS的工具：比如asm.js（Wasm的前身），能把C代码转成高度优化的JS代码；还有Pyodide可以把Python代码编译成Wasm，让你在浏览器里用JS调用Python的功能；Ruby2JS则能把Ruby代码转成符合现代标准的JS。

另外补充一句：像TypeScript、CoffeeScript这类是JS的超集转JS，不算跨语言转换，但也是很常用的转译工具。

内容的提问来源于stack exchange，提问作者javascript lover