持续创作，加速生长！这是我参加「日新计划 10 月更文应战」的第1天，点击检查活动详情

前言

咱们好，我是HoMeTown，web领域有一本神书咱们应该都有看过，这本书我看过两遍，可是每次看都是粗粗的略过一些重要的知识点，甚至一些面试过程中的问题，在这本书里都能找到答案。

作业这么多年，到现在为止对这本书都没有一个系统的知识点记载，这次想从头读一遍这一本JavaScript高档程序设计【第4版】，并把重要的知识点记载下来，一起加上自己的见解，这也是我第一次在上记载共享读书笔记，共勉之！

重视专栏，一起学习吧~

参考文献

JavaScript高档程序设计（第4版）

JavaScript？

1995年JavaScript问世，刚开端的主要用途是做输入验证，也便是表单验证，后来JavaScript被网景公司加入到Navigator浏览器中，从此JavaScript成为主流浏览器的标配。

如今JavaSciprt已经被广泛运用，场景包含但不局限于桌面浏览器 手机浏览器 服务端 屏幕阅读器，也能完结杂乱的计算机计算与交互。

历史回顾

1995年，网景公司里一个叫Brendan Eich的工程师开发了Mocha（后来改名为LiveScript）脚本言语，为了赶时刻与Sun公司组成开发联盟，一起完结了LiveScript脚本言语，正式上线之前，为了蹭当时Java的热度，改名为JavaScript。

1996年，微软决定带着Internet Explorer（IE）重磅进入Web浏览器领域，微软推出的IE3其间包含名为JScript的JavaScript完结。2022年，IE正式退出了历史舞台。

1 《JavaScript高级程序设计》__ 什么是JavaScript？

微软的JavaScript 与 网景JavaScript呈现了两个版别的JavaScript，还没有规范的语法与特性规范，呈现了冲突，随之，JavaScript走上了规范化的征程。

1997年，JavaScript1.1作为提案，提交给欧洲计算机制造商协会（Ecma），委员会TC39（来自各个厂牌的尖端工程师）担任规范化使命，推出了ECMA-262，也便是ECMAScript这个新的脚本言语规范。

1998年，世界规范化组织（ISO）和世界电工委员会（IEC）将ECMAScript采用为规范ISO/IEC-16262，从此，各个厂牌浏览器开端以ECMAScript作为自己JavaScript完结的一句，可是具体完结仍是有所不同，组织的工期有所不同，所以呈现了浏览器兼容问题。（此处que一下IE）。

JavaScript完结

JavaScript在开发的过程中远远不值ECMA-262界说的那样，而是根据ECMA-262做了更广的延伸，完整的JavaScript包含：

  • ECMAScript
  • DOM
  • BOM

1 《JavaScript高级程序设计》__ 什么是JavaScript？

ECMAScript

ECMAScript不局限于浏览器，ECMA-262只是将这门言语作为基准来界说，其间只界说了：

  • 语法
  • 类型
  • 句子
  • 关键字
  • 保留字
  • 操作符
  • 全局目标
ECMAScript的版别

1 《JavaScript高级程序设计》__ 什么是JavaScript？

官方

ECMA-262 第1版 删去各个厂牌的特定代码，要求支撑Unicode，并且内置目标与平台无关。

ECMA-262 第2版 编校作业，为了契合ISO & IEC的要求

ECMA-262 第3版 第一次真正对规范进行更新，更新字符串处理、过错界说和数值输出，添加正则表达式、控制句子、try/catch，标志着ECMAScript 作为一门真正的变成言语的时代要来了。

ECMA-262 第4版 一次完全修订，重新召集TC39，包含强类型变量、新语法和数据结构、类、继承以及操作数据的办法，可是，TC39的子委员会中人觉得跳动太大了，修正的太多，提交了一个改动较少的提案ECMAScript 3.1，TC39觉得还不错，第4版就被废除了，否则咱们应该说从ES4开端就推出了类的概念。

ECMA-262 第5版 便是ECMAScript 3.1，2009年12月3日发布，新增解析&徐丽华JSON数据的JSON目标，新的严厉形式，2011年6月对这个版别弥补了一个修订版，无新增功用，只改了一些规范中的过错。

ECMA-262 第6版 俗称ES6、 ES2015，2015年6月发布，对ECMAScript来说，这一版具有重要意义，正式支撑了类、模块、迭代器、生成器、箭头函数、署理等数据类型（不才2016年入行，时机很好）

ECMA-262 第7版 俗称ES7、ES2016，2016年6月发布，仅包含少数语法层面的添加（e.g. Array.prototype.includes）

ECMA-262 第8版 俗称ES8、ES2017，完结与2017年6月，添加了async/await、Object.values/entries，明确支撑目标字面量最后的逗号，由于很多服务端言语中，是不支撑字典后边还有逗号的。

ECMA-262 第9版 俗称ES9、ES2018，2018年6月发布，新增异步迭代、rest、Promise.finally等

ECMA-262 第10版 俗称ES10、ES2019，2019年6月发布，新增Array.flat()/flatMap()、String.prototype.trimStart/trimEnd等等等等

ECMA-262 第11版，俗称ES11、ES2020，2020年6月发布，新增类的私有特点 #、动态 import导入、bigInt、globalThis

这个globalThis我还真不知道，看了一下，浏览器中：

1 《JavaScript高级程序设计》__ 什么是JavaScript？

node环境中：

1 《JavaScript高级程序设计》__ 什么是JavaScript？

ECMA-262 第12版，俗称ES12、ES2021，2021年6月发布，新增逻辑操作符 ?? ?. !.等，这个运算符真的很香，用法 戳这儿

