1. JavaScript 中的垃圾回收机制（GC）

1.1 垃圾回收相关概念

① 什么是垃圾

1. 用不到的数据，就是垃圾
2. JavaScript 中没有被引用的对象，就是垃圾对象

② 什么是垃圾回收

1. 销毁垃圾对象，释放内存，就是垃圾回收
2. 需要手动垃圾回收的编程语言： C、C++
3. 自动垃圾回收的编程语言： Java、Python、JS 等

③ 垃圾没有及时回收的后果

垃圾没有及时回收造成内存泄漏，越来越多的内存泄漏会导致内存溢出

内存溢出： 需要使用内存的时候，内存空间不够。

内存泄漏： 垃圾没有回收称为内存泄漏。

④ JavaScript 垃圾回收的常见算法

- 引用计数
- 标记清除

1.2 引用计数

① 原理

- ① 对象有个引用标记
- ② 如果对对象进行了引用 +1
- ③ 取消了对象对象的引用 -1
- ④ 当引用标记=0的时候，变为垃圾对象，并删除

② 优缺点：

- 优点： 及时清除垃圾对象
- 缺点： 互相引用的对象导致无法被回收（内存泄漏）

1.3 标记清除

① 原理

浏览器不停地进行标记清除，每一轮分为标记和清除两个阶段
- 标记阶段：从根对象出发，每一个可以从根对象访问到的对象都会被添加一个标记，于是这个对象就被标识为可到达对象。
- 清除阶段：垃圾回收器，会对内存从头到尾进行线性遍历，如果发现有对象没有被标记为可到达对象，那么就将此对象占用的内存回收。
该轮结束，将原来标记为清除，以便进行下一轮标记清除。

② 优缺点

- 优点：  不会内存泄漏
- 缺点：  需要深度递归，耗费资源较多

2 执行上下文和执行栈

2.1 执行上下文

① 全局执行上下文

1. 打开页面，js代码执行之前，创建 window 对象，确定 window 就是全局执行上下文对象
2. 对全局执行上下文对象进行预处理① 找到使用 var 的变量声明语句，给全局执行上下文对象添加属性，但不赋值② 找到使用 function 的函数声明语句，给全局执行上下文对象添加属性，值是函数③ 给 this 进行赋值，将全局执行上下文对象赋值给 this
3. 正式执行全局代码
4. 页面关闭，全局执行上下文对象销毁

② 函数内的执行上下文

1. 调用函数的时候，函数内代码执行之前，创建该函数的执行上下文对象；
2. 对函数内执行上下文对象进行预处理① 将形参作为函数内执行上下文对象的属性，并赋值② 给函数内执行上下文对象添加属性arguments，并赋值③ 找到函数内使用 var 的变量声明语句，给函数内执行上下文对象添加属性，不赋值④ 找到函数内使用 function 的函数声明语句，给函数内执行上下文对象添加属性，值是函数④ 给 this 进行赋值，将调用该函数的对象赋值给 this
3. 正式执行函数内的语句
4. 函数调用结束，函数内执行上下文对象被销毁

注意： 函数每调用一次，就创建一个执行上下文对象。

2.2 执行栈

栈结构： 是一种数据存储结构，特点先进后出，后进先出。

**执行
栈：**执行上下文对象创建之后，要放入执行栈，放入执行栈才能执行。

2.3 作用域和执行上下文的关系

区别：

1. 变量的作用域在函数声明的时候就确定了，是静态的
2. 执行上下文对象函数调用的时候才创建，每调用一次就创建一次，调用结束会销毁，是动态的

联系：

执行上下文对象从属于所在的作用域：
全局执行上下文对象作用域是全局； 函数内执行上下文对象作用域是所在函数。

3. 闭包

3.1 什么是闭包？

1）简单讲，闭包就是指有权访问另一个函数作用域中的变量的函数。
2）MDN 上面这么说：闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。

3.2 如何产生闭包

1. 函数A中嵌套函数B
2. 函数B中访问函数A中定义的数据（上层作用域的变量）
3. 实现从函数A的外部使用函数B方式一： 将函数B作为返回值方式二： 将函数B赋值给全局对象的属性方式三： 将函数B作为一个事件的回调函数

function A() {// 定义数据var num01 = 100, num02 = 200;// 函数Bfunction B(){// 函数B中可以访问到函数A中的数据console.log(num01 + num02);}// 方式一 函数B作为返回值return B;// 方式二 函数B赋值给全局对象的属性// window.func = B;// 方式三 函数B作为事件的回调函数// document.onclick = B;
}

3.3 闭包和作用域

1. 可以访问上层作用域的数据
2. 作用域只与函数声明的位置有关，与调用位置无关

3.4 闭包和垃圾回收

闭包延长了数据的生命周期

3.5 闭包的缺点

闭包会让数据常驻内存，增加了内存溢出的风险

