JavaScript（高级）

JavaScript的高级学习笔记

# 数据类型的分类和判断

基本(值)类型

• 只能通过 === 判断 Undefined 和 Null ，因为这两种数据类型都只有一个值。
• 通过 typeof 判断 Null 结果为 object。

对象(引用)类型

类型判断

1. typeof
   • 可以判断: undefined / 数值 / 字符串 / 布尔值 / function
   • 不能区别: null与object, object与array
2. instanceof
   • 判断对象的具体类型
   • 专门用来判断对象数据的类型: Object, Array与Function
3. ===
   • 可以判断: undefined, null

相关问题

undefined与null的区别?

• undefined代表没有赋值
• null代表赋值了, 只是值为null

什么时候给变量赋值为null呢?

//a将指向一个对象, 但对象此时还没有确定
var a = null
//让a指向的对象成为垃圾对象
a = null

1 2 3 4

复制

严格区别变量类型与数据类型?

• js的变量本身是没有类型的, 变量的类型实际上是变量内存中数据的类型
• 变量类型：
  • 基本类型: 保存基本类型数据的变量
  • 引用类型: 保存对象地址值的变量
• 数据类型：
  • 基本类型
  • 对象类型

# 数据,变量,内存的理解

什么是数据?

• 在内存中可读的, 可传递的保存了特定信息的'东西', 本质就是0101二进制数据
• 具有可读和可传递的基本特性
• 一切皆数据, 函数也是数据
• 在内存中的所有操作（算术运算，逻辑运算，赋值，调用函数传参）的目标: 数据

什么是变量?

• 值可以变化的量, 由变量名与变量值组成
• 一个变量对应一块小内存, 变量名用来查找到内存, 变量值就是内存中保存的内容

什么是内存?

• 内存条通电后产生的存储空间(临时的)
• 产生和死亡: 内存条(集成电路板)==>通电==>产生一定容量的存储空间==>存储各种数据==>断电==>内存全部消失
• 内存的空间是临时的, 而硬盘的空间是持久的
• 一块内存包含2个方面的数据
  • 内部存储的数据(一般数据/地址数据)
  • 内存地址值数据
• 内存空间的分类
  • 栈内存: 全局变量, 局部变量 (空间较小)
  • 堆内存: 对象 (空间较大)

内存,数据,变量三者之间的关系

• 内存是一个容器, 用来存储程序运行需要操作的数据
• 变量是内存的标识, 我们通过变量找到对应的内存, 进而操作(读/写)内存中的数据

关于引用变量赋值问题

• 2个引用变量指向同一个对象, 通过一个引用变量修改对象内部数据, 另一个引用变量也看得见
• 2个引用变量指向同一个对象,让一个引用变量指向另一个对象, 另一个引用变量还是指向原来的对象

在js调用函数时传递变量参数时, 是值传递还是引用传递?

• 理解1: 都是值(基本值/地址值)传递
• 理解2: 可能是值传递, 也可能是引用传递(地址值)

JS引擎如何管理内存?

1. 内存生命周期
   1. 分配小内存空间, 得到它的使用权
   2. 存储数据, 可以反复进行操作
   3. 不需要时释放/归还小内存空间
2. 释放内存
   • 为执行函数分配的栈空间内存(局部变量): 函数执行完自动释放
   • 存储对象的堆空间内存(对象): 当内存没有引用指向时, 对象成为垃圾对象, 垃圾回收器后面就会回收释放此内存

# 对象的理解和使用

什么是对象?

• 代表现实中的某个事物, 是该事物在编程中的抽象
• 多个数据的集合体(封装体)
• 用于保存多个数据的容器

为什么要用对象?

• 便于对多个数据进行统一管理

对象的组成

• 属性
  • 代表现实事物的状态数据
  • 由属性名和属性值组成
  • 属性名都是字符串类型, 属性值是任意类型
  • 分类 一般 : 属性值不是function --> 描述对象的状态 方法 : 属性值为function的属性 --> 描述对象的行为
• 方法
  • 代表现实事物的行为数据
  • 是特别的属性==>属性值是函数

如何访问对象内部数据?

• .属性名: 编码简单, 但有时不能用
• ['属性名']: 编码麻烦, 但通用

什么时候必须使用['属性名']的方式?

• 属性名包含特殊字符: - 空格
• 属性名不确定

特别的对象

• 数组: 属性名是0,1,2,3之类的索引
• 函数: 可以执行的

# 函数的理解和使用

