JS理论要点

JS事件循环机制

  • 同步任务队列
  • 异步任务队列
    • 宏任务包含有:setTimeout, setInterval, setImmediate, I/O, UI rendering
    • 微任务包含有:process.nextTick, promise.then, MutationObserver
  1. 同步和异步任务分别进入不同的执行场所,同步的进入主线程,异步的进入Event Table并注册函数
  2. 当指定的事情完成时(重点),Event Table会将这个函数移入Event Queue中
  3. 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行
  4. 上述的过程会不断的重复,也就是常常说的Event Loop(事件循环)。

js面向对象的理解

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

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

  • 进程:是cpu分配资源的最小单位;(是能拥有资源和独立运行的最小单位)
  • 线程:是cpu调度的最小单位;(线程是建立在进程的基础上的一次程序运行单位,一个进程中可以有多个线程)

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

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

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

js垃圾处理机制

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

  1. 有一组基本的固有可达值,由于显而易见的原因无法删除,这些值称为根。例如:
  • 本地函数的局部变量和参数
  • 当前嵌套调用链上的其他函数的变量和参数
  • 全局变量
  • 还有一些其他的,内部的
  1. 如果引用或引用链可以从根访问任何其他值,则认为该值是可访问的

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

  1. 什么是垃圾?
    一般来说没有被引用的对象就是垃圾,就是要被清除, 有个例外如果几个对象引用形成一个环,互相引用,但根访问不到它们,这几个对象也是垃圾,也要被清除。
  2. 如何检垃圾?
    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. 实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性。(新实例不会继承父类实例的属性!)
  • 缺点
    1. 新实例无法向父类构造函数传参。
    2. 继承单一。
    3. 所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!)
  1. 借用构造函数(类式继承):用.call()和.apply()将父类构造函数引入子类函数(在子类函数中做了父类函数的自执行(复制))

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

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

  1. 组合式继承(组合原型链继承和借用构造函数继承)(常用) 结合了两种模式的优点,传参和复用
  • 特点
    1. 可以继承父类原型上的属性,可以传参,可复用。
    2. 每个新实例引入的构造函数属性是私有的。
  • 缺点:调用了两次父类构造函数(耗内存),子类的构造函数会代替原型上的那个父类构造函数。
  1. 原型式继承
    • 重点:用一个函数包装一个对象,然后返回这个函数的调用,这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。
    • 特点:类似于复制一个对象,用函数来包装。
    • 缺点
      1. 所有实例都会继承原型上的属性。
      2. 无法实现复用。(新实例属性都是后面添加的)
  2. 寄生式继承
  • 重点:就是给原型式继承外面套了个壳子。
  • 优点:没有创建自定义类型,因为只是套了个壳子返回对象(这个),这个函数顺理成章就成了创建的新对象。
  • 缺点:没用到原型,无法复用。
  1. 寄生组合式继承(常用)
  • 寄生:在函数内返回对象然后调用
  • 组合: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)

闭包

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。在js中,函数即闭包,只有函数才会产生作用域的概念

闭包有三个特性:

  1. 函数嵌套函数
  2. 函数内部可以引用外部的参数和变量
  3. 参数和变量不会被F垃圾回收机制回收

new操作符具体干了什么呢?

  1. 创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
  2. 属性和方法被加入到 this 引用的对象中。
  3. 新创建的对象由 this 所引用,并且最后隐式的返回 this 。

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14822.html

发表评论

登录后才能评论