JavaScript 概述与运行环境

00:00

18 min Beginner

JavaScript 发展历程、ECMAScript 标准与运行环境。

1. JavaScript 概述 (Overview)

JavaScript 是一门具有函数优先特性的轻量级、解释型或即时编译型 (JIT) 的编程语言。最初由 Brendan Eich 在 1995 年为 Netscape 浏览器设计，最初名为 LiveScript，后因与 Sun Microsystems 的合作更名为 JavaScript。 JavaScript 不仅是网页开发的核心语言，也是全栈开发、移动开发和桌面应用开发的重要工具。它的灵活性和强大的生态系统使其成为当今最流行的编程语言之一。

1.1 发展历程

时间	事件	版本/标准
1995	Brendan Eich 为 Netscape 浏览器创建 LiveScript	-
1995	更名为 JavaScript，与 Sun Microsystems 合作	-
1996	Netscape 向 ECMA 提交 JavaScript 标准	-
1997	ECMAScript 1.0 发布	ES1
1998	ECMAScript 2.0 发布	ES2
1999	ECMAScript 3.0 发布	ES3
2009	ECMAScript 5 发布	ES5
2015	ECMAScript 6 (ES2015) 发布	ES6/ES2015
2016	ECMAScript 2016 发布	ES2016
2017	ECMAScript 2017 发布	ES2017
2018	ECMAScript 2018 发布	ES2018
2019	ECMAScript 2019 发布	ES2019
2020	ECMAScript 2020 发布	ES2020
2021	ECMAScript 2021 发布	ES2021
2022	ECMAScript 2022 发布	ES2022
2023	ECMAScript 2023 发布	ES2023

1.2 核心特点 (Key Features)

特点	描述	优势
单线程	主线程只有一个，配合事件循环 (Event Loop) 处理并发	避免了多线程的复杂性和资源竞争
动态类型	变量无需显式声明类型，类型会在运行时自动推断	代码更灵活，开发速度快
函数式编程	函数是一等公民，可以作为参数、返回值或赋值给变量	支持高阶函数、闭包等函数式编程特性
原型继承	基于原型的对象模型，而非传统的类继承	更灵活的对象系统，支持动态扩展
跨平台	可在浏览器、服务器 (Node.js)、移动端 (React Native)、桌面端 (Electron) 运行	一次学习，多处使用
事件驱动	基于事件的编程模型，适合处理用户交互和异步操作	响应式设计，提高用户体验
解释执行	无需编译，直接由解释器执行	开发-测试循环快，便于调试
JIT 编译	现代引擎会将热点代码编译为机器码	执行速度快，接近原生代码性能

2. 运行环境 (Runtime)

2.1 浏览器 (Browser)

浏览器是 JavaScript 最早的运行环境，提供了以下核心 API：

DOM (Document Object Model): 操作 HTML 和 XML 文档的 API
BOM (Browser Object Model): 操作浏览器窗口的 API
Web API: 如 Fetch API、Geolocation API、Web Storage 等 浏览器引擎：
浏览器引擎
Chrome V8
Firefox SpiderMonkey
Safari JavaScriptCore
Edge V8 (基于 Chromium)

浏览器	引擎
Chrome	V8
Firefox	SpiderMonkey
Safari	JavaScriptCore
Edge	V8 (基于 Chromium)

2.2 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，使 JavaScript 可以在服务器端运行。它提供了以下核心 API：

文件系统 (fs): 读写文件
网络 (net, http, https): 网络通信
操作系统 (os): 操作系统交互
路径 (path): 路径操作
进程 (process): 进程管理
事件 (events): 事件处理 Node.js 的特点：
非阻塞 I/O
事件驱动
单线程但高并发
丰富的 npm 包生态系统

2.3 其他运行环境

React Native: 移动端应用开发
Electron: 桌面应用开发
Deno: 安全的 JavaScript/TypeScript 运行时
Bun: 快速的 JavaScript 运行时

3. 环境配置 (Environment Setup)

3.1 浏览器环境

浏览器环境无需特殊配置，所有现代浏览器都内置了 JavaScript 引擎。可以通过以下方式在浏览器中运行 JavaScript：

内联脚本: 在 HTML 文件中使用 <script> 标签
外部脚本: 使用 <script src="script.js"></script> 引入外部文件
浏览器控制台: 在开发者工具中直接执行 JavaScript 代码

3.2 Node.js 环境