什么是函数?

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

为什么要用函数?

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

如何定义函数?

• 函数声明
• 表达式

如何调用(执行)函数?

• test() window
• new test() p
• obj.test() 新创建的对象
• test.call/apply(obj) obj

回调函数的理解

1. 什么函数才是回调函数?
   • 自己定义的
   • 没有直接调用
   • 但它最终执行了(在一定条件下或某个时刻)
2. 常用的回调函数
   • dom事件回调函数
   • 定时器回调函数
   • ajax请求回调函数
   • 生命周期回调函数

函数也是对象

• instanceof Object===true
• 函数有属性: prototype
• 函数有方法: call()/apply()
• 可以添加新的属性/方法

函数的3种不同角色

• 一般函数 : 直接调用
• 构造函数 : 通过new调用
• 对象 : 通过.调用内部的属性/方法

函数中的this

• 一个关键字, 一个内置的引用变量
• 在函数中都可以直接使用this
• this代表调用函数的当前对象
• 在定义函数时, this还没有确定, 只有在执行时才动态确定(绑定)的
• 任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window
• 所有函数内部都有一个变量this
• 它的值是调用函数的当前对象
• 回调函数: 看背后是通过谁来调用的: window/其它

匿名函数自调用(IIFE)

(function(w, obj){
 //实现代码
})(window, obj)

1 2 3

复制

• 专业术语为: IIFE (Immediately Invoked Function Expression) 立即调用函数表达式
• 作用: 隐藏内部实现 不污染外部(全局)命名空间

# 原型与原型链

函数的prototype属性

• 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
• 原型对象中有一个属性constructor, 它指向函数对象

给原型对象添加属性(一般都是方法)

• 作用: 函数的所有实例对象自动拥有原型中的属性(方法)

显式原型与隐式原型

1. 每个函数function都有一个prototype，即显式原型(属性)
2. 每个实例对象都有一个__proto__，可称为隐式原型(属性)
3. 对象的隐式原型的值为其对应构造函数的显式原型的值
4. 总结:
   • 函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象
   • 对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值
   • 程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)

原型链

• 所有的实例对象都有__proto__属性, 它指向的就是原型对象
• 这样通过__proto__属性就形成了一个链的结构---->原型链
• 当查找对象内部的属性/方法时, js引擎自动沿着这个原型链查找, 如果最终没找到, 返回undefined
• 当给对象属性赋值时不会使用原型链, 而只是在当前对象中进行操作
• 函数的显示原型指向的对象默认是空Object实例对象(但Object不满足)
• 所有函数都是Function的实例(包含Function)
• Object的原型对象是原型链尽头

原型链属性问题

1. 读取对象的属性值时: 会自动到原型链中查找
2. 设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值
3. 方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上

instanceof是如何判断的?

• 表达式: A instanceof B
• 如果B函数的显式原型对象在A对象的原型链上, 返回true, 否则返回false

Function是通过new自己产生的实例

原型链图解：

面试题

/*
测试题1
*/
var A = function() {

}
A.prototype.n = 1

var b = new A()

A.prototype = {
	n: 2,
	m: 3
}

var c = new A()
console.log(b.n, b.m, c.n, c.m) //1 undefine 2 3


/*
测试题2
*/
var F = function(){};
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

复制

# 执行上下文与执行上下文栈

变量提升与函数提升

• 变量提升: 在变量定义语句之前, 就可以访问到这个变量(undefined)
• 函数提升: 在函数定义语句之前, 就可执行该函数
• 先有变量提升, 再有函数提升

执行上下文创建和初始化的过程 1.全局执行上下文(window)

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

2.函数执行上下文(对程序员来说是透明的)

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

执行上下文栈

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

理解

• 执行上下文: 由js引擎自动创建的对象, 包含对应作用域中的所有变量属性
• 执行上下文栈: 用来管理产生的多个执行上下文

生命周期

• 全局 : 准备执行全局代码前产生, 当页面刷新/关闭页面时死亡
• 函数 : 调用函数时产生, 函数执行完时死亡

面试题

/*
测试题1:  先执行变量提升, 再执行函数提升
*/
function a() {}
var a
console.log(typeof a) // 'function'


/*
测试题2:
*/
if (!(b in window)) {
	var b = 1
}
console.log(b) // undefined

/*
测试题3:
*/
var c = 1
function c(c) {
	console.log(c)
	var c = 3
}
c(2) // 报错

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

复制

# 作用域与作用域链

