1. 邂逅JavaScript高级

一、前端需要掌握的三大技术

该系列文章连载于公众号coderwhy和掘金XiaoYu2002中

• 对该系列知识感兴趣和想要一起交流的可以添加wx：XiaoYu2002-AI，拉你进群一起成长进步 课程对应链接：coderwhy最强JavaScript高级教程:1-2集

• 前端开发最主要需要掌握的是三个知识点：HTML、CSS、JavaScript
  • 其中HTML很简单，但CSS和JavaScript很难
  • 这是前端生态圈中最基础的三块基石

图1-1 前端三大基础技术

技术难度体现

• 我把学习分为"形"与"象"
  • 形是表面的使用方式
  • 象是在表面之下，所蕴含更深刻的本质
• 其中HTML的大多数常用内容都在"形"上，并且内容并不多，所以比较简单
• 但CSS和JavaScript除了基础使用的"形"之外，还有绝大多数的魅力来自于冰山下的"象"
  • CSS的"形"来自那些数不尽的属性，"象"来自使用规则(例如：CSS选择器、函数，Web布局，防御式CSS等)
  • JavaScript的"形"来自那些数不尽的API，"象"来自这些API下基于整体前端环境下的衡量与取舍
• 这就是为什么我们说JavaScript学会它需要几分钟，掌握它需要很多年，学会的是使用API，掌握的是API下的衡量与取舍以及运行原理
  • 只有真正理解JS，掌握住了JS的本质，我们才会被它的魅力所折服，并且在之后学习所有涉及到JS编写的框架、第三方库、组件库等等，就更容易理解其中所蕴含的思想，能够以更轻松的状态去更快的学会

二、JavaScript的重要性

• 前端三大技术中，HTML和CSS是主攻页面的技术，分别号称页面的骨架与衣裳

  • 但随着时代的发展，技术的更迭，前端开始不仅局限于页面，通过JS或者TS，我们甚至可以涉足后端的领域，也就是Node以及对应的框架nest。
  • 从这个方面来说，整个前端是完全离不开JS的(后端有很多语言，前端只有JS)，而且CSS现在有很多的UI组件库封装得其实很好，导致我们实际编写CSS的部分其实很少，大多数还都是和JS打交道
  • 前端发展的历程中，一开始的前端程序员被戏称为切图仔，甚至很多人压根不认为写前端的是程序员。而JS的不断发展最终打破了这个质疑，前端的繁荣离不开JS

• JavaScript是前端万丈高楼的根基，前端的未来依然是JavaScript

  • 前端行业在近几年快速发展，并且开发模式、框架越来越丰富。但是不管我们学习的是Vue、React、Angular，包括jQuery，以及一些新出的框架。他们本身都是基于JavaScript的，使用他们的过程中都必须好好掌握JavaScript。所以JavaScript是我们前端万丈高楼的根基，无论是前端发展的万丈高楼，还是我们筑建自己的万丈高楼
  • 在工作中无论使用什么样的技术，比如Vue、React、Angular、uniapp、taro、ReactNative。也无论做什么平台的应用程序，比如pc web、移动端web、小程序、公众号、移动端App。它们都离不开JavaScript，并且深入掌握JavaScript不仅可以提高我们的开发效率，也可以帮助我们快速解决在开发中遇到的各种问题。所以往往在面试时（特别是高级岗位），往往会考察更多面试者的JavaScript功底
  • 在可预见的前端的未来中，我们依然是离不开JavaScript的。目前前端快速发展，无论是框架还是构建工具，都像雨后春笋一样，琳琅满目。而且框架也会进行不断的更新，比如vue3、react19、vite5、TypeScript5.x。前端开发者面对这些不断变化的内容，往往内心会有很多的焦虑，但是其实只要我们深入掌握了JavaScript，这些框架或者工具都是离不开JavaScript的

• 通过刚才对依赖JS技术的探讨，我们可以管中窥豹的看到，依赖JS的各种技术非常繁多，形成了一个健康向上的生态链

  • 前端的技术迭代发展非常快，说明活力十足，但同时也意味着，我们如果只学"形"的话，是绝对学不完的，因为内容实在太多了，我们的热情会逐渐消磨在这条看不见结尾的歧路上
  • 而在本系列文章中，我们会深入JS中作为基石，也就是"象"的那一部分内容。这是很多人所逃避的问题，一旦遇到出乎意料的行为就认为语言本身有缺陷，进而把相关的特性加入黑名单当中，久而久之就排除了这门语言的多样性，人为地使它变得不完整、不安全
  • 了解真相，才能获得真正的自由。只有知情的情况下，才可以自主地选择对我们最有利的行动方向，而不是被语言所误导或操控