3.6 闭包的应用

 for (var i = 0; i < tabNavItems.length; i ++) {(function(index){tabNavItems[index].onclick = function() {// 排他// 把所有的tabNav都取消选中  把所有的tabContent隐藏for (var j = 0; j < tabNavItems.length; j ++) {tabNavItems[j].classList.remove('active');tabContentItems[j].classList.remove('active');}// 当前点击的选项卡导航添加 active 类名 表示当前选中this.classList.add('active');// 与当前tabNav对应的tabContent要显示出来tabContentItems[index].classList.add('active');};})(i);}

4. 对象高级

4.1 原型链总结

① 原型和构造函数

1. 构造函数.prototype 可以获取到该构造函数实例的原型
2. 构造函数相同的对象，原型也相同

② __proto__ 和 prototype 属性

1. 函数类型的对象__proto__ : 获取的是自己的原型  prototype: 获取的该构造函数的实例的原型2. 其他类型的对象__proto__： 获取的是自己的原型没有 prototype 属性

③ construct 属性

本身具有constructor属性的对象，会作为其他对象的原型，constructor的值就是其他对象的构造函数

④ 原型链

// 自定义的构造函数
function Foo() {}// Foo 的两个实例
var f1 = new Foo();
var f2 = new Foo();// Object的两个实例
var o1 = {};
var o2 = {};

f1、f2 -> Foo.prototype -> Object.prototype
o1、o2 -> Object.prototype
Foo、Object、Function -> Function.prototype -> Object.prototype

特殊现象（不是规则，不要记，要理解）

1. Object 的原型是 Function.prototype, Function.prototype 的构造函数是 Object
2. Function 的构造函数是 Function， 所以 Function.prototype === Function.__proto__

4.2 面向对象继承

① 面向对象编程语言的继承规则

// 父类（对应的就是js中的构造函数）
class Foo{private name;private age;public getInfo() {}
}// 子类
class Product extends Foo {private address;
}// 子类
class Shopcart extends Foo {}

② JS 中继承关系的特点（原型继承特点）

1. 对象可以继承它的原型上的属性
2. 对象的构造函数、它的原型的构造函数也可以描述成子类、父类的关系

1. 对象a的原型是对象b, 对象a的构造函数是子类，对象b的构造函数是父类子类的实例以父类的实例为原型
2. 一个对象只能有一个原型，原型可以作为多个对象的原型一个父类可以有多个子类， 一个子类只能有一个父类

③ 实现JS中构造函数和构造函数之间继承(子类 父类)

原理：

1. 设置子类的实例的原型是父类的一个实例
2. 设置子类的实例的原型的 constructor 属性的值是子类

function A(){}
function B(){}// B作为子类 A作为父类 
// 设置B的实例的原型是 A的一个实例
B.prototype = new A();
// 设置 B.prptotype 的 constructor 属性
B.prototype.constructor = B;

Array是子类 Object是父类
1. Array的实例的原型 是Object的一个实例
2. Array.prototype.constructor 是 Array

实现：

 // 定义商品类 
function Product(price, nums) {// 给实例设置属性this.price = price;;this.nums = nums;
}
Product.prototype.discount = function(num) {this.price *= num;
};
Product.prototype.buy = function() {this.nums -= 1;
}// 汽车类商品
function CarProduct(price, nums, speed) {// this.price = price;// this.nums = nums;// 将父类规定的属性添加到了 CarProduct 的实例上Product.call(this, price, nums);this.speed = speed;
}   
// 设置  CarProduct 的实例的原型是 Product 的一个实例
CarProduct.prototype = new Product();
// 设置 CarProduct 的实例的的原型的 constructor 属性的值是  CarProduct
CarProduct.prototype.constructor = CarProduct;
// 设置方法
CarProduct.prototype.driver = function() {console.log('这辆车可以被驾驶！');
}

5 单线程和事件轮询机制

5.1 进程和线程

进程：程序的一次执行, 它占有一片独有的内存空间线程：CPU的基本调度单位, 是程序执行的一个完整流程进程和线程：* 一个进程中一般至少有一个运行的线程: 主线程。* 一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的。* 一个进程内的数据可以供其中的多个线程直接共享。* 多个进程之间的数据是不能直接共享的。

5.2 JS 单线程运行

1. 如何证明JavaScript是单线程执行？设置了定时器，定时器的回调函数会等到主线程空闲且时间到执行；如果主线程没有空闲下来，即使定时器的时间到了，回调函数也不会执行（等到主线程空闲）。2. 为什么JavaScript选择单线程？多线程会有线程调度以及线程开启关闭的开销JavaScript主要在浏览器端操作DOM完成特效，如果不是单线程，不好解决页面渲染的同步问题。

5.3 同步任务和异步任务

同步任务：
按照顺序，一步一步地执行，执行完上一个任务再执行下一个任务异步任务：
需要满足条件且主线程空闲才可以执行，在等待异步任务满足条件的过程中，同步任务继续执行，  异步任务会在同步任务完成后执行
异步任务都是回调函数的形式， 回调函数不一定都是异步任务JS中的异步任务有哪些：
1. 定时器的回调函数
2. DOM事件的回调函数
3. Ajax的回调函数
4. Promise的回调涵数
....

5.4 事件轮询机制

1、执行栈（调用栈）主线程里就是一个执行栈，所有的任务都要放入执行栈执行2、异步任务管理模块判断异步任务是否满足了执行条件，分为：定时器管理模块DOM事件管理模块Ajax管理模块...如果满足了异步任务管理模块，会将异步任务放入回调队列，等待执行3. 回调队列队列是一种数据存储结构，特点是先进先出，后进后出回调队列存放等待执行的异步任务4. 事件轮询模块时刻监听主线程（执行栈）是否空闲，一旦空闲，从回调队列中取出异步任务，放入主线程执行

6 JS 实现多线程（了解）

Worker 构造函数
Worker.prototype.postMessage()  向分线程发送数据
Worker.prototype.onmessage      监听分线程的消息