作用域

1. 理解
   • 作用域: 一块代码区域,它是静态的(相对于上下文对象), 在编码时就确定了, 不会再变化
   • 作用域链: 多个嵌套的作用域形成的由内向外的结构, 用于查找变量
2. 分类
   • 全局作用域
   • 函数作用域
   • 没有块作用域(ES6有了)
3. 作用
   • 作用域: 隔离变量, 可以在不同作用域定义同名的变量不冲突
   • 作用域链: 查找变量

作用域与执行上下文关系

• 作用域: 静态的, 编码时就确定了(不是在运行时), 一旦确定就不会变化了
• 执行上下文: 动态的, 执行代码时动态创建, 当执行结束消失
• 联系: 执行上下文环境是在对应的作用域中的

1. 区别1
   • 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时
   • 全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建
   • 函数执行上下文是在调用函数时, 函数体代码执行之前创建
2. 区别2
   • 作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化
   • 执行上下文是动态的, 调用函数时创建, 函数调用结束时就会自动释放
3. 联系
   • 执行上下文(对象)是从属于所在的作用域
   • 全局上下文环境==>全局作用域
   • 函数上下文环境==>对应的函数使用域

作用域链

1. 理解
   • 多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)
   • 查找变量时就是沿着作用域链来查找的
2. 查找一个变量的查找规则
   1. 在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2
   2. 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3
   3. 再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常

面试题

var x = 10;
function fn() {
	console.log(x);
}
function show(f) {
	var x = 20;
	f();
}
show(fn);	//10

1 2 3 4 5 6 7 8 9

复制

var fn = function () {
	console.log(fn)
}
fn()	//输出fn函数

var obj = {
	fn2: function () {
		console.log(fn2)
		//console.log(this.fn2)
	}
}
obj.fn2()	//报错

1 2 3 4 5 6 7 8 9 10 11 12

复制

# 闭包

如何产生闭包?

• 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包

闭包到底是什么?

• 通过chrome工具得知: 闭包本质是内部函数中的一个对象, 这个对象中包含引用的变量属性
• 理解一: 闭包是嵌套的内部函数(绝大部分人)
• 理解二: 包含被引用变量(函数)的对象(极少数人)
• 注意: 闭包存在于嵌套的内部函数中

产生闭包的条件?

• 函数嵌套
• 内部函数引用了外部函数的数据(变量/函数), 执行函数定义就会产生闭包(不用调用内部函数)
• 调用外部函数

闭包的作用:

• 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)
• 让函数外部可以操作(读写)到函数内部的数据(变量/函数)

写一个闭包程序

// 1. 将函数作为另一个函数的返回值
function fn1() {
	var a = 2
	function fn2() {
		a++
		console.log(a)
	}
	return fn2
}
var f = fn1()
f() // 3
f() // 4

// 2. 将函数作为实参传递给另一个函数调用
function showDelay(msg, time) {
	setTimeout(function () {
		alert(msg)
	}, time)
}
showDelay('atguigu', 2000)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

复制

问题

1. 函数执行完后, 函数内部声明的局部变量是否还存在?
   • 一般是不存在, 存在于闭中的变量才可能存在
2. 在函数外部能直接访问函数内部的局部变量吗?
   • 不能, 但我们可以通过闭包让外部操作它

闭包的生命周期

1. 产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
2. 死亡: 在嵌套的内部函数成为垃圾对象时

闭包的应用:

1. 模块化: 封装一些数据以及操作数据的函数, 向外暴露一些行为
   • 具有特定功能的js文件
   • 将所有的数据和功能都封装在一个函数内部(私有的)
   • 只向外暴露一个包含n个方法的对象或函数
   • 模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能
2. 循环遍历加监听
3. JS框架(jQuery)大量使用了闭包

缺点:

• 函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长
• 容易造成内存泄露
• 解决: 及时释放 : f = null; //让内部函数对象成为垃圾对象 能不用闭包就不用

面试题

//代码片段一
var name = "The Window";
var object = {
	name : "My Object",
	getNameFunc : function(){
		return function(){
			return this.name;
		};
	}
};
alert(object.getNameFunc()());	//The Window

//代码片段二
var name2 = "The Window";
var object2 = {
	name2 : "My Object",
	getNameFunc : function(){
		var that = this;
		return function(){
			return that.name2;
		};
	}
};
alert(object2.getNameFunc()());	//My Object

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

复制

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,0

var b = fun(0).fun(1).fun(2).fun(3)//undefined,0,1,2

