![59fcf22cf5c3ff9f620f1052d32faf71.png](https://i-blog.csdnimg.cn/blog_migrate/fb443a148640c13fdfc1457f76127a9d.jpeg)
本文视频版
【红宝书】Javascript高级程序设计第四版详细测评_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com![45d7347f45a9d367dfd71487f41c893a.png](https://i-blog.csdnimg.cn/blog_migrate/e65f143e50396128ba3bc72c6159799f.jpeg)
简介
哈喽大家好, 我是大圣,上次做了一个js的书籍测评,评价还不错,在做css和node之前,再做几本书的详细推荐吧, 国庆今天又在家好好读了几本具有代表性的
- javascript高级程序设计【红宝书】
- javascript忍者秘籍
- 你不知道的javascript 【小黄书】
- javascript语言精粹与编程实践【绿皮书】
- how javascript works
- javascript20年(电子八卦书)
![77aa7251df6afb21bce3de2e36a77f7d.png](https://i-blog.csdnimg.cn/blog_migrate/ccb79379c9e33e18e71e061eb88483ca.jpeg)
先来红宝书吧,这本书一直都是体系化学习js必备的书籍,第四版相比于第三版,多了很多,整本书分成三个大模块,全面使用最新的语法, 国庆又详细的看了一遍
- Ecmascript语法
- 基础内容
- 进阶操作
- 新增了迭代器,代理反射,期约(Promise)三个章节
- bom和dom
- 浏览器宿主环境的相关api
- javascript api
- js相关的进阶api
- 新增了模块和工作者线程(web worker)
- 最佳实践
这本书详细的构建了整个javascript开发者所需要的知识体系,所以建议这本书作为体系化学习的开始, 读2~3遍后,再去阅读其他进阶和垂直领域的js书籍,效果倍棒
![104cb6f0282ba9d41a9fd5f82b31eff6.png](https://i-blog.csdnimg.cn/blog_migrate/b3834ff5208bf89c6ddff769a7c471b0.jpeg)
版本
![ff7490e2c5ff587e556d78bc9385bf2a.png](https://i-blog.csdnimg.cn/blog_migrate/5bf0a2d1d2307a8dd8b4dffbfa6c930d.jpeg)
我手里有的只有234三本 ,第四版换作者了,精彩依旧,体系化依旧是是红宝书的最大特点,借鉴winter的书评,这本书最大的特点就是体系化的前端教程,它是可以用来做教材的,javascript这几年很多好书,都是讲单点的,建议大家用这本书来构建前端开发的知识体系,再去看别的书和框架,构建前端程序员的核心竞争力 推荐给大家
第四版的另外一个特色,是很多章节都带上了二维码,扫码可以看到官方对这一节的解读,体验不错, 不过如果视频能换成大妹子+露脸就更好了
Ecmascript
前三章
第一章相关的历史更推荐《javascript20年》,第二三章是基础,有js基础的随便翻翻就好,值得注意的是第二章增加了symbol,第三章的位运算,这些都是在vue3源码里出现的,位运算关系到vue3的组合静态标记中的patchFlag和react源码中的EventFlag,一定要搞明白,而且位运算本身就是做组合权限教研的最佳实践,按位或授权,按位与校验权限,除了理解vue3和react源码外,我们做组件开发的时候也用的到
![241495310f65635138f679b2ac969a8b.png](https://i-blog.csdnimg.cn/blog_migrate/dc0c18da276c7f5fb9b3721b17e2492e.jpeg)
![8e5c4526ef57ca8687d8f4499b0ffa28.png](https://i-blog.csdnimg.cn/blog_migrate/e3f9faead7c1c3dfcbc48ef5caecbe2d.jpeg)
变量作用域与内存
这一章和第三版差不多,主要是讲清楚原始类型和引用类型,一个图就能搞明白,帮我们理解传参至关重要,除了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是弱弱的拿着,所以不会阻止垃圾回收的时候,我笑了,翻译还是挺萌的,并且书里对定型数组的讲解,还是蛮不错的
![6d1223cb88a9446772c64f61cd17e653.png](https://i-blog.csdnimg.cn/blog_migrate/eb8f43119aba709c4370229530aded19.jpeg)
迭代器、生成器、面向对象、代理
自带的for循环比较明显的劣势就是需要知道如何迭代,es6之后的迭代器就是为了解决这个问题,没有代码讲起来比较飘忽
大概意思就是,定义了可迭代的协议,只要我们实现了这个协议的要求,也就是规定好【Symbol.iterator】这个key的行为,就可以通过迭代器去消费,不一定非得是数组或者对象
![070b5bfa2daad42f2ae5bdc682de8813.png](https://i-blog.csdnimg.cn/blog_migrate/f8afacb54ac31545432b3224bad7d159.jpeg)
生成器也贼牛逼,可以在一个函数内部暂停,也就是一个用*定义的生成器函数,内部遇见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委员会成员
![031fda2392e1479410de2eb731f78a03.png](https://i-blog.csdnimg.cn/blog_migrate/abb3ef6c939a209ae8f95f1889e86c9f.jpeg)
![7e2594435bbda4353607c89236d22e82.png](https://i-blog.csdnimg.cn/blog_migrate/878ef5c702d91bea6dcea16d18dae24f.jpeg)
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源码才知道的
![b0e13e2cda57a14b28ac9e536531b9b5.png](https://i-blog.csdnimg.cn/blog_migrate/eaf46e52df8730470916557855e06783.jpeg)
![de33b3d41dc68acbb67edf213c07c5f2.png](https://i-blog.csdnimg.cn/blog_migrate/67fc5197438395a8e289633857c7c6b5.png)
然后就是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就是比较合理的场景
![992614dce37ede44f5ab662ab3f77216.png](https://i-blog.csdnimg.cn/blog_migrate/88f36b9df130f82454dff411862a9f9e.jpeg)
最后的最佳实践 没啥说的了,就是常见的优化策略,这部分只是一个入门,后续需要看别的书看进阶,后面框架的推荐竟然还有mooltools等过时的库,所以不看也罢,不如我以后做一起现代的工具推荐
总结
总的来说这本书绝对是前端的重要参考书,借鉴winter的书评,这本书最大的特点就是体系化的前端教程,它是可以用来做脚踩的,javascript这几年很多好书,都是讲单点的
建议大家用这本书来构建前端开发的知识体系,再去看别的书和框架,构建前端程序员的核心竞争力 推荐给大家
![58a3880c2afdabf9ad5a3d7fee39923b.png](https://i-blog.csdnimg.cn/blog_migrate/ca7856d11fd5c6c6c2a5e1c3f14ca033.jpeg)
下期预告 忍者书和小黄书 or javascript20年
参考资料
- tc39 https://github.com/tc39
- hax知乎 https://www.zhihu.com/people/he-shi-jun/answers
- 《前端会客厅》hax专场 https://www.bilibili.com/video/BV1xT4y1L7ui
- Javascript书籍全测评 https://juejin.im/post/6877712145757896717