本文是跟随B站【尚硅谷高阶JS教程视频】做的笔记,包括四大部分：基础总结深入、函数高级、面向对象高级、线程机制与事件机制

---

[视频链接：](https://www.bilibili.com/video/BV14s411E7qf?p=47)

备注：第一天

一、数据类型

1.数据类型的分类

主要分两类：基本数据类型和引用数据类型
 基本数据类型（又称值类型）包括五大类：undefined null boolean number string
  属于深拷贝  令b=a ，改变b，a不跟着变
 引用数据类型（又称对象类型）Object，包括两类特殊对象，
  数组Array：一种特别的对象（属性是数值下标0123，内部数据有序）
  函数Function：一种特别的对象（可以执行）
  属于浅拷贝  令b=a ，改变b，a跟着变 原因：在内存中保存的是地址

2.数据类型的判断

判断方式有三类：

1. typeof：返回数据类型的字符串表达
2. instanceof：判断对象类型的数据具体是哪一种类型
3. ===:
   注意：=== 和 == 区别 是否进行类型转换
   以下针对不同的数据类型分别用三种方式进行判断

 typeof 可以判断undefined、number、string、boolean,无法判断null
 typeof 可以判断function，无法判断object、array

	var a  //不进行赋值就是undefined类型console.log(a, typeof a)    //undefinded   "undefinded" 返回的不是undefined，是"undefined"console.log(undefinded === "undefined")  // false
//判断undefined类型 typeof a === undefined  //这种方式是错误的typeof a === "undefined"  //这是正确方式
//判断数值number类型var b = 1typeof b === 'number' //true 注意number加引号
//判断字符串string类型var c = 'xiaohan'typeof c ==='string'  //true
//判断布尔值boolean类型var d = truetypeof d ==='boolean'  //true
//无法判断空类型null类型var e = nulltypeof e ==='null'  //false   因为typeof e 的结果为object
//判断函数function类型var f = function(){}typeof f ==='function' //true
//无法判断对象类型object类型var g = {}typeof g ==='object'  //true   但是g也有可能是null
//无法判断数组类型array类型var h = []typeof h ==='array'  //false  typeof h返回的是'object' 

instanceof
 A instance of B 判断A是否是B构造函数的实例对象，B可以是Object/Array/Function，主要用于判断对象的具体类型

var a = {}
var b = [1,2]
var c = function (){}
a instanceof Object //true
b instanceof Array , b instanceof Object //true true
c instanceof Function , c instanceof Object // true true
//再次证明了 函数 和 数组 都只是一个特殊的对象

===
 可以判断undefined、null，因为这两种数据类型都只有一个值

	1=='1'//true1==='1'//false
//判断undefined类型  a === undefined  
//判断null类型  a === null

3.三个重要问题

• undefined与null的区别
   undefined代表定义了，未赋值
   null定义并且赋值了，只不过值为null
  提问：未定义不也是undefined吗？
  回答：未定义 会报错，但是定义了不赋值，会返回undefined，不报错
• 什么时候给变量赋值为null？
   初始赋值，表明将要赋值为对象
   结束前，让对象成为垃圾对象（被垃圾回收器回收）

	var b = null;//初始：b以后是个对象b = {a:1};b = null;//b不再使用了，提前让它指向的对象成为垃圾对象，释放内存b = 2;//这种方式也可以使指向的对象成为垃圾对象，但是不好，因为增加了无意义数据

• 严格区别变量类型与数据类型
   数据的类型：基本类型和对象类型
   变量的类型（其实是变量内存值的类型）：基本类型和引用类型
    基本类型：保存的就是基本类型的数据
    引用类型：保存的是地址值

二、数据、变量、内存

1. 什么是数据

• 存储在内存中代表特定信息的‘东西’，本质是0101…
• 数据的特点：可传递、可运算
• 一切皆数据
• 内存中所有操作的目标：数据
  算数运算、逻辑运算、赋值、运行函数

2.什么是内存

• 内存条通电后产生的可储存数据的空间（临时的）
• 内存产生和死亡：内存条（电路板）=>通电=>产生内存空间=>存储数据=>处理数据=>断电=>内存空间和数据都消失
• 一块小内存的两个数据：内部值存储的数据 以及 该内存所对应的地址值
• 内存分类：
  栈：存放全局变量/局部变量
  堆：存放对象
  
  注意：函数名存放在栈中

3. 什么是变量？

• 可变化的量，由变量名和变量值组成
• 每个变量都对应一块小内存，变量名用来查找对应的内存，变量值就是内存中保存的数据

4. 内存、数据、变量之间的关系

• 内存是用来存储数据的空间
• 变量是内存的标识

var a ={age:12}
function fun (obj){obj = {age:15}
}
fun(a)   //另obj = a  此时都指向12，之后把obj改了，指向15，但是a不变
a.age  //结果还是12

问题：在js调用函数时，传递参数变量时，是值传递还是引用传递？
回答：理解1：都是值传递（基本值、地址值）
   理解2：可能是值传递，也可能是引用传递（地址值）

var a = 3
function fun (a) {a = a + 1console.log(a) //a的结果是4
}
fun(a)  
console.log(a)   //  a的结果是3
执行 fun(a)，先读取a的值3  即fun(3)，再写入function中的a，令局部作用域var a = 3 
并且a=a+1 此时改变的只是局部作用域的a

问题：JS引擎如何管理内存？

• 内存生命周期
  • 分配小内存空间，得到他的使用权
  • 存储数据，反复进行操作
  • 释放小内存空间
• 释放内存
  • 局部变量：函数执行完自动释放
  • 对象：成为垃圾对象 ==>垃圾回收器回收

var a = 3;
var obj = {}
obj = undefined  或  obj = null  
// 这两种方式，都只使对象变为垃圾对象，obj作为全局变量依旧存在 
function fun () { var b = {} }
fun()//函数执行完以后，自动释放局部变量b，

三、对象

1. 什么是对象

• 多个数据的封装体
• 用来保存多个数据的容器
• 一个对象代表现实中的一个事务

2. 为什么要用对象

• 统一管理多个数据

3. 对象的组成

• 属性：属性名（字符串）和属性值（任意）组成，代表现实事物的状态数据
• 方法：一种特别的属性（属性值是函数），代表现实事物的行为数据

4. 如何访问对象内部数据

• .属性名：编码简单，有时不能用
• [‘属性名’]：编码麻烦，能通用
  问题：什么时候必须使用[]的方式?
  1 属性名包含特殊字符： - 空格
  2 属性名不确定：属性名是一个变量，则不能作为字符串处理，. 默认是字符串
  

// 1.给p对象添加一个属性:content-type = '123'
var p = {}
p.content-type = '123' //报错
p['content-type'] = '123' //添加
p['content-type']         //读取
// 2.属性名不确定
var p = {}
var propName = 'myAge'
var value = 18
//错误方式
p.proName = value //这样赋值的 属性名是proName 
读取的时候 
p.proName   //18
p.myAge   //undefined
//正确方式
p[proName] = value
//读取
p[proName]  //undefined
p[myAge]    //18

四、 函数

1 什么是函数

• 实现特定功能的n条语句的封装体
• 只有函数是可以执行的，其他类型的数据不可以执行

2 为什么要用函数

• 提高代码复用
• 便于阅读交流

3 如何定义函数

• 函数声明
• 表达式

4 如何调用/执行函数

• test()： 直接调用
• obj.test()：通过对象的方式调用
• new test()：new 调用
• test.call/apply(obj)：临时让test成为obj的方法进行调用

var obj = {}
function test(){this.xxx = '123'}
obj.test()//错误
test.call(obj) //可以让一个函数成为指定对象的方法进行调用
obj.xxx //'123'

5 什么是回调函数

1. 你定义的
2. 你未调用
3. 最终执行了(在某个时刻定时器或者某个条件点击)

6 回调函数有哪些

1. DOM事件回调函数
2. 定时器回调函数：超时(延时)定时器、循环定时器
3. ajax请求回调函数
4. 生命周期回调函数

document.getElementById('btn').onclick = function () {alert(this.innerHTML)
}
setTimeout(function(){alert('到点了')},2000)

7 IIFE（匿名函数）

全称：Immediately-Invoked Function Expression（立即调用函数表达式）
作用：

• 隐藏实现
• 不会污染外部（全局）命名空间
• 编码js模块

(function(){var a = 1function test(){console.log(++a)}window.$ = function(){ //向外暴露一个全局函数return {test:test}}
})()
//调用方式：
$().test()    //$()返回的是一个对象

五、原型与原型链

1.原型

1. 每个函数function都有一个prototype，即显式原型（属性）

2. 每个实例对象都有一个__proto__，即隐式原型（属性）

3. 对象的隐式原型的值等于其对应构造函数的显式原型的值
   obj.proto === Object.prototype

4. prototype和constructor是一组对应属性
   obj.proto.constructor === Object

5. 内存结构图
   

6. 总结：
   函数的prototype属性：在定义函数的时候自动添加的，默认值是一个Object空对象
   对象的__proto__属性：创建对象时自动添加的，默认值为构造函数的prototype属性值
   程序员能直接操作显式原型，但不能直接操作隐式原型（ES6之前）

2.原型链

1. 原型链
   
   访问一个对象的属性时：
    先在自身属性中查找，找到返回；
    如果没有，再沿着__proto__这条链向上查找，找到返回
    如果最终没找到，返回undefined
   别名：隐式原型链
   作用：查找对象的属性（方法）
2. 原型链示意图
   

• 函数的显式原型指向的对象默认是空Object实例对象（但Object不满足）
  (除了Object的任何一种函数，的原型都可以看成是一个对象，这是对象是Object 的实例)
• 所有函数都是Function的实例（包含Function）
   Function.__proto__ === Function.prototype
• Object的原型对象是原型链尽头
• 读取对象的属性值时，会自动到原型链中查找，沿着__proto__查找
• 设置对象的属性值时，不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
• 方法一般定义在原型中，属性一般通过构造函数定义在对象本身上。
  代码如下（示例）：

3.重新理解instanceof

A instanceof B
原理解：判断 A是否是构造函数B的实例对象.
新理解：判断B的显示原型是否在A的原型链上，
即A.__proto__或者A.proto.__proto__或者A.proto.proto.__proto__或者…是否等于B.prototype

Object instanceof Function  //true
Object instanceof Object //true
Function  instanceof Object   //true
Function  instanceof Function  //true

4.测试题

测试题1：

var A = function (){}
A.prototype.n = 1
var b = new A()
A.prototype = {n:2,m:3
}
var c = new A()
b.n  // 1
b.m  // undefined
c.n  // 2
c.m  // 3

内存示意图：

测试题2：

function F(){}
Object.prototype.a = function(){console.log('a()')
}
Function.prototype.b = function(){console.log('b()')
}
var f = new F()
f.a()  // a()
f.b()  // 报错
F.a()  // a()
F.b()  // b()

六、执行上下文与执行上下文栈

1. 变量提升与函数提升

console.log(b) //undefined  变量提升
fn2()  //可调用 函数提升
var b = 3
function fn2() {console.log('fn2()')
}

1. 变量声明提升
   通过var定义（声明）的变量，在定义语句之前就可以访问到
   值：undefined
2. 函数声明提升
   通过function声明的函数，在之前就可以直接调用
   值：函数定义（对象）
   注意：必须使用声明的方式

2. 全局执行上下文

1. 在执行全局代码前将window确定为全局执行上下文
2. 对全局数据进行预处理
   • var 定义的全局变量 ==> undefined,添加为window的属性
   • function声明的全局函数 ==> 赋值(fun)，添加为window的方法
   • this ⇒ 赋值(window)
3. 开始执行全局代码

3. 函数执行上下文

1. 在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象（虚拟的，存在于栈中）
2. 对局部数据进行预处理
   • 形参变量 ==> 赋值
   • arguments ==> 赋值
   • var 定义的局部变量 ==> undefined
   • function声明的函数 ==> 赋值(fun)
   • this ==> 赋值
3. 开始执行函数体代码

4.执行上下文栈

1. 在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象
2. 在全局执行上下文(window)确定后，将其添加到栈中（压栈）
3. 在函数执行上下文创建后，将其添加到栈中（压栈）
4. 在当前函数执行完后，将栈顶的对象移除（出栈）
5. 当所有的代码执行完后，栈中只剩下window
   

5. 面试题

1.判断执行上下文的先后顺序

console.log(i)
var i =1
foo(1)
function foo(i){if(i ==4) {return}console.log(i)foo(i+1)console.log(i)
}
console.log(i)

1.输出结果：
  undefined
  1
  2
  3
  3
  2
  1
  1
2.整个过程中产生了 5 个执行上下文

2.先执行变量提升，再执行函数提升

function a() {};
var a;
typeof a   //'function'不管var  和  function 谁前谁后，都要先执行变量提升，在执行函数提升

if (!(b in window)){var b = 1
}
b //undefinedif 里的var依旧会执行变量提升

var c = 1
function c(c){console.log(c)var c = 3 
}
c(2) //报错，c is not a function

七、作用域与作用域链

1. 分类

包括：全局作用域、函数作用域。
注意：ES5没有块级作用域，ES6有

2.作用

隔离变量：不同作用域下同名变量不会有冲突。

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

1. 区别1

• 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时确定
• 全局执行上下文环境是在全局作用域确定以后，js代码马上执行之前创建的
• 函数执行上下文是在调用函数时，函数体代码执行之前创建的

2. 区别2

• 作用域是静态的，只要函数定义好了就一直存在，且不会发生变化
• 执行上下文是动态的，调用函数时创建，函数调用结束时就会自动释放

3. 联系

• 执行上下文是从属于所在的作用域
• 全局上下文环境 ⇒ 全局作用域
• 函数上下文环境 ⇒ 对应的函数使用域

4. 面试题

1.作用域是在函数定义的时候就确定了，不会因为不同函数的调用关系而改变。

var x = 10;
function fun(){console.log(x)
}
function show(f){var x = 20;f()
}
show(fun)
正确理解
调用fun的时候，就去fun的作用域找，如果没得，就出去window了,所以结果是10
错误理解
var x = 10;
function fun(){console.log(x)
}
function show(f){var x = 20;console.log(x)
}
show(fun)

2.绑定click事件出现的问题
功能要求：页面中有三个按钮，绑定点击事件，实现点击不同按钮输出不同序号的功能

  <button>按钮1</button><button>按钮2</button><button>按钮3</button>

答案一：错误

var btns = document.getElementsByTagName('button')for (var i = 0,length = btns.length;i<length;i++){var btn = btns[i];btn.onclick = function(){alert(`当前按钮是第${i+1}个`)}}

结果：点击每个按钮，输出的都是 第4个
原因：函数定义以后，并不会立刻执行，当用户点击按钮的时候才开始执行，此时的 i 已经是 3了

答案二：正确，易理解

var btns = document.getElementsByTagName('button')for (var i = 0,length = btns.length;i<length;i++){var btn = btns[i];btn.i = ibtn.onclick = function(){alert(`当前按钮是第${this.i+1}个`)}}

思路：给每个btn添加一个i属性，保存自己的序号信息

答案三：正确，简洁。利用了闭包

var btns = document.getElementsByTagName('button')for (var i = 0,length = btns.length;i<length;i++){(function(i){var btn = btns[i];btn.onclick = function(){alert(`当前按钮是第${i+1}个`)}})(i)}

思路：每次事件绑定都新建一个函数的作用域，存储 i 的值

八、闭包

1. 基础概念

1. 如何产生闭包？
   当一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量（或函数）时，就产生了闭包。
2. 闭包到底是什么？
   使用chrome调试查看
   理解一：闭包是嵌套的内部函数
   理解二：包含被引用变量（函数）的对象
   注意：闭包存在于嵌套的内部函数中
3. 产生闭包的条件
   函数嵌套
   内部函数引用了外部函数的数据（变量/函数）
   外部函数需要执行，但是内部函数只需要定义，不需要执行。
   外部函数执行几次，就创建几个闭包

2. 常见的闭包

1. 将函数作为另一个函数的返回值

function fn1(){var a = 2function fn2() {a++;console.log(a)}return fn2
}
var f = fn1()
f();//3
f();//4
只产生了一个闭包，如果想产生两个闭包，需要再执行一次fn1()

执行完 var f = fn1()以后，上边fn1 和 fn2都会被释放，但是地址0x456处的对象不会被释放，因为f还在引用它
2. 将函数作为实参传递给另一个函数调用

function showDelay (msg,time){setTimeout(function(){alert(msg)},time)
}
showDelay('xiaohan',2000)

3.闭包的作用

1. 使函数内部的变量在函数执行完以后，仍然存活在内存中（延长了局部变量的生命周期）
2. 让函数外部可以操作（读写）到函数内部的数据（变量/函数）
   思考题：
   1 函数执行完后，函数内部声明的局部变量是否还存在？
     一般是不存在的，存在于闭包中的变量才可能存在
   2 在函数外部能直接访问哈数内部的局部变量吗？
     不能，但我们可以通过闭包让外部操作它

4. 闭包的生命周期

内部函数引用了外部函数定义的变量，就产生闭包，因此，闭包：
 产生：当嵌套内部函数定义执行完时就产生了，（不是调用）
 死亡：当嵌套内部函数成为垃圾对象时

function fn1(){
//此时闭包已经产生了，因为函数提升。var a = 2function fn2() {a++;console.log(a)}return fn2
}
var f = fn1()
f();//3
f();//4
f = null //闭包死亡（包含闭包的函数对象成为垃圾对象）

5. 闭包的缺点

1. 函数执行完后，函数内的局部变量没有释放，占用内存时间变长。
2. 造成内存泄露
   解决方法：1.能不用闭包就不用或者2.及时释放

6.内存溢出与内存泄露

1.内存溢出
  一种程序运行出现的错误
  当程序运行需要的内存超过了剩余的内存时，就会抛出内存溢出的错误
2.内存泄露
  占用的内存没有及时释放
  内存泄露积累多了就容易导致内存溢出
  常见的内存泄露：
   意外的全局变量
   没有及时清理的计时器或回调函数
   闭包

7.面试题

1.考虑this指向

var name = "The Window"
var object = {name:"My Object",getNameFunc:function(){return function(){return this.name}}
}
alert(object.getNameFunc()());//返回的函数，执行函数，那么this是window//代码片段二
var name = "The Window"
var object = {name:"My Object",getNameFunc:function(){var that = thisreturn function(){return that .name}}
}
alert(object.getNameFunc()());//输出 My object

2.难度五颗星

function fun (n,o){console.log(o)return {fun:function(m){return fun(m,n)}}
}
var a = fun(0)
a.fun(1)
a.fun(2)
a.fun(3) //undefined,0,0,0var b = fun(0).fun(1).fun(2).fun(3)//undefined,0,1,2var c = fun(0).fun(1)
c.fun(2)
c.fun(3)//undefined,0,1,1

九、对象创建模式

1.Object构造函数模式

思路：先创建空Object对象，再动态添加属性/方法
适用场景：起始时对象内部数据不确定
问题：语句太多

var p = new Object()
p.name = 'xioahan'
p.age = 23
p.setName = function(name){this.name = name
}
//测试
p.setName('haomi')
console.log(p.name,p.age)

2.对象字面量模式

思路：使用{}创建对象，同时指定属性/方法
适用场景：起始时对象内部数据确定
问题：如果创建多个对象，有重复代码

var p = {name:'xiaohan',age:23,setName:function(name){this.name = name}
}var p2 = {name:'haomi',age:32,setName:function(name){this.name = name}
}

3.工厂模式

思路：通过工厂函数动态创建对象并返回
适用场景：需要创建多个对象
问题：对象没有一个具体的类型，都是Object类型
工厂函数：每次运行return一个新的对象

function createPerson(name,age){return {name:name,age:age,setName:function(name){this.name = name}}
}
var p1 = createPerson('xiaohan',23)
var p2 = createPerson('haomi',32)

4.自定义构造函数模式

思路：自定义构造函数，用new创建对象
适用场景：需要创建多个类型确定的对象
问题：每个对象都有相同的数据，浪费内存

function CreatePerson(name,age){this.name = name;this.age = age;this.setName = function(name){this.name = name}
}
var p1 = new CreatePerson('xiaohan',23)

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

思路：自定义构造函数，属性在函数中初始化，方法添加到原型上
适用场景：需要创建多个类型确定的对象

function CreatePerson(name,age){this.name = name;this.age = age;}CreatePerson.prototype.setName = function(name){this.name = name}
}
var p1 = new CreatePerson('xiaohan',23)

十、继承模式

1.原型链继承

Demo：令Son可以使用Father的原型上的方法
方式一：Son的原型对象是Father的实例对象，
 不仅可以使用Father原型链上的方法，还可以使用Father的属性。但是会导致constructor指向发生错误，son.constructor = Father

//父类型
function Father(){this.innerFatherprop= 'Father property'
}
Father.prototype.showFatherInner = function () {console.log(this.innerFatherprop)
}
//子类型
function Son(){this.innerSonprop = 'Son property'
}
//
Son.prototype = new Father()   //方式一
Son.prototype.constructor = Son
Son.prototype.showSonInner = function () {console.log(this.innerSonprop )
}
var son = new Son()
son.showFatherInner()  //Father property

方式二：令Son的显示原型的隐式原型是Father的显示原型
 只能使用Father原型链上的方法，不能使用Father的属性。但是不会导致constructor指向发生错误，son.constructor = Son
 

//父类型
function Father(){this.innerFatherprop= 'Father property'
}
Father.prototype.showFatherInner = function () {console.log(this.innerFatherprop)
}
//子类型
function Son(){this.innerSonprop = 'Son property'
}
//
Son.prototype.showSonInner = function () {console.log(this.innerSonprop )
}var son = new Son()
//son.__proto__.__proto__ = Father.prototype
Son.prototype.__proto__ = Father.prototype
son.showFatherInner()  //undefined

2.组合继承

function Person(name,age){this.name = namethis.age = age
}
Person.prototype.setName = function(name){this.name = name
}
function Student(name,age,price){
//在子类型构造函数中通过call()调用父类型构造函数Person.call(this,name,age)   //得到属性this.price = price
}
Student.prototype = new Person()  //得到方法
Student.prototype.constructor = Student
Student.prototype.setPrice = function(price){this.price = price
}var s = new Student('Tom',24,15000)
s.setName('Bob')
s.setPrice('20')
console.log(s)

十一、进程与线程

1.进程

程序的一次执行，占有一片独有的内存空间，每个程序的内存空间是相互独立的。
一个程序可以有多个进程，一个进程也可以有多个线程

2.线程

1. 是进程内的一个独立执行单元
2. 是程序执行的一个完整流程
3. 是CPU的最小的调度单元
   

3.注意点

1. 应用程序必须运行在某个进程的某个线程上
2. 一个进程中至少有一个运行的线程：主线程，进程启动后自动创建
3. 一个进程中也可以同时运行多个线程，称为多线程运行
4. 一个进程内的数据可以供其中的多个线程直接共享
5. 多个进程之间的数据是不能直接共享的
6. 线程池（thread pool）：保存多个线程对象的容器，实现线程对象的反复利用

4.相关问题

1. 何为多进程与多线程？
    多进程：一个应用程序同时启动多个实例运行。
    多线程：一个进程内，有多个线程。
2. 比较单线程与多线程
    多线程：
     优点：1.提升CPU利用率；
     缺点：1.创建多线程开销；2.线程间切换开销；3.死锁与状态同步问题
    单线程：
     优点：顺序编程、简单易懂
     缺点：效率低
3. JS是单线程还是多线程？
    JS是单线程运行的，但使用H5中的Web Workers可以多线程运行
4. 浏览器是单线程还是多线程？
    多线程
5. 浏览器是单进程还是多进程？
    单进程：firefox 老版IE
    多进程：chrome 新版IE

十二、浏览器内核

支撑浏览器运行的最核心的程序
不同的浏览器内核不一样
内核由不同模块组成：

• 主线程包括的内核：

1. js引擎模块：负责js程序的编译与运行
2. html、css文档解析模块：负责页面文本的解析
3. DOM/CSS模块：负责dom/css在内存中的相关处理
4. 布局和渲染模块：负责页面的布局和效果的绘制（内存中的对象）

• 分线程包括的内核：

1. 定时器模块：负责定时器的管理
2. DOM时间响应模块：负责事件的管理
3. 网络请求模块：负责ajax请求

十三、事件循环模型

1. 所有代码分类
 初始化执行代码（同步代码）：包含绑定DOM事件监听，设置定时器，发送ajax请求的代码
 回调执行代码（异步代码）：处理回调逻辑
js引擎先执行初始化代码，执行完毕后，才可能执行回调代码

setTimeout(function(){alert('123')
},100)
//根据定时器设置，应该是0.1s以后，出现alert
//但是由于下方的for执行时间过长，导致alert并没有按照预期的0.1s出现
for(var i =0 ; i<=1000000;i++){const arr = new Array(10000)
}

2.模型的组成部分
事件（定时器/DOM事件/Ajax）管理模块
回调队列
3.模型的运转流程

• 执行初始化代码，将事件回调函数交给对应模块管理
• 当事件发生时，管理模块会将回调函数及其数据添加到回调队列中
• 只有当初始化代码执行完后，才会遍历读取回调队列中的回调函数执行