JavaScript重难点解析5（对象高级、浏览器内核与事件循环模型（js异步机制））

本文链接：https://blog.csdn.net/qq_41965041/article/details/118458731

JavaScript重难点解析5（对象高级、浏览器内核与事件循环模型（js异步机制）

对象高级
浏览器内核与事件循环模型（js异步机制）

对象高级

对象创建模式

Object构造函数模式

先创建空Object对象, 再动态添加属性/方法

  var p = new Object()
  p = {} 
  p.name = 'Tom'
  p.age = 12
  p.setName = function (name) {
    this.name = name
  }
  console.log(p.name, p.age)
  p.setName('Bob')
  console.log(p.name, p.age)

对象字面量模式

使用{}创建对象, 同时指定属性/方法。

 var p = {
    name: 'Tom',
    age: 12,
    setName: function (name) {
      this.name = name
    }
  }
  console.log(p.name, p.age)
  p.setName('JACK')
  console.log(p.name, p.age)

前两种方式的代码比较简单易懂，运用较多，但代码重复率比较高。

工厂模式

通过工厂函数动态创建对象并返回

  function createPerson(name, age) { 
    var obj = {
      name: name,
      age: age,
      setName: function (name) {
        this.name = name
      }
    }
    return obj
  }
  var p1 = createPerson('Tom', 12)
  var p2 = createPerson('Bob', 13)

这种方法创建会带来一个很大的问题，创建的对象都为Object类型，没有办法进行区分。

  function createStudent(name, price) {
    var obj = {
      name: name,
      price: price
    }
    return obj
  }
  var s = createStudent('张三', 12000)
  // s和p1、p2均为Object类型。

自定义构造函数模式

自定义构造函数, 通过new创建对象，这种方式可以解决工厂模式带来的无类型问题。

  function Person(name, age) {
    this.name = name
    this.age = age
    this.setName = function (name) {
      this.name = name
    }
  }
  var p1 = new Person('Tom', 12)
  p1.setName('Jack')
  console.log(p1.name, p1.age)
  console.log(p1 instanceof Person)  // true
  
  function Student (name, price) {
    this.name = name
    this.price = price
  }
  var s = new Student('Bob', 13000)
  console.log(s instanceof Student) // true

构造函数+原型的组合模式

针对对象来说，每个对象的属性是它自己私有的，但一个类的所有方法都是一样的，以上所有的构建方式会让每一个对象都要定义一个方法，如果对象很多会大大消耗内存，并且无法实现继承关系，根据之前学的原型链的知识，可以把方法写在对象的原型当中。让所有对象都公用。

  function Person(name, age) { //在构造函数中只初始化一般函数
    this.name = name
    this.age = age
  }
  
  Person.prototype.setName = function (name) {
    this.name = name
  }

  var p1 = new Person('Tom', 23)
  var p2 = new Person('Jack', 24)
  console.log(p1, p2)

继承模式

原型链继承

定义父类型构造函数
给父类型的原型添加方法
定义子类型的构造函数
创建父类型的对象赋值给子类型的原型
将子类型原型的构造属性设置为子类型
给子类型原型添加方法
创建子类型的对象: 可以调用父类型的方法

示例代码

  //父类型
  function Supper() {
    this.supProp = 'Supper property'
  }
  Supper.prototype.showSupperProp = function () {
    console.log(this.supProp)
  }

  //子类型
  function Sub() {
    this.subProp = 'Sub property'
  }

  // 子类型的原型为父类型的一个实例对象
  Sub.prototype = new Supper()
  // 让子类型的原型的constructor指向子类型
  Sub.prototype.constructor = Sub
  Sub.prototype.showSubProp = function () {
    console.log(this.subProp)
  }

  var sub = new Sub()
  sub.showSupperProp()
  // sub.toString()
  sub.showSubProp()

  console.log(sub)  // Sub

这里最关键的就是Sub.prototype = new Supper()这一步，让子类的原型指向一个父类的对象，根据之前所学的原型链的原理。Sub对象的__proto__指向Sub构造函数对象的prototype对象，而Supper对象的__proto__指向Supper构造函数对象的prototype对象，那么进行这部操作之后Sub对象可以沿着原型链找到Supper原型上的方法。进而实现了继承。内存结构如图：
原型链继承
注意虽然这样实现了继承，但Supper对象上并没有constructor属性，如果使用constructor属性会根据原型链找到Supper的原型对象上，而它的constructor属性指向Supper构造函数对象，显然不符合，所以需要添加一句Sub.prototype.constructor = Sub来完整整个继承关系。

借用构造函数继承

定义父类型构造函数
定义子类型构造函数
在子类型构造函数中调用父类型构造

关键在于在子类型构造函数中通用call()（该函数前面有说明）调用父类型构造函数

function Person(name, age) {
  this.name = name
  this.age = age
}
function Student(name, age, price) {
  Person.call(this, name, age) //调用Person构造方法，传入自己的this
  this.price = price
}

var s = new Student('Tom', 20, 14000)
console.log(s.name, s.age, s.price)

原型链+借用构造函数的组合继承

