JS理论要点-一一网

JS事件循环机制

同步任务队列
异步任务队列
- 宏任务包含有：setTimeout, setInterval, setImmediate, I/O, UI rendering
- 微任务包含有：process.nextTick, promise.then, MutationObserver

同步和异步任务分别进入不同的执行场所，同步的进入主线程，异步的进入Event Table并注册函数
当指定的事情完成时（重点），Event Table会将这个函数移入Event Queue中
主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行
上述的过程会不断的重复，也就是常常说的Event Loop（事件循环）。

js面向对象的理解

对象：万物皆对象
类：对对象的细分
实例：类中具体的事物

js为什么是单线程,而不是多线程

进程：是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小单位）
线程：是cpu调度的最小单位；（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）

浏览器是多进程的
放在浏览器中，每打开一个tab页面，其实就是新开了一个进程，在这个进程中，还有ui渲染线程，js引擎线程，http请求线程等。所以，浏览器是一个多进程的。

JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

js垃圾处理机制

内存管理：“可达性” ，指以某种方式可访问或可用的值，它们被保证存储在内存中。

有一组基本的固有可达值，由于显而易见的原因无法删除,这些值称为根。例如:

本地函数的局部变量和参数
当前嵌套调用链上的其他函数的变量和参数
全局变量
还有一些其他的，内部的

如果引用或引用链可以从根访问任何其他值，则认为该值是可访问的。

垃圾回收器，它监视所有对象，并删除那些不可访问的对象

什么是垃圾?
一般来说没有被引用的对象就是垃圾，就是要被清除，有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。
如何检垃圾?
1. 标记-清除算法 Mark-Sweep GC
2. 垃圾回收器获取根并“标记”(记住)它们。
3. 然后它访问并“标记”所有来自它们的引用。
4. 然后它访问标记的对象并标记它们的引用。所有被访问的对象都被记住，以便以后不再访问同一个对象两次。
5. 以此类推，直到有未访问的引用(可以从根访问)为止。
6. 除标记的对象外，所有对象都被删除。
```
 ![标记删除](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/502fe53626d44e998b49b24ae69d5176~tplv-k3u1fbpfcp-zoom-1.image)
复制代码
```
1. 标记-压缩 Mark-Compact
2. 引用计数 Reference Counting
3. GC 复制算法
4. 保守式GC
5. 分代回收
6. 增量式GC

js继承

想要继承，就必须要提供个父类（继承谁，提供继承的属性）

原型链继承:让新实例的原型等于父类的实例。

特点
1. 实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！）
缺点
1. 新实例无法向父类构造函数传参。
2. 继承单一。
3. 所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）

借用构造函数（类式继承）:用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））

– 特点：
1. 只继承了父类构造函数的属性，没有继承父类原型的属性。
2. 解决了原型链继承缺点1、2、3。
3. 可以继承多个构造函数属性（call多个）。
4. 在子实例中可向父实例传参。

– 缺点：
1. 只能继承父类构造函数的属性。
2. 无法实现构造函数的复用。（每次用每次都要重新调用）
3. 每个新实例都有父类构造函数的副本，臃肿。

组合式继承（组合原型链继承和借用构造函数继承）（常用） 结合了两种模式的优点，传参和复用

特点：
1. 可以继承父类原型上的属性，可以传参，可复用。
2. 每个新实例引入的构造函数属性是私有的。
缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。

原型式继承
- 重点：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。
- 特点：类似于复制一个对象，用函数来包装。
- 缺点：
  1. 所有实例都会继承原型上的属性。
  2. 无法实现复用。（新实例属性都是后面添加的）
寄生式继承

重点：就是给原型式继承外面套了个壳子。
优点：没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象。
缺点：没用到原型，无法复用。

寄生组合式继承（常用）

寄生：在函数内返回对象然后调用
组合：1、函数的原型等于另一个实例。2、在函数中用apply或者call引入另一个构造函数，可传参　
重点：修复了组合继承的问题

// 父类---------------------------
function Person(name){ //给构造函数添加参数
  this.name=name
  this.sayName =function(){
    alert(this.name)
  }
}
Person.prototype.age = 18; //给构造函数添加了原型属性

// 原型链继承---------------------------
function Per(){
  this.name = 'panpan';  
}
Per.prototype= new Person(); //重点
var per1 = new Per();
console.log(per1.age); // 18

// instanceof判断元素是否在另一个元素的原型链上
console.log(per1 instanceof Person); //true
// 借用构造函数继承---------------------
function Con(){
  Person.call(this,'ava'); //重点
  this.age = 21
}
var con1 = new Con()
console.log(con1.name) //ava
console.log(con1.age) //21
console.log(con1 instanceof Person) //false

// 组合原型链继承和借用构造函数继承
function SubType(name){
  Person.call(this,name); //借用构造函数模式
}
SubType.prototype= new Person();  //原型链继承
var sub = new SubType('lian')
console.log(sub.name) //lian  继承构造函数属性
console.log(sub.age) //18    继承父类原型属性

// 原型式继承---------------------------
// 先封装1个函数容器，用来输出对象和承载继承的原型
function content(obj){
  function F(){}
  F.prototype=obj; //继承传入的参数
  return new F() //返回函数对象
}
var sup = new Person();   //拿到父类的实例
var sup1 = content(sup)
console.log(sup1.age) //18 继承父类函数属性

// 寄生式继承----------------------
// 给原型式继承再套个壳子传递参数
function subObject(obj){
  var sub = content(obj)
  obj.name= 'pan';
  return sub
}
//声明后成了可增添属性的对象
var sup2 = subObject(sup)
console.log(typeof subObject) //function
console.log(typeof sup2) //object
console.log(sup2.name) //pan

// 寄生组合式继承---------------------
// 寄生
function content(obj){
  function F(){}
  F.prototype=obj; //继承传入的参数
  return new F() //返回函数对象
}
// content就是F实例的另一种表达
var con = content(Person.prototype)
// con实例(F实例)的原型链继承了父类函数的原型
// 上述更像原型链继承,只不过继承了原型属性

// 组合
function Sub(){
  Person.call(this) // 继承父类构造函数属性
} //解决组合式2次调用构造函数属性的缺点
// 重点
Sub.prototype = con; //继承con实例
con.constructor = Sub;  //一定要修复实例
var sub1 = new Sub();
// Sub实例继承了构造函数属性、父类实例、con的函数属性
console.log(sub1.age)
复制代码