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

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 的关系就像雷锋和雷峰塔的关系——除了名字像几乎完全不同。对比项JavaJavaScript诞生公司Sun后被 Oracle 收购网景Netscape设计时间数年10 天运行方式编译后运行解释执行类型系统静态类型需声明类型动态类型类型自动推断用途后端/安卓开发网页前端/全栈开发1.3 10 天设计带来的遗产因为设计时间太短JavaScript 早期有一些让人困惑的设计typeofnull;// object ← null 不是对象这是历史 bugtypeof[];// object ← 数组也被当成对象0.10.20.3;// false ← 浮点数精度问题[][];// ← 空数组相加变成空字符串但不要担心——这些问题你都知道怎么避免后不会影响日常编程。而且 ECMAScript 标准委员会一直在改进语言现代 JavaScript 已经是一门成熟、强大的语言了。二、ECMAScriptJavaScript 的标准2.1 为什么要制定标准1996 年微软也在自己的浏览器 IE 中加入了一门类似的脚本语言叫 JScript。但 JScript 和 JavaScript 有一些差异导致同一个网页在不同浏览器中表现不同。为了解决这个问题网景向Ecma 国际一个制定技术标准的组织提交了 JavaScript 的标准化申请。2.2 ECMAScript 就是标准JavaScript 是实现ECMAScript简称 ES是语言的说明书规定了语法、类型、关键字等JavaScript是对这份说明书的实现也就是真正能运行的代码你可以理解为ECMAScript 菜谱JavaScript 按照菜谱做出来的菜2.3 ES6JavaScript 的现代化分水岭ECMAScript 标准一直在更新但最重要的一个版本是ES62015 年发布全称 ECMAScript 2015。ES6 之前JavaScript 语法比较简陋很多功能需要写很多代码才能实现。ES6 引入了大量现代语法特性特性ES5 写法ES6 写法变量声明varlet/const函数function() {}() {}字符串拼接Hello nameHello ${name}解构赋值手动取值const {a, b} obj类构造函数模拟class关键字模块化无原生支持import/export本专栏的代码全部采用 ES6 语法。虽然市面上还有一些老项目用 ES5但新学习完全没有必要从 ES5 开始。2.4 版本代号对照表代号全称发布时间主要特性ES5ECMAScript 52009严格模式、JSON 支持ES6 / ES2015ECMAScript 20152015let/const、箭头函数、Class、PromiseES2016ECMAScript 20162016指数运算符、Array.prototype.includesES2017ECMAScript 20172017async/await、Object.entriesES2018ECMAScript 20182018扩展运算符、异步迭代等现在每年都有一个新版本但核心语法在 ES6 就基本定型了。后续版本主要是小修小补。三、JavaScript 能做什么3.1 三大核心能力JavaScript 最初只是为了给网页添加交互但如今它的能力已经远超于此能力一网页交互前端开发这是 JavaScript 最经典的用途。当你在网页上点击按钮弹出提示框滚动页面时导航栏变色填写表单时实时验证输入看网页上的动画效果这些交互都是 JavaScript 在操控。能力二服务器端开发后端开发2009 年Node.js 诞生让 JavaScript 可以在浏览器之外运行。这意味着你可以用 JavaScript 写服务器 API可以读写文件、操作数据库可以开发命令行工具现在一个程序员只用 JavaScript就可以同时开发前端和后端这叫全栈开发。能力三跨平台应用JavaScript 还能用来开发桌面应用VS Code、Slack 都是用 JS 开发的手机 AppReact Native、UniApp小程序微信小程序、支付宝小程序甚至人工智能TensorFlow.js3.2 一句话总结JavaScript 是唯一一门能同时写网页、写服务器、写手机 App 的编程语言。这意味着学好 JavaScript你可以做很多事情。四、JavaScript 在哪里运行4.1 两种运行环境JavaScript 代码需要在运行时环境中执行。最常见的两种环境是环境代表能做什么浏览器Chrome、Firefox、Edge、Safari操作网页、响应用户交互、发网络请求Node.js服务器端运行时读写文件、操作数据库、搭建服务器4.2 浏览器环境当你在浏览器中打开一个网页浏览器内部有一个叫JavaScript 引擎的组件负责执行 JS 代码。不同浏览器的引擎名称不同浏览器JavaScript 引擎ChromeV8EdgeV8FirefoxSpiderMonkeySafariJavaScriptCoreChrome 的 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 不同浏览器有 DOMNode.js 有文件系统“要学完所有 ES 版本才能开始写代码”不需要掌握 ES6 核心语法就够了六、动手练习练习 1验证你的浏览器引擎打开浏览器按 F12 打开控制台输入以下代码console.log(我在 navigator.userAgent 中运行 JavaScript);看看你用的是哪个浏览器它的 JavaScript 引擎是什么练习 2查看 Node.js 版本如果你已经安装了 Node.js第 04 篇会讲安装在终端输入node-v看看你安装的 Node.js 版本是多少版本号中的数字代表什么练习 3ES6 语法对比体验将以下 ES5 代码改写成 ES6 语法// ES5 写法varname小明;varage18;functiongreet(personName,personAge){return你好我是personName今年personAge岁;}console.log(greet(name,age));参考答案// ES6 写法constname小明;constage18;constgreet(personName,personAge){return你好我是${personName}今年${personAge}岁;};console.log(greet(name,age));// 更简洁的写法箭头函数省略 returnconstgreetShort(personName,personAge)你好我是${personName}今年${personAge}岁;console.log(greetShort(name,age));改动说明var→const使用块级作用域声明function→箭头函数更简洁的函数写法字符串拼接 → 模板字符串用${变量}替代 变量七、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 是对标准的实现ES62015是现代化分水岭本专栏全部采用 ES6 语法JavaScript 能写网页、服务器、桌面/手机 App是应用最广的语言之一代码在浏览器或 Node.js 中运行核心语法相同但 API 不同十、下篇预告下一篇是《开发环境搭建浏览器控制台与 VS Code》你将学会使用 Chrome 开发者工具的控制台安装和配置 VS Code 编辑器写出你的第一个 JavaScript 程序学会用console.log调试代码如果本文对你有帮助欢迎点赞、收藏、关注专栏。有任何问题可以在评论区交流