1 数据类型与数值部分

• Null和Undefined的区别：
转化为数值的时候，null ⇒ 0 ，而undefined ⇒ NaN
最初设计的时候只有null没有undefined，但是null属于Object，相当于是一个空对象，它的自动转化使得编程中的错误变的不太好识别，所以加入了新的原始值undefined

• ⚠️typeof NaN 为 number ，NaN表示“非数字”（Not a Number），属于是一个特殊数值，而不是一个数据类型，不等于任何值，包括他本身。所以使用NaN !== NaN 这个特性来判断一个变量是否是NaN,而不是使用typeof会比较合适，判断一个值是否是NaN的方法总共有：
• x !== x 
• Number.isNaN() 仅当值为NaN的时候才会成立
• isNaN() 用于检测当前值为NaN，或者是一个值被转换为数字之后是NaN

2 作用域

什么是作用域？作用域(Scope)是一个范围、区域或者是空间

1.变量作用域分类

2.执行环境 Execution Environment

• 在浏览器中，全局对象window所处的环境➡️全局环境是最外层的执行环境，最先入栈，只有在关闭浏览器的时候才会销毁

• 当函数被调用的时候，函数会被放入一个环境栈(也叫函数调用栈)入栈，指向完毕后弹出栈
• 该环境栈包含此函数自己的执行环境以及他的依赖成员

• 每个执行环境都有一个表示变量的对象 ➡️ 变量对象，这个对象里储存着在当前环境中所有的变量和函数。 全局执行上下文中的变量对象就是全局对象 详细的就不讲了，以后再更新。。。

3.作用域链

• 在JS中，全局作用域是整个作用域的终点

• 注意，作用域链之间的链接都是引用关系，而不是包含关系

• 🔴 函数的作用域在函数定义的时候就决定了，这是因为函数有一个内部属性 [[scope]]，当函数创建的时候，就会保存所有父变量对象到其中，你可以理解 [[scope]] 就是所有父变量对象的层级链，但是注意：[[scope]] 并不代表完整的作用域链

• 形式为：

• 在函数执行时确定变量的作用域，它决定了在当前执行环境中变量的查找顺序 ➡️ 无论函数什么时候调用，函数内部查找变量的顺序都是不变的

• 解释：在JS引擎编译代码时，会根据变量声明的位置将变量绑定到相应的作用域中，这是一种在编译阶段确定变量作用域的规则，也可以认为词法作用域就是定义在词法阶段的作用域。词法作用域是一种静态的作用域，只由变量在代码中所处的位置来决定，而不由调用时的位置决定
• 词法作用域发生在编译阶段的第一个步骤➡️分词/词法分析(Tokenizing/Lexing)中，它有两种可能，分词和词法分析，分词是无状态的，而词法分析是有状态的。一条不用被赋予语义的代码会进行分词，一条代码如果词法单元生成器无法判断是否是个独立的单元，就会进行词法分析，比如var a = 1

4.闭包 closures

• 从书写形式上看可以理解为是：
一个函数可以访问其此法作用域之外的变量
➡️ 从中得到几个关键信息：1️⃣闭包的存在至少有两个函数 2️⃣其中一个函数所需要的变量，并不存在于自己本身的函数作用域中，而是对外部变量的引用

• 从原理上理解： 闭包是依据词法作用域产生的必然结果，根源上起源于词法阶段，是通过变相引用函数的活动对象，导致这个活动对象不能被回收，形成了即使这个引用函数已经执行结束，但是依然可以用【引用】来访问其作用域链的结果，也就是引用的活动对象并不会被销毁

• 保存状态：闭包允许函数捕获并保存其所在作用域的状态。这意味着即使函数执行完成后，闭包仍然可以访问并修改其创建时所捕获的变量。这种机制使得闭包在需要记住某些状态或者在之后使用这些状态时非常有用

• 数据隐藏：通过使用闭包，可以隐藏函数内部的数据。只有在内部函数中才能访问这些数据，这样可以防止外部代码直接修改函数的状态，从而提高了代码的安全性和可靠性

• 简化代码：闭包可以帮助简化代码结构，特别是在涉及到回调函数或者事件处理器的情况下。通过使用闭包，可以避免传递大量的参数，并且可以更方便地管理函数之间的依赖关系

• 函数式编程：在函数式编程中，闭包是一种非常重要的概念。它允许函数作为一等公民进行操作，可以被传递给其他函数，或者从其他函数中返回。这种灵活性使得函数式编程风格更加强大和易于实现。

5.原型链 prototype chains

• 原型是一个对象，它包含了一些属性和方法，可以被其他对象继承

• 原型链是JS中实现继承的机制之一。每个对象都有一个指向其原型对象的内部链接，这个链接被称为原型链。如果在当前对象上找不到某个属性或方法，JS引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶端（Object.prototype），如果找不到，就会返回undefined

• 当创建一个新对象时，新对象会自动继承它的原型对象的属性和方法

• JS中Function和Object是互指的关系，互为对方的实例，原型链的终点是Object.prototype.__proto__ 指向null

• 原型链的作用是实现对象之间的继承关系，允许对象共享属性和方法，读取属性的时候会沿着对象的隐式原型链__proto__来进行查找，而存属性的时候会放到显式原型链上

• 避免在原型对象中添加可变的数据类型，比如数组或者对象，一旦修改了原型对象中的可变数据类型，那么这个原型的所有实例都会受到影响

• 避免直接使用__proto__ 访问对象的原型，因为不同浏览器的实现可能会不同，使用Object.getPrototypeOf 方法来访问对象的原型对象

6.this指向问题

• 函数名是别名

• 函数作为参数传递

• 出现在内置函数中 比如定时器中传入了这个函数

• 函数的赋值