JavaScript、ECMAScript、ECMA-262 三者之间的联系

ECMAScript 只是对完结ECMA-262这个规范描绘的一切方面的一门言语的称号，JavaScript完结了ECMAScript。

ECMAScript契合性

要成为ECMAScript的完结，有必要满意以下条件：

  • 满意ECMA-262中描绘的一切类型、值、目标、特点、函数、以及语法和语义
  • 支撑Unicode字符规范

初度之外能够在此基础上进行扩展

DOM

文档目标模型（Documnet Object Model），DOM将页面笼统问一组分层节点，HTML或许XML页面每个元素都是一个节点（虚拟DOM？），比方：

1 《JavaScript高级程序设计》__ 什么是JavaScript？

会被笼统成这样：

1 《JavaScript高级程序设计》__ 什么是JavaScript？

虚拟DOM实锤。

DOM经过创立表明文档的树，开发者经过一些DOM API 完结增修正查。

为什么要搞DOM？

能够在不刷新的情况下修正页面外观和内容。问题是，两大厂牌微软和网景又搞出了两个不同的动态HTML策略，也就意味着，你写相同一个HTML，无法在浏览器中经过DOM API修正内容，得到一样的效果。由于他们笼统HTML的方式不同。

因而，万维网联盟（俗称W3C，World Wide Web Consortium）开端制定DOM规范，1998年10月，DOM 1级 成为W3C的引荐规范。

DOM级别

DOM 1级 的目标是映射文档结构，有DOM Core和DOM HTML两个模块组成，前者供给一种映射XML文档，然后方便访问和操作文档任意部分的方式，后者扩展了前者，添加了特定于HTML的目标和办法。

DOM 2级新增了以下模块：

  • DOM视图 描绘追寻文档不同视图的接口
  • DOM事情 描绘事情及事情处理的接口
  • DOM款式 描绘处理元素CSS款式的接口
  • DOM遍历和规模描绘遍历和操作DOM树的接口

DOM 3级添加了以同一的方式加载和保存文档的办法

平常咱们其实仍是DOM 2级用的会比较多一点

BOM

浏览器目标模型（Browser Object Model），操作浏览器的窗口，开发者能够控制浏览器显现页面之外的部分。它是没有相关规范的JavaScript完结，包含：

  • 弹出新浏览器窗口
  • 移动、缩放和关闭浏览器
  • navigator目标，供给关于浏览器的信息
  • location目标，供给浏览器加载页面的信息
  • screen目标，供给关于用户屏幕分辨率的信息
  • performance目标，供给浏览器内存占用、导航行为、时刻统计的信息
  • 对cookie的支撑
  • 其他自界说目标，比方XMLHttpRequest等

由于很长时刻都没有规范，各个厂牌浏览器都是自己完结自己的BOM，有一些默契的约定俗成，比方window目标和navigator目标，并且咱们都会给他们界说自己的特点和办法，HTML5呈现以后，各个厂牌应该会日趋一致。

总结

JavaScript由三个部分组成：

  • ECMAScript 由ECMA-262界说并供给核心功用
  • 文档目标模型DOM 供给与网页内容交互的办法和接口
  • 浏览器目标模型BOM 供给与浏览器交互的办法和接口

JavaScript的三个部分得到了5大浏览器（IE、Firefox、Chrome、Safari和Opera）不同程度上的支撑，谁支撑的最差，咱们也都清楚。ES5根本根本都支撑，ES6向上的，也都在渐渐完善。DOM根本都支撑。BOM咱们也都假定存在很大一部分的公共特性。

下次见~ 我的朋友，我是HoMeTown‍‍，➕我VX，你进群，这是一个咱们一起生长、一起学习的社群！在这儿你能够：讨论技术问题、了解前端资讯、打听应聘公司、获得内推机会、聊点有的没的。

vx: hometown-468【单独拉你】

‍‍ 大众号：秃头开发头秃了 【重视回复“进群”】

Blog：HoMeTown’Blog【点开看看】

高赞好文

  • 羊了个羊 一夜爆火，我却开端悄悄抹眼泪…

  • 共享 11 张巨美观的PC端界面！！!

  • 敢在我工位装摄像头？吃我一套JS ➕ CSS组合拳！！

  • 前端老司机 70+ 实用工具网站共享（主张收藏！）

  • 【Git】 什么！？都快2023年了还搞不清楚 git rebase 与 git merge！？

  • 我用前端【最新】技术栈完结了一个出产规范的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】

往期回顾

  • 敢在我工位装摄像头？吃我一套JS ➕ CSS组合拳！！

  • 【Git】 什么！？都快2023年了还搞不清楚 git rebase 与 git merge！？

  • 前端老司机 70+ 实用工具网站共享（主张收藏！）

  • 运用eslint + prettier + husky + lint-staged 约束项目的最佳实践！

  • 【小程序】爆肝 3 天总结的微信小程序优化攻略（收藏夹吃灰吧！）

  • 【VUE】从源码视点说清楚MVVM！完结v-model！真的很简单！

  • 【CSS】5分钟带你完全搞懂 W3C & IE 盒模型！

  • 【CSS】有意思的BFC：Block Formatting Context（块格式化上下文）！

  • 【CSS】聊一聊CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别

  • 【性能】7分钟带你了解【尤大】都在运用的 Chrome Runtime Performance Debug！

  • 【源码视点】7分钟带你搞懂ESLint核心原理！

  • 【JavaScript】手把手教你写高质量 JavaScript 异步代码！

  • 我用前端【最新】技术栈完结了一个出产规范的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】

  • …………… 检查更多 ……………