利用原型链实现对父类型对象的方法继承
利用super()借用父类型构建函数初始化相同属性

function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.setName = function (name) {
  this.name = name
}

function Student(name, age, price) {
  Person.call(this, name, age)  // 为了得到属性
  this.price = price
}
Student.prototype = new Person() // 为了能看到父类型的方法
Student.prototype.constructor = Student //修正constructor属性
Student.prototype.setPrice = function (price) {
  this.price = price
}

var s = new Student('Tom', 24, 15000)
s.setName('Bob')
s.setPrice(16000)
console.log(s.name, s.age, s.price)

ES6模式

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对
象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
此外ES6还支持方法重写静态方法等面向对象的功能：

//父类
class Person {
 //构造方法
 constructor(name, age) {
  this.name = name
  this.age = age
 }
 //对象方法
  setName(name) {
    this.name = name
  }
}
//子类
class Student extends Person {
 constructor(name, age, price, screen, pixel) {
 	super(name, age, price);
 	this.price = price;
 }
 //方法重写
 setPrice(price) {
    this.price = price
 }
 //方法重写
 setName(name) {
    this.name = "学生" + name
  }
 //静态方法
 static run(){
 console.log('我可以学习')
 }
}
//实例化对象
 const s = new Student('Tom', 24, 15000)
 s.setName('Bob')
 s.setPrice(16000)
 console.log(s.name, s.age, s.price)
 Student.run() //静态方法

浏览器内核与事件循环模型（js异步机制）

浏览器内核

分类

浏览器分类
此外国内浏览器一般采用Trident(银行)+webkit双核。

内核模块

主线程
html,css文档解析模块 : 负责页面文本的解析
dom/css模块 : 负责dom/css在内存中的相关处理
布局和渲染模块 : 负责页面的布局和效果的绘制
布局和渲染模块 : 负责页面的布局和效果的绘制
…

分线程
定时器模块 : 负责定时器的管理
网络请求模块 : 负责服务器请求(常规/Ajax)
事件响应模块 : 负责事件的管理

浏览器渲染过程

基本过程

1.HTML解析构建DOM树
浏览器无法识别html文件，需要将html解析成DOM树，解析过程是一个深度遍历的过程，只有当某个节点下所有子节点都遍历完成了才会去解析下一个兄弟节点。

2.CSS解析：和HTML的解析过程同步执行，浏览器将识别所有的CSS样式信息，并构建形成CSSOM树。

3.样式与结构合并
CSSOM树和DOM树合并，形成Render树。形成Render树的过程中，浏览器会筛选出所有可见的节点（visibility: hidden的元素在Render Tree中），针对可见节点匹配其CSSOM树种的CSS规则。

4.布局阶段
布局阶段主要是将渲染树遍历，将元素嵌套关系以盒子模型的形式写入文档流。这个阶段会计算出每个树节点应该占据的空间以及在视图中的位置，一些布局的样式如float、absolute、fixed造成的偏移就会在这个阶段生效。

5.绘制阶段这个阶段会将我们的渲染树转化为像素，并对所有的媒体文件进行解码。

回流和重绘

回流
当我们的操作引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是重排（也叫回流）。
重绘
当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。

本段节选自博客“浏览器渲染过程“，更多详细信息可参考该博客。

事件循环模型（JS异步）

为什么js要用单线程模式, 而不用多线程模式?

JavaScript的单线程，与它的用途有关。
作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。
这决定了它只能是单线程，否则会带来很复杂的同步问题

js引擎执行代码的基本流程

先执行初始化代码: 包含一些特别的代码回调函数(异步执行)
- 设置定时器
- 绑定事件监听
- 发送ajax请求
后面在某个时刻才会执行回调代码

事件循环模型
上图中stack就是程序执行的堆栈，WebAPIs是事件管理模块（也就是异步处理模块），callback queue是调队列，它负责暂存事件管理模块传回来的代码，等主程序执行完成后依次执行队列中的代码（event loop就是指这个）。
我们以一段代码来说明：

function fn1() {
  console.log('fn1()')
}
fn1()
document.getElementById('btn').onclick = function () {
  console.log('点击了btn')
}
setTimeout(function () {
  console.log('定时器执行了')
}, 2000)
function fn2() {
  console.log('fn2()')
}
fn2()

1.由于函数提升所有函数定义会提前，定义完成之后执行fn1()，打印fn1()。
2.由于DOM操作不属于主线程，所以document.getElementById(‘btn’).onclick会加入到交给事件响应模块给模块将对应事件和代码进行绑定，同时主线程继续执行。
3.执行到 setTimeout时，定时器操作同样不是主线程，所以会被交给定时器模块去计时，主程序继续执行。
4.执行到fn2(),代码继续执行，打印fn2()。
5.当定时器时间到了，定时器模块会把代码放到callback queue中，由于此时这段代码排在对头且主程序已经执行完毕，所以定时器中的代码得以执行，打印定时器执行了。
6.当用户点击了按钮，触发了事件，事件响应模块也会把代码放到callback queue中，等待队列前面的代码执行完成后执行，打印点击了btn。