3.2.1 安装 Node.js

访问 Node.js 官网下载最新的 LTS (Long Term Support) 版本
运行安装程序，按照向导完成安装
验证安装是否成功：

 # 查看 Node.js 版本
 node -v
 # 查看 npm 版本
 npm -v

3.2.2 包管理器

npm: Node.js 内置的包管理器
yarn: Facebook 开发的包管理器，速度更快
pnpm: 高效的包管理器，节省磁盘空间

3.3 开发工具

3.3.1 编辑器

编辑器	描述	特点
Visual Studio Code	Microsoft 开发的轻量级编辑器	插件丰富，支持调试，集成终端
WebStorm	JetBrains 开发的专业 JavaScript IDE	智能代码提示，重构工具，内置测试
Sublime Text	轻量级文本编辑器	速度快，可扩展性强
Atom	GitHub 开发的开源编辑器	可定制性强，插件丰富

3.3.2 浏览器开发者工具

Chrome DevTools: 功能强大的调试工具，包含元素、控制台、网络、性能等面板
Firefox DevTools: 类似 Chrome DevTools，具有一些独特功能
Edge DevTools: 基于 Chromium，与 Chrome DevTools 类似

3.3.3 构建工具

Webpack: 模块打包器
Vite: 现代前端构建工具，速度快
Rollup: 用于库的打包工具
Parcel: 零配置打包工具

4. ECMAScript 标准

4.1 主要版本特性

4.1.1 ES5 (2009)

严格模式 (use strict)
JSON 支持 (JSON.parse, JSON.stringify)
数组方法 (forEach, map, filter, reduce 等)
函数方法 (bind, call, apply)
对象方法 (Object.create, Object.defineProperty 等)

4.1.2 ES6 / ES2015

块级作用域 (let, const)
箭头函数 (() => { ... })
模板字符串 (`Hello ${name}!`)
解构赋值 (const { x, y } = point)
默认参数 (function greet(name = 'World'))
剩余参数 (function sum(...numbers))
展开运算符 ([...array], { ...object })
类 (class Person { ... })
模块 (import, export)
Promise (异步编程)
Symbol (新的原始类型)
Set 和 Map (新的数据结构)

4.1.3 ES2016+ 特性

| 版本 | 主要特性 | | ---------- | --------------------------------------------------------- | --- | --------------------------------------- | | ES2016 | 幂运算符 (**)，数组 includes 方法 | | ES2017 | async/await，对象 entries, values, keys 方法 | | ES2018 | 异步迭代，Promise finally，对象展开运算符 | | ES2019 | Array.prototype.flat 和 flatMap，Object.fromEntries | | ES2020 | 可选链 (?.)，空值合并运算符 (??)，BigInt | | ES2021 | 逻辑赋值运算符 (&&=, | | =,??=),String.prototype.replaceAll | | ES2022 | 类字段，私有方法，顶层 await | | ES2023 | 数组 findLast 和 findLastIndex，Symbol.metadata |

5. 第一个 JavaScript 程序

5.1 浏览器环境

创建 index.html 文件：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript 示例</title>
  </head>
  <body>
    <h1>Hello, JavaScript!</h1>
    <button id="greetBtn">点击问候</button>
    <div id="message"></div>
    <script>
      // 内联脚本
      document.getElementById('greetBtn').addEventListener('click', function () {
        const name = prompt('请输入您的名字：');
        document.getElementById('message').textContent = `Hello, ${name}!`;
      });
    </script>
  </body>
</html>

5.2 Node.js 环境

创建 hello.js 文件：

// 输出 Hello, World!
console.log('Hello, World!');
// 定义函数
function greet(name) {
  return `Hello, ${name}!`;
}
// 调用函数
console.log(greet('JavaScript'));
// 使用 ES6+ 特性
const names = ['Alice', 'Bob', 'Charlie'];
names.forEach((name) => {
  console.log(greet(name));
});

运行脚本：

 node hello.js

预期输出：

 Hello, World!
 Hello, JavaScript!
 Hello, Alice!
 Hello, Bob!
 Hello, Charlie!

6. 开发模式与最佳实践

6.1 开发模式

6.1.1 模块化开发

CommonJS (Node.js)：

// 导出
module.exports = { greet };
// 导入
const { greet } = require('./module');

ES 模块 (浏览器和现代 Node.js)：

 // 导出
 export function greet(name) { ... }
 // 导入
 import { greet } from './module.js';

