Javascript高级程序设计第四版详细测评

╰+攻爆jí腚メ 2022-12-14 03:46 149阅读 0赞

# 简介 #

##  ##

哈喽大家好， 我是大圣，上次做了一个js的书籍测评，评价还不错，在做css和node之前，再做几本书的详细推荐吧,  国庆今天又在家好好读了几本具有代表性的

1.  javascript高级程序设计【红宝书】
2.  javascript忍者秘籍
3.  你不知道的javascript 【小黄书】
4.  javascript语言精粹与编程实践【绿皮书】
5.  how javascript works
6.  javascript20年（电子八卦书）

![format_png][] img

先来红宝书吧，这本书一直都是体系化学习js必备的书籍，第四版相比于第三版，多了很多，整本书分成三个大模块，全面使用最新的语法， 国庆又详细的看了一遍

1.  Ecmascript语法
2.  1.  基础内容
    2.  进阶操作
    3.  新增了迭代器，代理反射，期约（Promise）三个章节
3.  bom和dom
4.  1.  浏览器宿主环境的相关api
5.  javascript api
6.  1.  js相关的进阶api
    2.  新增了模块和工作者线程（web worker）
    3.  最佳实践

这本书详细的构建了整个javascript开发者所需要的知识体系，所以建议这本书作为体系化学习的开始， 读2~3遍后，再去阅读其他进阶和垂直领域的js书籍，效果倍棒

![format_png 1][] image-20201008061120962

### 版本 ###

![format_png 2][] image-20201006214121858

我手里有的只有234三本  ，第四版换作者了，精彩依旧，体系化依旧是是红宝书的最大特点，借鉴winter的书评，这本书最大的特点就是体系化的前端教程，它是可以用来做教材的，javascript这几年很多好书，都是讲单点的，建议大家用这本书来构建前端开发的知识体系，再去看别的书和框架，构建前端程序员的核心竞争力 推荐给大家

第四版的另外一个特色，是很多章节都带上了二维码，扫码可以看到官方对这一节的解读，体验不错， 不过如果视频能换成大妹子+露脸就更好了

## Ecmascript ##

### 前三章 ###

第一章相关的历史更推荐《javascript20年》，第二三章是基础，有js基础的随便翻翻就好，值得注意的是第二章增加了symbol，第三章的位运算，这些都是在vue3源码里出现的，位运算关系到vue3的组合静态标记中的patchFlag和react源码中的EventFlag，一定要搞明白，而且位运算本身就是做组合权限教研的最佳实践，按位或授权，按位与校验权限，除了理解vue3和react源码外，我们做组件开发的时候也用的到

![format_png 3][] image-20201005070058425 ![format_png 4][] image-20201005064951859

### 变量作用域与内存 ###

这一章和第三版差不多，主要是讲清楚原始类型和引用类型，一个图就能搞明白，帮我们理解传参至关重要，除了undefined，null，boolean，number ,string，symbol是原始值，传递的时候是影分身， 其他都是引用，还是指向你自己， 修改会有副作用

let obj1 = new Object();
    let obj2 = obj1;
    obj1.name = "lsp";
    console.log(obj2.name);  // "lsp"

还有就是作用域链的查询，配合乱遭的变量提升、块级作用域、闭包，是众多骚包面试官喜欢的笔试题，与其刷题不如一次性搞清楚，配合小黄书上册，基本就通了

最后是垃圾回收，机制有点像《寻梦环游记》，一个人的死亡并不是重点，被所有人遗忘后，才会被清理，变量也是如此, 如何利用垃圾回收机制去优化自己的代码，书中也给出了几个中肯的建议

### 内置引用类型 ###

这两张主要是介绍内置各种乱遭的数据类型，比如Date，Regex，math，以及集合的引用类型arr，obj，set，map等，值得注意的是weakmap的讲解，会让大家对vue3的源码理解有所帮助

看到书里解释weak是弱弱的拿着，所以不会阻止垃圾回收的时候，我笑了，翻译还是挺萌的，并且书里对定型数组的讲解，还是蛮不错的

![format_png 5][] image-20201005212616083

### 迭代器、生成器、面向对象、代理 ###

自带的for循环比较明显的劣势就是需要知道如何迭代，es6之后的迭代器就是为了解决这个问题，没有代码讲起来比较飘忽

大概意思就是，定义了可迭代的协议，只要我们实现了这个协议的要求，也就是规定好【Symbol.iterator】这个key的行为，就可以通过迭代器去消费，不一定非得是数组或者对象