• 词法绑定是指在函数定义的时候就确定this的值，与函数的调用方式无关，是一种静态的绑定，绑定之后在整个生命周期中都不会再更改

• 隐式绑定是指在函数调用的时候，根据调用者确定this的值，是一种动态的绑定方式

• 在事件监听器、回调函数中，this通常指向监听该事件的DOM元素，属于是隐式绑定（如果内部包含普通函数，普通函数自执行之后，内部this还是指向window）

• 显示绑定中，call和apply方法会立即执行函数，bind方法不会立即执行，返回的是一个绑定了指定this值的新函数

• 箭头函数

• 在函数内部使用_this = this

• 使用显式绑定

• 使用new实例化一个对象

3 事件循环event loop

1.并发模型runtime module

• 浏览器进程：主要负责界面的显示、用户交互、子进程管理等

• CPU进程：处理网页中的图像和视频

• 插件进程：负责浏览器中的插件

• 🌟渲染进程：负责网页(具体界面)的呈现和交互

2.渲染主线程的工作方式

3.异步

• 计时完成之后才能执行的任务 — setTimeout、setTnterval

• 网络通信完成后需要执行的任务 — XHR、Fetch

• 用户操作之后需要执行的问题 — addEventListener

4.任务队列的分类与优先级

• 宏任务（MacroTask）:
• 由浏览器发起的、在事件循环中执行的异步任务
• setTimeout
• setInterval
• setImmediate（Node.js）
• I/O（Mouse Events、Keyboard Events、Network Events）
• UI Rendering（HTML Parsing）、MessageChannel

• 微任务（MicroTask）:
• 由 JavaScript 引擎发起、在当前宏任务执行结束后立即执行的异步任务
• Promise().then
• process.nextTick（Node.js）
• MutaionObserver()

 

⚠️ 主线程只取不放

⚠️ 主线程每执行完一个任务就会出栈一个任务，下一个任务再入栈

• 每一个任务都有一个任务类型，同一类型的任务必须在同一个队列，不同类型的任务可以处于不同的队列，在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。比如在有的浏览器中会认为用户的点击是最高优先级任务

• 浏览器必须准备好一个微队列，微队列中的任务优先其他任务执行(随着浏览器复杂度的急剧提升，不再使用宏队列的说法)
• 微队列中主要存放Promise和MutaionObserver，例如

• 在目前的Chrome的实现中，至少包含以下队列
• 延时队列：计时器的回调，优先级中
• 交互队列：用户的操作，优先级高
• 微队列：需要最快执行的任务，优先级最高

5.计时器

4 浏览器的渲染原理

1.渲染流程

• HTML的不同类型的样式表(内部样式表、外部样式表、内联样式表、浏览器默认样式表)会被解析成多个CSSStyleSheets对象，
• 通过以下代码可以在内部样式表，或外部样式表中添加新的CSS规则

2.相关名词

• reflow 回流：
• 当进行了影响布局树的操作之后，会引发layout树的重新计算，这个过程就叫回流。
• 当设置一系列回流指令的时候，这些任务是异步任务，当设置指令需要读取的时候，这个任务就会变成一个同步任务

• repanit 重绘：
• 除了布局之外的样式发生了变化，根据改动的分层信息重新计算了绘制指令，reflow 一定会引起repanit

• Critical Rendering Path 关键渲染路径：根据这些渲染的知识，可以设计方案，提升浏览器的加载性能
 
 

5 属性描述符

• 数据描述符：value、writable

• 访问器描述符： getter/setter

• 可以在getter/setter自定义属性的范围、类型、运算规则等，遇到不符合的可以自定义抛出错误提示

• 不能在getter/setter中调用自己，会引起无限递归

• 可以使用(Object.freeze || Object)(Object.prototype) 来防止添加或者删除对象原型属性(如果freeze可用)

6 函数

1.构造函数和原型链

• 默认的返回值是➡️新创建的实例对象

• 如果手动添加了返回值(return语句)：
• 返回值是基本数据类型的话，真正的返回值还是那个新创建的实例对象
• 返回值是复杂数据类型（对象）的话，真正的返回值是这个对象

 

2.惰性函数

7 类 class

1.类的声明和定义

• 私有属性是实例中的属性，不会出现在原型上(除非显示的定义在其本身this上，否则都是定义在原型上，即定义在class上，与ES5保持一致)，且只能在类的构造函数或方法中创建，在类的构造函数中创建私有变量可以方便统一管理

• 因为类的方法都定义在prototype上面，所以可以通过Object.assign()方法一次向类添加多个方法

• 生产环境中，也可以使用Object.getPrototypeOf()方法来获取实例对象的原型，然后再向其上添加方法/属性，注意不建议使用__proto__属性改写原型

2.类上的访问器属性

3.属性表达式

4.静态成员

4.私有成员

5.继承与派生

• super作为函数调用的时候表示父类的构造函数，用来新建一个父类的实例对象
• 在构造函数中访问 this 之前要先调用 super()，负责初始化 this，不调用就没有自己的this
• super代表父类，但是返回子类的this，所以super内部的this表示子类的实例，super()相当于A.prototype.constructor.call(this)（在子类的this上运行父类的构造函数）
• 只能在子类的构造函数中使用

• super作为对象的时候：
• 在普通方法中，指向父类的原型对象 ➡️ 因为是指向父类原型，所以取不到constructor方法里的属性和方法(构造函数里的属性和方法是绑定在实例上的)
• 在普通方法中，通过super调用父类的方法的时候，方法内部如果有this，指向的是当前所在子类的实例，同理，如果是通过super进行赋值，也是给当前子类的实例属性赋值

• 在静态方法中，指向父类

• 只能在子类中使用，没有显示调用的时候，JS引擎是会默认给子类提供一个空的构造函数的，可以省略