✨JS 零基础保姆级入门系列 · 第一章第1篇很多前端新手写代码都有一个通病只会复刻代码不懂底层逻辑。写得出弹窗、写得出交互效果但完全不知道 JS 为什么能在网页中运行、浏览器和 Node.js 执行代码有什么区别、JS 这门语言到底是怎么一步步发展成前端核心的。这也是很多人学 JS 越学越乱、进阶卡顿、面试一问底层就翻车的核心原因——前置认知缺失地基没有打牢。本篇作为系列开篇不讲枯燥语法专门带你吃透 JavaScript 核心前置知识发展史、底层运行机制、两大核心运行环境浏览器/Node.js。全程无空话、纯干货、通俗解读零基础也能完全看懂帮你彻底摆脱“只会抄代码”的困境。适合人群前端零基础小白、在校计算机专业学生会写 JS 代码但不懂底层原理的入门开发者需要夯实基础、备战前端面试、准备跳槽的程序员想系统学习 JS搭建完整知识体系的开发者本篇学习目标搞懂 JS 的发展历程与核心定位区分JavaScript 与 ECMAScript理解 JS 底层运行机制、引擎与运行时的核心区别彻底分清浏览器、Node.js 两大运行环境的差异与适用场景建立 JS 全局认知为后续语法、高阶特性、工程化学习铺路一、JavaScript 是什么核心定位一文读懂在正式学习代码之前我们先明确最核心的定义JavaScript 是一门轻量级、解释型、弱类型、基于原型的动态脚本语言。不用被专业术语吓到我们通俗拆解核心特点轻量级语法简洁、无需复杂编译环境依赖宿主环境即可运行解释型无需提前编译打包代码逐行解析执行即时生效弱类型变量无需提前定义类型赋值即可自动匹配类型灵活度极高跨平台不止能在浏览器运行借助 Node.js 可实现服务端、桌面、小程序、移动端全场景开发很多新手会混淆两个概念JavaScript 和 ECMAScript这里直接给出标准答案ECMAScript (ES)是 JS 的语法标准规则手册定义了变量、函数、循环、原型等核心语法规范JavaScript是 ECMAScript 的具体实现在 ES 标准基础上结合宿主环境的 API实现完整功能。简单说ES 定规则JS 来落地我们日常写的 JS 代码全部遵循 ECMAScript 迭代标准。二、JavaScript 发展史从网页脚本到全栈语言JS 从诞生至今三十余年从一门“网页小脚本”逆袭为唯一贯通前后端、全平台的主流语言。理清发展历程能帮你理解 JS 的设计初衷与如今的生态格局。1. 诞生1995 年为解决网页交互而生90年代的网页只有 HTML CSS只有静态文字和样式无法实现表单校验、弹窗提示、按钮交互等动态效果。Netscape网景公司为了解决网页动态交互问题交由工程师Brendan Eich开发脚本语言仅用10天就完成了初代版本最初命名为 LiveScript后续为了蹭 Java 热度更名 JavaScript。这里纠正一个经典误区JS 和 Java 没有任何血缘关系语法、底层逻辑、设计理念完全不同只是命名营销噱头而已。2. 标准化1997 年 ECMAScript 正式诞生JS 诞生后各大浏览器厂商纷纷仿制开发导致市面上出现多个版本的 JS语法混乱、互不兼容开发者适配成本极高。1997 年ECMA 国际标准化组织统一规范发布ECMAScript 1.0标准统一 JS 语法规则自此所有浏览器都遵循 ES 标准实现 JS 引擎JS 正式走向标准化。3. 崛起2008 年 V8 引擎问世早期 JS 引擎性能极差代码执行速度慢只能做简单网页交互无法实现复杂逻辑。2008 年 Google 推出V8 引擎采用即时编译JIT技术大幅提升 JS 执行性能让 JS 的运行效率实现质的飞跃为后续全场景普及奠定性能基础。4. 突破2009 年 Node.js 诞生突破浏览器限制2009 年 Ryan Dahl 基于 V8 引擎开发出Node.js让 JS 彻底脱离浏览器环境可在服务器、本地终端运行。这是 JS 发展史最关键的转折点JS 不再只是网页脚本正式成为服务端开发语言实现了“一门语言通吃前后端”。依托 libuv 库的非阻塞 I/O 特性Node.js 天生适配高并发服务端场景。5. 成熟2015 年 ES6 发布现代 JS 正式成型2015 年发布的ES6ES2015是 JS 史上最重要的版本更新新增 let/const、箭头函数、Promise、模块化、解构赋值等核心特性彻底解决旧版 JS 的诸多痛点。自此JS 语法体系趋于完善后续每年迭代小版本逐步完善高阶特性、工程化能力最终成就了如今的前端生态。发展时间线总结核心节点1995年JavaScript 诞生专注网页动态交互1997年ECMAScript 标准发布语法统一规范化2008年Google V8 引擎发布JS 性能大幅升级2009年Node.js 问世JS 实现跨平台运行2015年ES6 发布现代 JavaScript 正式定型至今持续迭代支撑前端工程化、全栈开发、跨端开发三、JS 核心底层运行机制引擎 vs 运行时想要吃透 JS必须分清两个核心概念JS 引擎和JS 运行时环境90%的新手混淆的核心问题都在这里。1. JavaScript 引擎代码的“翻译官”JS 是高级语言计算机无法直接识别必须通过JS 引擎将 JS 代码翻译成机器语言实现解析、编译、执行、内存管理全流程。主流浏览器对应专属引擎也是行业通用标准Chrome / Edge / Node.jsV8 引擎性能最强、生态最广FirefoxSpiderMonkey 引擎SafariJavaScriptCore 引擎核心重点JS 引擎只负责执行 JS 语法代码不提供任何宿主 API无法操作 DOM、无法读写文件、无法发起网络请求。2. JavaScript 运行时环境代码的“工作台”仅有引擎无法完成实际开发引擎 宿主 API 事件循环 共同组成JS 运行时环境也就是 JS 代码的运行工作台。简单理解引擎负责跑基础 JS 语法变量、函数、循环、判断等运行时在引擎基础上额外提供各类功能 API让 JS 可以操作浏览器、操作系统、服务器资源我们常说的「JS 运行在浏览器/Node 中」本质是JS 代码在对应运行时环境中由引擎解析执行调用宿主专属 API 完成业务功能。四、两大核心运行环境浏览器 vs Node.js 超详细对比JavaScript 目前只有两大主流运行环境浏览器端和Node.js 服务端两者共用同一套 JS 语法但底层能力、API、应用场景完全不同是前端入门必懂核心知识点。1. 浏览器运行环境前端交互核心浏览器是 JS 最原始的运行环境核心作用是实现网页动态交互服务于客户端用户体验。浏览器运行时组成核心执行V8/JavaScriptCore/SpiderMonkey 引擎专属 APIDOM API操作页面标签、BOM API操作浏览器窗口、Fetch/Ajax网络请求、Canvas 等前端 Web API异步机制浏览器事件循环浏览器端 JS 独有能力操作页面 DOM 元素实现增删改查、样式修改、事件绑定操作浏览器窗口、地址栏、历史记录、本地存储localStorage监听鼠标、键盘、滚动、点击等用户交互事件发起前端网络请求实现前后端数据交互浏览器端 JS 局限性无法直接操作本地文件浏览器安全沙箱机制防止恶意代码窃取用户文件无法监听服务器端口、搭建服务权限受限所有操作都受浏览器安全策略约束2. Node.js 运行环境服务端与工程化核心Node.js 是基于 V8 引擎的服务端 JS 运行时环境脱离浏览器运行专注于服务端开发、本地脚本、前端工程化工具。Node.js 运行时组成核心执行Google V8 引擎和 Chrome 同源性能一致底层支撑libuv 库实现非阻塞 I/O、事件循环、线程调度专属 API文件读写、路径处理、网络服务、进程操作、模块系统等服务端 APINode.js 独有能力读写本地文件、操作文件夹、处理本地资源搭建 HTTP/HTTPS 服务器、监听端口、处理接口请求操作系统进程、调用系统资源、实现高并发服务支撑前端工程化Webpack/Vite/ESLint 等所有构建工具均基于 Node.js 运行Node.js 局限性没有 DOM、BOM API无法操作网页元素和浏览器窗口无法监听前端用户交互事件不适合做客户端页面交互开发3. 核心区别总结新手必背1.语法通用API 不通用基础 JS 语法变量、函数、循环完全一致但浏览器和 Node 的专属 API 互不兼容2.运行场景不同浏览器面向客户端页面交互Node.js 面向服务端、本地脚本、工程化3.权限不同浏览器权限受限Node.js 拥有系统级操作权限4.核心能力不同浏览器操作页面Node.js 操作文件、服务、进程五、新手常见误区答疑误区1JS 只能在浏览器运行错误JS 是跨平台语言依托 V8 引擎可在浏览器、Node.js、小程序、UniApp、Electron 等任意搭载 JS 引擎的环境运行。误区2JavaScript 和 ECMAScript 是两个东西不准确ECMAScript 是标准JavaScript 是标准的落地实现日常所说的 JS 版本迭代本质就是 ES 标准的更新。误区3Node.js 是一门新语言错误Node.js 不是语言是JS 的运行环境Node 中写的代码依然是 JavaScript只是可以调用服务端专属 API。六、本篇总结核心总结JS 诞生于1995年从网页交互脚本发展为全栈、跨平台主流语言ECMAScript 是语法标准JS 是具体实现ES6 是现代 JS 的基石JS 引擎负责解析语法运行时环境提供各类功能 API浏览器环境专注客户端页面交互Node.js 专注服务端与工程化语法互通、API 隔离