![format_png 6][] image-20201005214820288

生成器也贼牛逼，可以在一个函数内部暂停，也就是一个用\*定义的生成器函数，内部遇见yield，就会暂停执行，知道调用next来恢复执行

关于对象讲解了对象的configurable，enumberable，wirtable，value几个数据属性，分别对应着数据的能否删除，能否通过for in循环访问，能否修改和实际的值，介绍了一堆es6+的增强语法，然后详细讲解了原型链和继承，还加上了es6的class语法，配合小黄书上册，以后相关的问题你就是专家，和面试官谈笑风生

然后就是学习vue3必备的Proxy和Reflect了， 响应式必备 快去看书吧，看完这章再去研究vue3的reactivity模块巩固一下，效果更佳

### 函数和promise ###

然后函数章节大家基本都会了，大部分内容大家都耳熟能详了，关于尾递归优化的小节值得关注，然后就是热度最广的期约与异步函数了，包括基本的使用，promise的合成策略呀，一些第三方的扩展等，

关于promise的翻译，上个测评我讲过了，我问过hax，是future+promise的结合体， 我也觉得没必要翻译，但是如果翻译的话，我觉得期约还是挺准确的，毕竟总有一天这些术语都要翻译，否则技术书籍里的英文单词会越来越远

配合promise和async await，我们可以写出更简洁和容易理解的代码，也是现代前端必备的技能了，这一章配合小黄书中册，以及绿皮书对promise的剖析，绝对是进阶必备

以上都是js的语言规范，然后推荐大家关注tc39的github，会有很多新语法的讨论，了解新语法的来龙去脉，stage3的浏览器就基本是先了，stage2就是非常有潜力的天，我比较关注的比如Temporal处理事件，class fields

能在语言的设计阶段就能围观甚至参与，绝对是装逼必备技能，这里推荐关注我的技术偶像之一hax，tc39委员会成员

![format_png 7][] image-20201006215835219 ![format_png 8][] image-20201006215913089

## bom和dom ##

### bom和客户端检测 ###

然后就是浏览器环境了，所谓的bom和dom，bom没啥多介绍的，大家耳熟能详了，window，location控制导航，navigator了解浏览器，history操作浏览历史等

客户端检测章节主要就是判断各个浏览器，这一块我建议大家阅读司徒正美的《javascript框架设计》，关于浏览器检测讲的最深入，不过现在这个现代浏览器横行的时代，这块内容过一下就好

### dom ###

这块大部分内容也就是复习了，包括nodeType的12个数字都是啥意思，常见的dom操作，去瞅瞅dom启蒙作为复习资料也不错

有一个新的MutationObserver接口值得关注，可以观察dom的变化，比如属性，子节点的变化，都可以记录下来，这个用来做用户行为监控，以及做fmp的性能统计，也就是首屏啥时候渲染出来，还可以设置不同元素的权重，比如video权重高等，统计出一个现在关键的性能治疗fmp，都是很好用的api

然后就是一些扩展，大家也都很熟悉了，比如querySelector啥的，值得一提的是关于dom的遍历，使用NodeIterator和TreeWalker可以非常方便的进行dom深度优先遍历，还有范围选择api，都值得一读，这些新的api可能会对后续的vue和react的虚拟dom实现有一些影响

然后关于事件就当复习了，里面关于ie兼容性的内容为觉得有些多余，总的来说事件的方方面面都介绍到了，dom2和dom3的规范，界面事件，鼠标事件，滚轮，键盘还有合成事件，触摸事件等乱糟的, 不过还是有些细节没介绍到, 比如once配置可以只触发一次, 这个也是我看vue3源码才知道的

![format_png 9][] image-20201006080650548 ![format_png 10][] image-20201006080056529

然后就是canvas，webgl的入门，表单脚本和错误处理调试，处理xml，这部分第三版其实都有没啥多说的

## Javascript API ##

剩下的部分统称为javascript api，基本都是比第三版多出来的内容，非常推荐阅读了解

比如20章就是一堆html5的新api入门，编码，文件，媒体元素，拖放，通知，页面显隐，web component

然后网络请求部分除了xmlhttprequest，跨域之外，多了fetch api，beacon api和websocket

客户端存储除了cookie还有localstorage和indexdb

新增的es6模块值得关注，讲解了模块系统的发展史，但是没讲到我喜欢的seajs ，差评

