前端进阶笔记

发表于 | 更新于: | 分类于

前端进阶笔记

夯实基础，日常笔记，点滴积累，进阶提升。（长期维护更新）

一、JS 事件机制 Event Loop

1. 几个概念

谈到事件机制首先弄清楚主线程，执行栈， 任务队列这几个概念。

主线程：运行 JS 代码。JS 的单线程针对的是单一的主线程，不是只能有一个线程。

执行栈：关于执行栈的概念结合执行上下文来看

任务队列 Task Queue：即队列，是一种先进先出的数据结构

三者的关系是：主线程要执行的都在执行栈里，执行栈里的内容是从任务队列里拿过来的。

2. 关于任务

任务可以划分为宏任务和微任务。

宏任务（MacroTask）：整个 script、 setTimeout、 setInterval、 setImmidiate(浏览器暂时不支持，只有 IE10，但是在 nodejs 中常用到)、I/O、UI Redering。

微任务（MicroTask）：Promise、Async/Await(底层就是 Promise)、Process.nextTick (node 独有)、MutationObserver。

3. 事件循环的进程模型
  • 执行栈一开始认为是空，将宏任务: 整体的 script 压入栈执行。
  • 执行过程中遇到同步任务按序一步一步执行，遇到异步任务注册异步任务的回调函数放到对应的任务队列中（这里有宏任务队列，微任务队列）。这样就产生了新的 macro-task 和 micro-task。
  • script 中代码执行完，将 script 出栈，也是一次宏任务出栈 。
  • 检测任务队列中是否有微任务，清理微任务队列。这里需要注意的是宏任务出队是一个一个出，而微任务是一队一队出。
  • 更新页面渲染
  • 检测是否有 web worker 任务，处理 web worker。
  • 上述过程循环往复，直到两个队列都清空。
4. 总结

主线程首先会执行一个宏任务，当此宏任务执行完之后，会去查看是否有微任务队列。

如果有，那就清空整个微任务队列。

如果没有，会去查看宏任务队列，取宏任务队列中的第一个去执行，执行宏任务的过程中遇到微任务，依次加入微任务队列等待下次执行。
(当然执行微任务的时候也会产生宏任务，主线程会放入宏任务队列)。

栈空后，再次读取任务队列中的任务，以此类推。

二、如何理解面向对象

1. 面向对象定义

面向对象编程（英文 Object Oriented Programming），所以也叫做 OOP。我们知道早期的计算机编程是基于面向过程的，
因为早期计算机处理的问题都不是很复杂，所以一个算法，一个数据结构就能够很好的解决当时的问题。

但是随着计算机技术的发展，要处理的计算机问题越来越复杂。为了更好的解决这样的问题，就出现了一切皆对象的面向对象编程，
把计算机中的东西比喻成现实生活中的一样事物，一个对象。那现实生活中的对象都会有属性跟行为，
这就对应着计算机中的属性和方法（函数）。

2. OOP 的三大特征
  • 封装
  • 多态
  • 继承
封装

我写了这个 A(double i)这个函数，我想要给别人用，那么我就告诉他这是求绝对值的，
我可能用第一种方法实现也可能用第二种方法实现，不过你不用管，你用就行了。

当然因为这函数是我自己写的，我当然知道里面怎么实现，只是别人不知道而已，
不过别人也没必要知道，能用好用就行了，这样别人也能更专注于自己的代码编写。

继承

继承正如其名，继承上一代的东西。继承了某对象将拥有该对象的属性和方法，并且还可以自己拓展添加自己的属性和方法。

可以增加代码的可重用性，拓展，修改。在想要拓展功能的时候不必重写整个对象，只需继承了然后在写新的属性，方法就好了。

你们会发现在一些 OOP 语言的类库文档里面就会发现满满的继承特性，像 java 和 C#这些 OOP 的官方类库你会看到类与类之间满满的层级结构，
相互继承相互依赖。

多态

多态性简单的说就是能够去重写继承对象的方法，被利用的最多的例子莫过于 ToString()方法了，我们查看语言的类库就可以知道，
其实可以知道每个类（对象）都有 ToString()方法，作用通常是输出对象的字符串信息。
因为父对象的方法不能满足子对象的需求，所以在子对象中对父对象方法进行重写，以满足子对象输出名字的需求。

多态也正如其名，
具有多种形态，多态也体现了灵活性。多态对已存在的代码具有可替换性。多态也是可以说是父对象提供一个接口，
然后让各子类来根据实际情况进行完善。

三、如何理解函数式编程

1. 什么是函数式编程

函数式编程是一种编程范式，我们常见的编程范式有命令式编程，函数式编程，逻辑式编程，常见的面向对象编程和面向过程编程都是命令式编程。

命令式编程是面向计算机硬件的抽象，如变量(抽象存储单元)，表达式(算数运算与内存读写)，控制语句(跳转指令)，最终得到一个冯诺依曼机的指令序列。

函数式编程的基础模型来源于 λ 演算，是阿隆佐思想的在现实世界中的实现。不过不是全部的 lambda 演算思想都可以运用到实际中，
因为 lambda 演算在设计的时候就不是为了在各种现实世界中的限制下工作的(毕竟是数学家捣鼓出来的东西)。
目前的函数式编程语言基本都是翻译为冯诺依曼指令实现的。

2. 函数式编程概念
  • 变量:

命令式: 代表存储可变状态的单元(内存地址)，相当于地址的别名 x = x + 1

函数式: 代表数学函数中的变量，映射到某个值，相当于值的别名 2x = 4

  • 函数:

命令式: 描述求解过程(怎么做)，本质上是一系列的冯诺依曼机指令，can do anything

函数式: 数学概念里的函数，描述映射(计算)关系(做什么)，也称为纯函数/无状态函数

0%