企业官网建设流程全解析

JavaScript 是什么：历史、用途与运行原理

JavaScript 是一门只用了 10 天就设计出来的语言，却成为了当今世界上使用最广泛的编程语言之一。了解它的来历，你会明白为什么它长这样，也能更好地理解它的设计取舍。

---

学习目标

读完本文，你将学会：

• JavaScript 的诞生背景和命名由来
• ECMAScript 与 JavaScript 的关系
• JavaScript 的三大核心能力与应用场景
• 浏览器和 Node.js 两种运行环境的区别

---

一、JavaScript 的诞生：一场 10 天的紧急任务

1.1 时间回到 1995 年

1995 年，网景公司（Netscape）的浏览器 Navigator 占据了市场主导地位。那时的网页是静态的——只能显示文字和图片，没有任何交互。网景公司想在浏览器中加入一种脚本语言，让网页能够动起来。

公司找到了 Brendan Eich，一位计算机科学家。网景给他的要求是：

• 设计一门类似 Java 的脚本语言（当时 Java 正火）
• 语法要简单，让非专业程序员也能快速上手
• 快速完成，急需发布

结果：Brendan Eich 只用了 10 天，就把这门语言设计出来了。

1.2 为什么叫 JavaScript

这个名字其实是个"蹭热度"的营销策略。

• 最初 Brendan Eich 给它取名LiveScript
• 但网景公司和 Sun 公司（Java 的创造者）有合作关系
• 为了借 Java 的名气，改名为JavaScript

重要澄清：JavaScript 和 Java 的关系，就像"雷锋"和"雷峰塔"的关系——除了名字像，几乎完全不同。

对比项	Java	JavaScript
诞生公司	Sun（后被 Oracle 收购）	网景（Netscape）
设计时间	数年	10 天
运行方式	编译后运行	解释执行
类型系统	静态类型（需声明类型）	动态类型（类型自动推断）
用途	后端/安卓开发	网页前端/全栈开发

1.3 10 天设计带来的"遗产"

因为设计时间太短，JavaScript 早期有一些让人困惑的设计：

typeofnull;// "object" ← null 不是对象，这是历史 bugtypeof[];// "object" ← 数组也被当成对象0.1+0.2===0.3;// false ← 浮点数精度问题[]+[];// "" ← 空数组相加变成空字符串

但不要担心——这些问题你都知道怎么避免后，不会影响日常编程。而且 ECMAScript 标准委员会一直在改进语言，现代 JavaScript 已经是一门成熟、强大的语言了。

---

二、ECMAScript：JavaScript 的"标准"

2.1 为什么要制定标准

1996 年，微软也在自己的浏览器 IE 中加入了一门类似的脚本语言，叫 JScript。但 JScript 和 JavaScript 有一些差异，导致同一个网页在不同浏览器中表现不同。

为了解决这个问题，网景向Ecma 国际（一个制定技术标准的组织）提交了 JavaScript 的标准化申请。

2.2 ECMAScript 就是标准，JavaScript 是实现

• ECMAScript（简称 ES）：是语言的"说明书"，规定了语法、类型、关键字等
• JavaScript：是对这份说明书的"实现"，也就是真正能运行的代码

你可以理解为：

• ECMAScript = 菜谱
• JavaScript = 按照菜谱做出来的菜

2.3 ES6：JavaScript 的现代化分水岭

ECMAScript 标准一直在更新，但最重要的一个版本是ES6（2015 年发布，全称 ECMAScript 2015）。

ES6 之前，JavaScript 语法比较简陋，很多功能需要写很多代码才能实现。ES6 引入了大量现代语法特性：

特性	ES5 写法	ES6+ 写法
变量声明	var	let/const
函数	function() {}	() => {}
字符串拼接	"Hello " + name	`Hello ${name}`
解构赋值	手动取值	const {a, b} = obj
类	构造函数模拟	class关键字
模块化	无原生支持	import/export

本专栏的代码全部采用 ES6+ 语法。虽然市面上还有一些老项目用 ES5，但新学习完全没有必要从 ES5 开始。