var c = fun(0).fun(1)
c.fun(2)
c.fun(3)//undefined,0,1,1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

复制

# 内存溢出与内存泄露

内存溢出

• 一种程序运行出现的错误
• 当程序运行需要的内存超过了剩余的内存时, 就出抛出内存溢出的错误

内存泄露

• 占用的内存没有及时释放
• 内存泄露积累多了就容易导致内存溢出
• 常见的内存泄露:
  • 意外的全局变量
  • 没有及时清理的计时器或回调函数
  • 闭包

# 对象的创建模式

Object构造函数模式

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

var obj = {};
obj.name = 'Tom'
obj.setName = function(name){
	this.name = name
}

1 2 3 4 5

复制

对象字面量模式

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

var obj = {
	name : 'Tom',
	setName : function(name){
		this.name = name
	}
}

1 2 3 4 5 6

复制

工厂模式

• 套路: 通过工厂函数动态创建对象并返回
• 适用场景: 需要创建多个对象
• 问题: 对象没有一个具体的类型, 都是Object类型

function createPerson(name, age) { //返回一个对象的函数===>工厂函数
	var obj = {
		name: name,
		age: age,
		setName: function (name) {
			this.name = name
		}
	}
	return obj
}

1 2 3 4 5 6 7 8 9 10

复制

构造函数模式

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

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.setName = function(name){
		this.name=name;
	};
}
new Person('tom', 12);

1 2 3 4 5 6 7 8

复制

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

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

function Person(name, age) {
	this.name = name;
	this.age = age;
}
Person.prototype.setName = function(name){
	this.name=name;
};
new Person('tom', 12);

1 2 3 4 5 6 7 8

复制

# 继承模式

原型链继承 : 得到方法

1. 套路
   1. 定义父类型构造函数
   2. 给父类型的原型添加方法
   3. 定义子类型的构造函数
   4. 创建父类型的对象赋值给子类型的原型
   5. 将子类型原型的构造属性设置为子类型
   6. 给子类型原型添加方法
   7. 创建子类型的对象: 可以调用父类型的方法
2. 关键: 子类型的原型为父类型的一个实例对象

// 定义父类型构造函数
function Parent(){}
// 给父类型的原型添加方法
Parent.prototype.test = function(){};
// 定义子类型的构造函数
function Child(){}
// 子类型的原型指向父类型实例
Child.prototype = new Parent(); 
// 将子类型原型的构造属性设置为子类型
Child.prototype.constructor = Child
// 给子类型原型添加方法
Child.prototype.test2 = function(){};
// 创建子类型的对象: 可以调用父类型的方法
var child = new Child();
// 有父类型的test()
child.test()
child.test2()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

复制

借用构造函数（假继承） : 得到属性

1. 套路:
   1. 定义父类型构造函数
   2. 定义子类型构造函数
   3. 在子类型构造函数中调用父类型构造
2. 关键: 在子类型构造函数中通用call()调用父类型构造函数

// 定义父类型构造函数
function Parent(xxx){
	this.xxx = xxx
}
// 给父类型的原型添加方法
Parent.prototype.test = function(){};
// 定义子类型构造函数
function Child(xxx,yyy){
	// 在子类型构造函数中调用父类型构造
	Parent.call(this, xxx);//借用构造函数   this.Parent(xxx)
	this.yyy = yyy;
}
//child.xxx为'a', 但child没有test()
var child = new Child('a', 'b');

1 2 3 4 5 6 7 8 9 10 11 12 13 14

复制

组合继承

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

// 定义父类型构造函数
function Parent(xxx){
	this.xxx = xxx
}
// 给父类型的原型添加方法
Parent.prototype.test = function(){};
// 定义子类型构造函数
function Child(xxx,yyy){
	// 在子类型构造函数中调用父类型构造（得到父类型的属性）
	Parent.call(this, xxx);//借用构造函数   this.Parent(xxx)
	this.yyy = yyy;
}
// 子类型的原型指向父类型实例（得到父类型的方法）
Child.prototype = new Parent();
// 将子类型原型的构造属性设置为子类型
Child.prototype.constructor = Child
// child.xxx为'a', 也有test()
var child = new Child();

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

复制

new一个对象背后做了些什么?

• 创建一个空对象
• 给对象设置__proto__, 值为构造函数对象的prototype属性值: this.proto = Fn.prototype
• 执行构造函数体(给对象添加属性/方法)

# 进程与线程

