JavaScript是前端唯一原生可执行语言,驱动交互、动态更新与框架运行,其加载机制、作用域、异步及模块系统是理解现代前端的核心。

JavaScript 是前端开发的执行引擎,没有它,网页就是一张不能响应、不能交互、不能更新的静态图纸。
浏览器里唯一能直接运行的编程语言
HTML 定义结构,CSS 控制样式,但只有 JavaScript 能让按钮点击有反应、让表单提交前校验、让页面局部刷新而不跳转。现代浏览器不提供原生支持的其他编程语言(比如 Python 或 Rust)——它们必须先编译成 JavaScript 才能运行。
常见错误现象:Uncaught ReferenceError: myFunction is not defined,往往不是函数写错了,而是脚本没加载完就执行,或 script 标签位置不对(比如放在 里又没加 defer)。
-
适合依赖 DOM 的逻辑,等 HTML 解析完再执行 -
适合完全独立的脚本(如统计代码),加载完立刻执行,可能早于 DOM 构建 - 把
放在前是最朴素也最可靠的兜底方式
所有主流前端框架都建立在 JavaScript 运行时之上
React、Vue、Svelte 这些名字听起来很“高级”,但它们本质都是 JavaScript 库或编译器:React 把 JSX 编译成 React.createElement() 调用,Vue 的模板最终生成 render 函数,Svelte 在构建时把组件转成高效 JS 操作 DOM 的代码。
立即学习“Java免费学习笔记(深入)”;
如果你跳过原生 document.querySelector()、addEventListener()、fetch(),直接学框架,会遇到这些典型问题:
- 状态更新不触发视图刷新,却找不到是
state没用let声明,还是对象被直接修改没走响应式代理 - 异步请求后数据没渲染,其实是忘了
await或没处理Promise的链式返回 - 用
ref()包裹一个数字,却在模板里直接写{{ count + 1 }},结果发现没更新——因为没解包成count.value
现代前端工程离不开 JavaScript 的运行时能力
打包工具(Webpack、Vite)、测试框架(Jest、Vitest)、类型系统(TypeScript 编译后仍是 JavaScript)、甚至 CSS-in-JS 方案(styled-components),全靠 Node.js(即 JavaScript 运行时)驱动。
一个真实例子:你改了 vite.config.js,Vite 启动失败报错 TypeError: Cannot destructure property 'defineConfig' of undefined——这说明你导入的 vite 包没正确导出,而排查路径只能靠理解 import 和 export 在 CommonJS 与 ESM 下的行为差异,不是靠背配置项。
- Node.js 默认用 CommonJS(
require/module.exports),但 Vite 配置文件默认走 ESM(import/export) -
type: "module"写在package.json里会影响整个项目对.js文件的解析方式 - ESM 中
import.meta.url可以获取当前模块路径,CommonJS 得用__dirname,两者不兼容
真正卡住人的,从来不是语法糖或新 API,而是对 JavaScript 如何在浏览器和 Node.js 中实际加载、执行、作用域绑定、异步调度的理解断层。写十个 useState 不如亲手实现一次简易的响应式依赖收集,后者会让你一眼看穿为什么 useEffect 里读不到最新 state。