2.4 版本代号对照表

代号	全称	发布时间	主要特性
ES5	ECMAScript 5	2009	严格模式、JSON 支持
ES6 / ES2015	ECMAScript 2015	2015	let/const、箭头函数、Class、Promise
ES2016	ECMAScript 2016	2016	指数运算符、Array.prototype.includes
ES2017	ECMAScript 2017	2017	async/await、Object.entries
ES2018+	ECMAScript 2018+	2018+	扩展运算符、异步迭代等

现在每年都有一个新版本，但核心语法在 ES6 就基本定型了。后续版本主要是小修小补。

---

三、JavaScript 能做什么

3.1 三大核心能力

JavaScript 最初只是为了给网页添加交互，但如今它的能力已经远超于此：

能力一：网页交互（前端开发）

这是 JavaScript 最经典的用途。当你在网页上：

• 点击按钮弹出提示框
• 滚动页面时导航栏变色
• 填写表单时实时验证输入
• 看网页上的动画效果

这些交互，都是 JavaScript 在操控。

能力二：服务器端开发（后端开发）

2009 年，Node.js 诞生，让 JavaScript 可以在浏览器之外运行。这意味着：

• 你可以用 JavaScript 写服务器 API
• 可以读写文件、操作数据库
• 可以开发命令行工具

现在，一个程序员只用 JavaScript，就可以同时开发前端和后端，这叫"全栈开发"。

能力三：跨平台应用

JavaScript 还能用来开发：

• 桌面应用（VS Code、Slack 都是用 JS 开发的）
• 手机 App（React Native、UniApp）
• 小程序（微信小程序、支付宝小程序）
• 甚至人工智能（TensorFlow.js）

3.2 一句话总结

JavaScript 是唯一一门能同时写网页、写服务器、写手机 App 的编程语言。

这意味着：学好 JavaScript，你可以做很多事情。

---

四、JavaScript 在哪里运行

4.1 两种运行环境

JavaScript 代码需要在"运行时环境"中执行。最常见的两种环境是：

环境	代表	能做什么
浏览器	Chrome、Firefox、Edge、Safari	操作网页、响应用户交互、发网络请求
Node.js	服务器端运行时	读写文件、操作数据库、搭建服务器

4.2 浏览器环境

当你在浏览器中打开一个网页，浏览器内部有一个叫JavaScript 引擎的组件负责执行 JS 代码。

不同浏览器的引擎名称不同：

浏览器	JavaScript 引擎
Chrome	V8
Edge	V8
Firefox	SpiderMonkey
Safari	JavaScriptCore

Chrome 的 V8 引擎是目前最快的，Node.js 也是基于 V8 引擎开发的。

在浏览器中，JavaScript 主要通过DOM（文档对象模型）来操作网页内容。你在本专栏最后会学到 DOM 操作。

4.3 Node.js 环境

Node.js 让 JavaScript 脱离了浏览器，可以在电脑上直接运行。

你可以这样理解两者的区别：

• 浏览器中的 JS：有一个"网页"可以操作，能看到视觉效果
• Node.js 中的 JS：没有网页，只能在命令行中看到文字输出

本专栏的示例代码主要在浏览器中运行（用 HTML 文件），部分简单代码也可以在 Node.js 中运行。

4.4 运行原理简述（了解即可）

JavaScript 是单线程语言，这意味着它一次只能做一件事。但现代 JavaScript 通过事件循环机制，实现了"看起来同时在做多件事"的效果。

你可以这样类比：

• 单线程 = 一个厨师在厨房
• 事件循环 = 厨师通过合理安排，快速切换任务，让你感觉菜是同时上的

这个概念在本专栏第 21 篇会深入讲解，现在只需要知道有这回事即可。

---

五、常见误区与注意点

