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

对象高级
- 对象创建模式
- - Object构造函数模式
  - 对象字面量模式
  - 工厂模式
  - 自定义构造函数模式
  - 构造函数+原型的组合模式
- 继承模式
- - 原型链继承
  - 借用构造函数继承
  - 原型链+借用构造函数的组合继承
- ES6模式
浏览器内核与事件循环模型（js异步机制）
- 浏览器内核
- - 分类
  - 内核模块
- 浏览器渲染过程
- - 基本过程
  - 回流和重绘
- 事件循环模型（JS异步）

对象高级

对象创建模式

Object构造函数模式

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

  var p = new Object()p = {} p.name = 'Tom'p.age = 12p.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 = namethis.age = agethis.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)  // truefunction Student (name, price) {this.name = namethis.price = price}var s = new Student('Bob', 13000)console.log(s instanceof Student) // true

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

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

  function Person(name, age) { //在构造函数中只初始化一般函数this.name = namethis.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 = SubSub.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 = namethis.age = age
}
function Student(name, age, price) {Person.call(this, name, age) //调用Person构造方法，传入自己的thisthis.price = price
}var s = new Student('Tom', 20, 14000)
console.log(s.name, s.age, s.price)

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

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

function Person(name, age) {this.name = namethis.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 = namethis.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。

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

JavaScript重难点解析4（作用域与作用域链、闭包详解）
JavaScript重难点解析4(作用域与作用域链.闭包详解) 作用域与作用域链作用域作用域与执行上下文作用域链闭包闭包理解将函数作为另一个函数的返回值将函数作为实参传递给另一个函数调用 ...
JavaScript重难点解析6（Promise）
JavaScript重难点解析6(Promise 概念为什么要使用Promise Promise 的状态 Promise 对象的值 Promise工作流程基本用法 Promise其他方法 asyn ...
JavaScript重难点解析3（原型与原型链、执行上下文与执行上下文栈）
JavaScript重难点解析3(原型与原型链.执行上下文与执行上下文栈) 原型与原型链原型(prototype) 显示原型与隐式原型原型链 instanceof是如何判断执行上下文与执行上下文 ...
JavaScript重难点解析2（立即执行函数IIFE，this关键字）
JavaScript重难点解析2(立即执行函数IIFE,this关键字) 立即执行函数 this关键字立即执行函数也叫做匿名函数自调用,可以在定义一段函数之后直接让其执行. ;(function ...
JavaScript重难点解析1（数据类型——var、let、const区别，类型补充，“===”、“typeof”、“instanceof”区别，Symbol数据类型）
JavaScript重难点解析1(数据类型) var.let.const区别: 类型补充 "==="."typeof"."instanceof&quo ...
快速排序的难点_数据结构考研重难点解析：快速排序
数据结构是计算机专业考研重点内容,大部分院校都是考到了数据结构,其中快速排序是其中的重点难点内容,因此中公考研计算机教研室为大家整理的"数据结构考研重难点解析:快速排序",希望对大 ...
跨考408计算机学科专业基础综合,考研北京航空航天大学计算机学科专业基础综合（408）重难点解析.doc...
2010年考研北京航空航天大学计算机学科专业基础综合(408)重难点解析跨考专业课特别奉献,为广大考研学子加油助力! 1.操作系统今天我们来解析一下计算统考大纲操作系统部分的知识点.操作系统的研发 ...
计算机学科专业基础综合简称,2010年考研北京大学计算机学科专业基础综合(408)重难点解析...
2010年考研北京大学计算机学科专业基础综合(408)重难点解析考研全程辅导专家 2010年考研北京大学计算机学科专业基础综合(408)重难点解析跨考专业课特别奉献,为广大考研学子加油助力! 计算 ...
浏览器和node事件循环
什么是事件循环每一个浏览器都至少有一个事件循环,一个事件循环至少有一个任务队列.循环指的是其永远处于一个"无限循环"中.不断将注册的回调函数推入到执行栈浏览器的事件循环标准是由 ...

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