除了es6本身的模块系统知识外，也介绍了浏览器里面的script，加上type=module后，就直接支持了import语法，这个就是vue3配套的vite工具的原理了，我写过一个vite源码的文章，欢迎移步, 通过拦截import的请求实现工程化，在不远的未来可能会取代webpack的地位，还不快去好好学习

然后就是web worker，翻译成工作者线程，感觉还不如叫影分身，囧，这一章还是蛮有必要的，大部分js开发者都没有多进程的概念，学完这个我们就知道碰见耗时的任务偷桃子，我们完全可以用猴子猴孙去做，不耽误主进程去和七仙女去讲述葫芦娃从石头里蹦出来的故事，比如我们常见的面试题，大文件上传，计算文件md5这个任务用webworker就是比较合理的场景

![format_png 11][] image-20201006222338112

最后的最佳实践 没啥说的了，就是常见的优化策略，这部分只是一个入门，后续需要看别的书看进阶，后面框架的推荐竟然还有mooltools等过时的库，所以不看也罢，不如我以后做一起现代的工具推荐

## 总结 ##

总的来说这本书绝对是前端的重要参考书，借鉴winter的书评，这本书最大的特点就是体系化的前端教程，它是可以用来做脚踩的，javascript这几年很多好书，都是讲单点的

建议大家用这本书来构建前端开发的知识体系，再去看别的书和框架，构建前端程序员的核心竞争力 推荐给大家

![format_png 12][] image-20201006144255843

下期预告  忍者书和小黄书 or javascript20年

### 参考资料 ###

1.  tc39  https://github.com/tc39
2.  hax知乎 https://www.zhihu.com/people/he-shi-jun/answers
3.  《前端会客厅》hax专场  https://www.bilibili.com/video/BV1xT4y1L7ui
4.  Javascript书籍全测评  https://juejin.im/post/6877712145757896717

## ❤️看完三件事 ##

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点赞，让更多的人也能看到介绍内容（收藏不点赞，都是耍流氓-\_-）
2.  关注公众号“前端劝退师”，不定期分享原创知识。
3.  也看看其他文章

![format_png 13][]

劝退师个人微信：**huab119**

也可以来我的`GitHub`博客里拿所有文章的源文件：

**前端劝退指南**：https：//github.com/roger-hiro/BlogFN一起玩耍呀

[format_png]: /images/20221123/3e42ba5ca2af4c6794d6834bce79c79f.png
[format_png 1]: /images/20221123/b127b606e92e43ad8000f743b255f42a.png
[format_png 2]: /images/20221123/943be93d72e7474688430dbab1b41aff.png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9aa1JkS2VuMVNJZFlOaWExcmdUZzU3TlVFYThJWllHazJOVWliU0FuNm95Mlh0b21Jb1ZpYXhjMFBVTldpY2lhS25pYkJyYUhpYkZXT200T1R4TUtHUVIwSnNpYndRLzY0MA?x-oss-process=image/format,png
[format_png 4]: /images/20221123/f4e7a3e36d4b4c4ab6d8187127d981b3.png
[format_png 5]: /images/20221123/76849087983b4436a9f18cd047741c82.png
[format_png 6]: /images/20221123/b5996dfb3d7546838711226d00d68ea3.png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9aa1JkS2VuMVNJZFlOaWExcmdUZzU3TlVFYThJWllHazJQYlVUTnlYTE8zcXY1aWFYVUlmNElhZUxJTDNZbHRtTUF6aWNSZ241QkFiQjl5Qms4cnh4T2liV0EvNjQw?x-oss-process=image/format,png
[format_png 8]: /images/20221123/a1dc739a414a4fa2ad743d4814872035.png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9aa1JkS2VuMVNJZFlOaWExcmdUZzU3TlVFYThJWllHazJ4aWFNaWJveWNpYngxMTgxaWIxQnE2bndtVXRsRDl3enlBQUVKS3ZZOFFKUTljUVpOWmNab2JCcERBLzY0MA?x-oss-process=image/format,png
[format_png 10]: /images/20221123/e5e361ee8f9c42c0aa2679ab19379ab9.png
[format_png 11]: /images/20221123/3a8342e8353b4773aac436108e8d0ade.png
[format_png 12]: /images/20221123/30dfcbae9b9e4a75946d356ddf27671d.png
[format_png 13]: /images/20221123/a5a2ceec0f564b2896c12a9a2c15342a.png