误区	正确理解
“JavaScript 是 Java 的简化版”	两者完全不同，只是名字像
“JavaScript 只能做网页”	还能写服务器、桌面应用、手机 App
“ES6 是最新版本”	ES6 是 2015 年的版本，之后每年都在更新
“浏览器和 Node.js 的 JS 完全一样”	核心语法一样，但提供的 API 不同（浏览器有 DOM，Node.js 有文件系统）
“要学完所有 ES 版本才能开始写代码”	不需要，掌握 ES6+ 核心语法就够了

---

六、动手练习

练习 1：验证你的浏览器引擎

打开浏览器，按 F12 打开控制台，输入以下代码：

console.log("我在 "+navigator.userAgent+" 中运行 JavaScript");

看看你用的是哪个浏览器？它的 JavaScript 引擎是什么？

练习 2：查看 Node.js 版本

如果你已经安装了 Node.js（第 04 篇会讲安装），在终端输入：

node-v

看看你安装的 Node.js 版本是多少？版本号中的数字代表什么？

练习 3：ES6 语法对比体验

将以下 ES5 代码改写成 ES6 语法：

// ES5 写法varname="小明";varage=18;functiongreet(personName,personAge){return"你好，我是"+personName+"，今年"+personAge+"岁";}console.log(greet(name,age));

参考答案

// ES6+ 写法constname="小明";constage=18;constgreet=(personName,personAge)=>{return`你好，我是${personName}，今年${personAge}岁`;};console.log(greet(name,age));// 更简洁的写法（箭头函数省略 return）constgreetShort=(personName,personAge)=>`你好，我是${personName}，今年${personAge}岁`;console.log(greetShort(name,age));

改动说明：

1. var→const：使用块级作用域声明
2. function→箭头函数：更简洁的函数写法
3. 字符串拼接 → 模板字符串：用`${变量}`替代"" + 变量

---

七、AI 辅助学习

7.1 本节知识点的 AI 提问模板

【背景】我是 JavaScript 初学者，刚学完第 03 篇"JavaScript 是什么"。 【问题】我已经了解 JavaScript 是 1995 年 Brendan Eich 用 10 天设计的， 也知道 ECMAScript 是标准、JavaScript 是实现。 但我不理解：为什么 JavaScript 要设计成动态类型？ 静态类型不是更安全吗？ 【期望】请对比动态类型和静态类型的优缺点， 解释为什么 JavaScript 选择动态类型是合理的， 最后告诉我 TypeScript 是怎么解决类型安全问题的。

7.2 用 AI 验证你的理解

• 问 AI：“如果 Brendan Eich 有更多时间设计 JavaScript，语言可能会有哪些不同？”
• 问 AI：“ES6 为什么等了 6 年（从 ES5 的 2009 到 ES6 的 2015）才发布？期间发生了什么？”
• 让 AI 生成 3 道关于 ES 版本历史的判断题，检验掌握程度

7.3 警惕 AI 的常见错误

• AI 有时会把 Java 和 JavaScript 混为一谈，问 JavaScript 问题时如果发现回答涉及 Java 语法，及时纠正
• AI 可能会说"ES6 是最新标准"，要提醒它 ES 每年都在更新
• AI 有时会编造 Brendan Eich 的语录或历史细节，以 MDN 和 Wikipedia 为准

---

八、配套代码

---

九、本章小结

• JavaScript 诞生于 1995 年，Brendan Eich 仅用 10 天设计完成
• 和 Java 只是名字像，本质完全不同
• ECMAScript 是标准，JavaScript 是对标准的实现
• ES6（2015）是现代化分水岭，本专栏全部采用 ES6+ 语法
• JavaScript 能写网页、服务器、桌面/手机 App，是应用最广的语言之一
• 代码在浏览器或 Node.js 中运行，核心语法相同但 API 不同

---

十、下篇预告

下一篇是《开发环境搭建：浏览器控制台与 VS Code》，你将：

• 学会使用 Chrome 开发者工具的控制台
• 安装和配置 VS Code 编辑器
• 写出你的第一个 JavaScript 程序
• 学会用console.log调试代码

---

如果本文对你有帮助，欢迎点赞、收藏、关注专栏。有任何问题可以在评论区交流！