进程:

• 程序的一次执行, 它占有一片独有的内存空间
• 可以通过windows任务管理器查看进程

线程:

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

进程与线程的关系

• 一个进程中一般至少有一个运行的线程: 主线程
• 一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的
• 一个进程内的数据可以供其中的多个线程直接共享
• 多个进程之间的数据是不能直接共享的
• 程序是在某个进程中的某个线程执行的

线程池(thread pool)

• 保存多个线程对象的容器, 实现线程对象的反复利用

比较单线程与多线程

1. 多线程
   • 优点
     • 能有效提升CPU的利用率
   • 缺点
     • 创建多线程开销
     • 线程间切换开销
     • 死锁与状态同步问题
2. 单线程
   • 优点
     • 顺序编程简单易懂
   • 缺点
     • 效率低

浏览器运行是单进程还是多进程?

• 有的是单进程
  • firefox
  • 老版IE
• 有的是多进程
  • chrome
  • 新版IE

如何查看浏览器是否是多进程运行的呢?

• 任务管理器==>进程

浏览器运行是单线程还是多线程?

• 都是多线程运行的

# 浏览器内核模块组成

什么是浏览器内核?

• 支持浏览器运行的最核心的程序

不同的浏览器可能不太一样

• Chrome, Safari: webkit
• firefox: Gecko
• IE: Trident
• 360,搜狗等国内浏览器: Trident + webkit

内核由很多模块组成

1. 主线程
   • js引擎模块 : 负责js程序的编译与运行
   • html,css文档解析模块 : 负责页面文本的解析
   • DOM/CSS模块 : 负责dom/css在内存中的相关处理
   • 布局和渲染模块 : 负责页面的布局和效果的绘制(内存中的对象)
2. 分线程
   • 定时器模块 : 负责定时器的管理
   • DOM事件模块 : 负责事件的管理
   • 网络请求模块 : 负责Ajax请求

# js线程

• js是单线程执行的(回调函数也是在主线程)
• H5提出了实现多线程的方案: Web Workers
• 只能是主线程更新界面

如何证明js执行是单线程的?

• setTimeout()的回调函数是在主线程执行的
• 定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行

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

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

代码的分类:

• 初始化代码
• 回调代码

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

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

# 定时器问题:

定时器真是定时执行的吗?

• 定时器并不能保证真正定时执行
• 一般会延迟一丁点(可以接受), 也有可能延迟很长时间(不能接受)
• 如果在主线程执行了一个长时间的操作, 可能导致延时才处理

定时器回调函数是在分线程执行的吗?

• 在主线程执行的, js是单线程的

定时器是如何实现的?

• 事件循环模型

# 事件处理机制（事件循环模型）

代码分类

• 初始化执行代码(同步代码): 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码
• 回调执行代码(异步代码): 处理回调逻辑

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

• 初始化代码===>回调代码

模型的2个重要组成部分:

• 事件(定时器/DOM事件/Ajax)管理模块
• 回调队列

模型的运转流程

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

# H5 Web Workers

• Web Workers是HTML5提供的一个javascript多线程解决方案
• 我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面，让js在分线程执行
• 但是子线程完全受主线程控制，且不得操作DOM。所以这个新标准没有改变JavaScript单线程的本质。
• 使用：

主线程

// 创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
var worker = new Worker('worker.js');
// 绑定用来接收分线程返回的数据的回调
worker.onmessage = function(event){
	// 接收到的分线程返回的数据
	event.data
}
// 向分线程发送数据
worker.postMessage(number)

1 2 3 4 5 6 7 8 9

复制

分线程

function fibonacci(n) {
  return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)  //递归调用
}
// 绑定用来接收主线程发送过来的数据的回调
this.onmessage = function (event) {
	// 接收到的主线程发送的数据
	var number = event.data
	var result = fibonacci(number)
	// 向主线程返回数据
	postMessage(result)
	// alert(result)  alert是window的方法, 在分线程不能调用
	// 分线程中的全局对象不再是window, 所以在分线程中不可能更新界面
}

1 2 3 4 5 6 7 8 9 10 11 12 13

复制

相关API

• Worker: 构造函数, 加载分线程执行的js文件
• Worker.prototype.onmessage: 用于接收另一个线程的回调函数
• Worker.prototype.postMessage: 向另一个线程发送消息

不足

• worker内代码不能操作DOM(更新UI)
• 不能跨域加载JS
• 不是每个浏览器都支持这个新特性