2.1. 著名的Atwood定律

• Stack Overflow的创立者之一的 Jeff Atwood 在2007年提出了著名的 Atwood定律：
  • Any application that can be written in JavaScript, will eventually be written in JavaScript.
  • 任何可以使用JavaScript来实现的应用都最终都会使用JavaScript实现

图1-2 Atwood定律

2.2. JavaScript的广泛应用

• JS涉及到后端的内容是隐藏在页面下的数据处理，我们不容易看见
  • 但其他的四个部分，都是已经涉及到我们生活中的方方面面了
  • 同时在以下这么多的技术当中，从Web开发为起点，React、Vue、Angular这三大框架都依赖于JS
  • 而移动端、小程序端、桌面应用开发不是基于原生就大多依赖于这三大框架来进行开发的，到最后，相当于强依赖于JS这门核心技术

表1-1 JavaScript应用领域

分类	技术
Web开发	JavaScript, React开发, Vue开发, Angular开发
移动端开发	React Native, Weex
小程序开发	微信小程序, 支付宝小程序, uniapp, Taro
桌面应用开发	Electron, 编辑器VSCode
后端开发	Node.js, Express, Koa, Egg.js,Nest.JS

2.2.1 依赖Vue与React的技术

• Vue系列技术

  • Vue框架：用于构建用户界面的渐进式框架，核心库只关注视图层
  • Weex：阿里巴巴开发的跨平台移动应用框架，支持使用Vue.js语法来开发
  • uni-app：使用Vue.js开发所有前端应用的框架，覆盖网页、移动应用和小程序，写一套代码可以到处用

• React系列技术

  • React框架：由Facebook开发的用于构建用户界面的JavaScript库，现由Mate进行接管

  • React Native：使用React技术开发原生移动应用的框架，用JavaScript和React编写代码

  • Taro（当使用React作为开发框架时）：支持使用React来开发微信小程序、Web应用、React Native等

2.2.2 桌面应用开发

• 最近植物大战僵尸杂交版很火爆，潜艇伟伟迷(作者)为爱发电多年，得到市场和用户的认可
  • 该游戏的打包构建如图1-3可以看出是基于Webpack，这是一个现代 JavaScript 应用程序的静态模块打包器，现在主流的项目都会使用脚手架，而脚手架是内置打包器的，Webpack是其中的佼佼者。虽然Vite是未来的趋势，但仍有大量的项目在使用Webpack，是当今开发现代 Web 应用的强大工具之一
  • 形成桌面程序所依靠的，很有可能就是Electron，换言之，这是一款通过前端开发的游戏
  • 掌握了JS，没准我们也能够做到这一点，对此会不会有一点的心动

图1-3 植物大战僵尸杂交版 - 打包构建

2.3. JavaScript中让人迷惑的知识点

• 原型链等JavaScript核心概念对初学者而言可能显得抽象且难以掌握，市面上相关的教程又少且不全面，使得学习过程倍感艰难。即便是Vue的创始人尤雨溪，在初次面试时也因不熟悉原型链而遇到挑战。然而，他通过坚持不懈地学习《JavaScript权威指南》（又称“犀牛书”），最终不仅深入理解了这一概念，还开发了广受欢迎的前端框架Vue。

• 如图1-4这些知识点之所以难学，主要是因为它们的抽象性。抽象思维能力是理解这些概念的关键，它要求我们能够从表象中提炼出深层次的本质。虽然这一学习过程看似艰难，但利用前人的研究成果和当代技术，如GPT4等人工智能工具，可以有效降低学习难度，加速我们的学习进程

图1-4 让人迷惑的技术

三、TypeScript会取代JavaScript吗？

TypeScript 的存在是为了增强 JavaScript 的功能，而不是替代它

• TypeScript只是给JavaScript带来了类型的思维
  • 因为JavaScript本身长期是没有对变量、函数参数等类型进行限制的
  • 这可能给我们的项目带来某种安全的隐患