6.1.2 包管理

初始化项目：

 # 使用 npm
 npm init -y
 # 使用 yarn
 yarn init -y
 # 使用 pnpm
 pnpm init -y

安装依赖：

 # 使用 npm
 npm install express
 # 使用 yarn
 yarn add express
 # 使用 pnpm
 pnpm add express

6.2 最佳实践

6.2.1 代码风格

使用 ES6+ 特性：箭头函数、模板字符串、解构赋值等
使用 const 和 let：避免使用 var
缩进：使用 2 或 4 个空格
命名规范：
变量和函数：camelCase
常量：UPPER_SNAKE_CASE
类：PascalCase
分号：可选择使用，但要保持一致
引号：单引号或双引号，保持一致

6.2.2 性能优化

避免频繁 DOM 操作：使用文档片段或虚拟 DOM
使用事件委托：减少事件监听器数量
优化循环：减少循环内的计算
使用 requestAnimationFrame：优化动画
避免内存泄漏：及时清理事件监听器和定时器

6.2.3 安全性

防止 XSS 攻击：对用户输入进行转义
防止 CSRF 攻击：使用 CSRF 令牌
使用 HTTPS：保护数据传输
验证输入：对所有用户输入进行验证
使用内容安全策略 (CSP)：限制脚本执行

6.2.4 调试技巧

使用 console.log：简单的调试
使用断点：在浏览器开发者工具或 VS Code 中设置断点
使用 debugger 语句：在代码中设置断点
使用 console.table：格式化输出对象和数组
使用 console.time 和 console.timeEnd：测量代码执行时间

7. 生态系统

7.1 前端框架

React：Facebook 开发的 UI 库，组件化开发
Vue：渐进式 JavaScript 框架，易于学习
Angular：Google 开发的完整框架
Svelte：编译时框架，性能优异

7.2 后端框架

Express：轻量级 Node.js Web 框架
Koa：Express 团队开发的更现代的框架
NestJS：基于 TypeScript 的企业级框架
Fastify：高性能 Node.js Web 框架

7.3 工具库

Lodash：实用工具库
Axios：HTTP 客户端
Moment.js：日期处理
Day.js：轻量级日期处理
UUID：生成唯一标识符
JWT：JSON Web Token 处理

7.4 测试工具

Jest：JavaScript 测试框架
Mocha：灵活的测试框架
Chai：断言库
Sinon：模拟库
Cypress：端到端测试

8. 常见问题与解决方案

8.1 变量作用域问题

问题：变量泄露到全局作用域 解决方案：

使用 const 和 let 代替 var
封装代码到函数或模块中
使用 IIFE (立即执行函数表达式)

8.2 异步编程问题

问题：回调地狱 (Callback Hell) 解决方案：

使用 Promise
使用 async/await
使用 async.js 等库

8.3 跨域问题

问题：浏览器的同源策略限制 解决方案：

CORS (跨域资源共享)
JSONP
代理服务器
WebSocket

8.4 内存泄漏

问题：未释放的内存导致性能下降 解决方案：

及时清理事件监听器
清除定时器
避免循环引用
使用 WeakMap 和 WeakSet

9. 学习资源

9.1 官方资源

9.2 书籍

《JavaScript 高级程序设计》
《你不知道的 JavaScript》
《Eloquent JavaScript》
《JavaScript 设计模式》

9.3 在线教程

9.4 社区资源

10. 总结

JavaScript 是一门强大而灵活的编程语言，从最初的浏览器脚本语言发展成为全栈开发的核心技术。它的跨平台能力、丰富的生态系统和持续的标准更新使其成为现代软件开发中不可或缺的工具。通过理解 JavaScript 的核心特性、运行环境和最佳实践，开发者可以构建出高效、可靠、安全的应用。随着 ES 标准的不断演进，JavaScript 也在不断改进和完善，为开发者提供更多强大的功能和更好的开发体验。作为一名 JavaScript 开发者，持续学习和适应变化是至关重要的。通过不断探索新特性、新框架和新工具，你可以保持竞争力，构建出更加出色的应用。

更新日志 (Changelog)

2026-04-05: 整合 JS 概述与运行环境知识
2026-04-05: 扩写内容，增加详细的发展历程、核心特点、运行环境、ECMAScript 标准、开发工具和最佳实践

JavaScript 概述与运行环境

知识检测

学习进度

学习推荐