• 这几年有很多的第三方库放弃了TypeScript，转投回了JS，在社区中，重新掀起了一场还要不要使用TypeScript的讨论风波
  • 因为TypeScript有时候会被戏称为AnyScript，也就是定义的类型全是Any，这样其实就跟JS没有任何的区别了
  • 所以代码的质量，有时候还是靠人，而不是依靠一门语言所能够解决的事情。在质量达标的基础上，TS会是一门增加当前工作量，但造福后者的技术，有良好代码提示对于接收项目的程序员来说只能说真香，运用越是广泛的库，对此要求就会越高
  • 但不管如何说，TS和JS都是非常优秀的语言，在去进阶掌握TS的时候，先掌握JS是有必要的，因为TS是建立在JS的基础之上去加强，而不是新的一门语言

3.1. JS的发展历程

• 在之后的JavaScript社区中出现了一系列的类型约束方案：
  • 2014年，Facebook推出了flow来对JavaScript进行类型检查
  • 同年，Microsoft微软也推出了TypeScript1.0版本
  • 他们都致力于为JavaScript提供类型检查，而不是取代JavaScript
• 并且在TypeScript的官方文档有这么一句话：源于JavaScript，归于JavaScript！
  • TypeScript只是JavaScript的一个超集，在它的基础之上进行了扩展
  • 并且最终TypeScript还是需要转换成JavaScript代码才能真正运行的
• 当然我们不排除有一天JavaScript语言本身会加入类型检测，那么无论是TypeScript，还是Flow都会退出历史舞台JavaScript是一门编程语言
  • 是否会走到这一步，还是一件需要较为漫长时间来验证的事情，因为在自由度和严谨度上面所需要权衡与取舍的事情是很多的

3.2. JavaScript是一门编程语言

• 为什么这里要强调JavaScript是一门编程语言呢？这不是大家都知道的内容吗？
  • 但其实编程语言之间还有细分的，更准确的描述：JavaScript是一门高级的编程语言
• 那么有高级编程语言，就有低级编程语言，从编程语言发展历史来说，可以划分为三个阶段：
  1. 机器语言：1000100111011000，一些机器指令(二进制)
  2. 汇编语言：mov ax,bx，一些汇编指令
  3. 高级语言：C、C++、Java、JavaScript、Python等...
• 但是计算机它本身是不认识这些高级语言的，所以我们的代码最终还是需要被转换成机器指令：

图1-5 编程语言发展历史

四、编程语言之间的不同之处

• 什么是机器语言?什么是汇编语言？什么是高级语言？都有什么不同之处吗？

4.1. 机器语言

机器语言是计算机的基础指令集，直接由计算机的中央处理单元（CPU）执行。它完全是由二进制代码组成的，如11010011等，这些指令对计算机硬件具有直接控制作用

• 硬件依赖性强：基于特定硬件设计的，不同的处理器有不同的机器语言

• 难以理解和使用：由于其全部由0和1组成，我们这些编程者难以编写和调试，该语言的初衷就是要给机器看而不是给人看的。是处于最底层的内容，机器所理解的成本最低

4.2. 汇编语言

汇编语言是比机器语言略高一级的低级语言，它使用助记符（如MOV、ADD）代替二进制操作码，并通过符号地址代替具体的内存地址来引用数据

• 易于理解：相比机器语言，汇编语言使用助记符，相对于机器语言来说更易于人类理解和记忆

• 仍需转换：但通过汇编语言编写的程序需要通过汇编器转换为机器语言才能被CPU执行

• 硬件依赖性：虽然比机器语言更易于理解和使用，但汇编语言却依赖于特定的硬件平台

这是较为早期的写法，难度其实并不低，现在也很少有人会去写这类代码了，但这依旧是人类计算机历史上的里程碑。如图1-6，雷军以前写的代码就是汇编语言的，感兴趣的可以去微博考古

图1-6 雷军编写汇编代码

4.3. 高级语言

高级语言是更接近人类语言的编程语言，如C、C++、Java、JavaScript、Python等。它们提供了丰富的语法和结构，编程更加直观和容易管理，逻辑上与人类的思考方式是相近的

• 高度抽象：隐藏了硬件的复杂性，程序员可以专注于解决问题而不是管理硬件细节

• 可移植性：大多数高级语言设计为与平台无关，同一程序在不同的系统上运行只需少量修改或不需修改

• 需要解释或编译：高级语言编写的程序需要通过编译器或解释器转换为机器语言，才能被计算机执行，而越接近底层的语言，性能和效率在一定程度上就越高。因为在转化为机器语言中所需要优化的步骤和转换层次就越少

而高级语言正如上面所总结的第三点，语言之间也区分为：

（1）编译型语言：C、C++、Java

（2）解释型语言：JavaScript、Python

• 编译型语言可以把代码直接编译为可执行文件，从电脑中可以直接打开执行，不依赖其他内容
  • Java的立场比较模糊，它是先转化为字节码，再转化为机器码(这个概念叫做JIT)
• 解释型语言是边读取代码边进行编译，之后再执行

五、文章课程思维导图

• 我们该系列内容将会以开源视频+文章的方式，辅助大家进行学习，结构清晰，量大管饱，内容不过时

  • 不管是查缺补漏，还是从头开始学，都是非常具备价值的

• JS高级系列内容分为八大块，分别为：

  （1）JavaScript运行环境

  （2）JavaScript作用域和函数

  （3）JavaScript面向对象

  （4）ES6-ES15新特性讲解

  （5）JavaScript异步处理

  （6）模块化和包管理工具

  （7）JavaScript特性补充(Proxy与Reflect等)

  （8）手写工具案例系列

• 具体细节如图1-8

图1-8 JavaScript高级思维导图

六、学习引导

• 视频+文章的方式虽然已经能够把学习门槛拉得很低了，但在接下来的学习当中，必然是一场长途马拉松，自己一个人学习也许难以坚持，不妨多和同行者进行交流，我们会提供微信交流群供大家来进行讨论，以免形成闭门造车的负面影响，思想的碰撞会让我们的理解更加深入

  • 学习JS高级之前，如果觉得较为晦涩，在群里我们也提供网盘形式的JS基础视频(coderwhyban'b)来让大家过渡

• 在学习的过程当中，也可以辅助书籍进行阅读。不管是上面所提到的犀牛书，还是红宝书以及小黄书，都是非常适合我们阅读的经典书籍

  （1）犀牛书：《JavaScript权威指南》

  （2）红宝书：《JavaScript高级程序设计》

  （3）小黄书：《你不知道的JavaScript》上中下卷，共三本

• 使用时代的潮流：AI，作为人类当下的最高结晶之一，AI拥有着人类积累多年的数据作为支撑，足以充当我们学习中的老师，一个不会疲倦、秒回、不用担心问的问题太过简单且知识渊博的回答者，是以往难以奢求的条件

  • 前提是掌握正确的提问方式，这需要我们对自己的问题描述得足够精准，才能得到足够的反馈
  • 对此，我推荐一本开源的书籍供大家参考：提问的智慧 (github.com)

图1-7 《提问的智慧》目录

• 既然AI这么好用，让我们的问题得以迅速解决，那我们的问题会越来越少吗？

  • 如图1-8是今年的高考语文作文题，是一个很好的思考角度

  • 我认为不会，首先问题想要解决，得先提高提问的水平。但能够做到这一点的话，其实问题基本上都可以解决，只是AI加快了解决的速度，是一个很好的辅助工具

    但随着AI回答的使用泛滥，已经出现AI引用AI内容的情况，每一次引用都会产生一定的偏差度，等引用链足够长，内容的扭曲度将会达到我们无法接受的程度，这不是一个好事。因为好的思考回答，会被淹没在广阔的AI海域之中

  • 那你是怎么看的呢？不妨来群里和小伙伴们一起探讨一下吧！

图1-8 2024语文高考作文题目

后续预告

• 在接下来的章节中，我们就会开始进入JS的学习当中，了解浏览器的渲染过程，认识JavaScript引擎
  • 以及什么是浏览器内核，浏览器是如何解析页面的？
  • 这些隐藏在表面使用之下的内容，都会是什么样子的呢，下一章就让我们一起来探索吧
• JS高级系列的文章可预见的会很长，这既是对我一次考验，也是对大家学习的一次考验。我相信大家都能走完这趟较为漫长的学习之路，渡过了此系列，后面的前端道路将会轻松很多
• 后续JavaScript高级知识技术会持续更新，如果喜欢我们的文章，欢迎关注、点赞、转发、评论，你们的支持是我们最大的动力