JavaScript的高级学习笔记
# 数据类型的分类和判断
基本(值)类型
| 数据类型 | 可表示的值 | 可判断方式 |
|---|---|---|
| Number | 任意数值 | typeof |
| String | 任意字符串 | typeof |
| Boolean | true/false | typeof |
| Undefined | undefined | typeof/=== |
| Null | null | === |
只能通过
===判断Undefined和Null，因为这两种数据类型都只有一个值。通过
typeof判断Null结果为object。
对象(引用)类型
| 数据类型 | 可判断方式 |
|---|---|
| Object | typeof/instanceof |
| Array | instanceof |
| Function | typeof |
类型判断
typeof
- 可以判断: undefined / 数值 / 字符串 / 布尔值 / function
- 不能区别: null与object, object与array
instanceof
- 判断对象的具体类型
- 专门用来判断对象数据的类型: Object, Array与Function
===
- 可以判断: undefined, null
相关问题
undefined与null的区别?
- undefined代表没有赋值
- null代表赋值了, 只是值为null
什么时候给变量赋值为null呢?
//a将指向一个对象, 但对象此时还没有确定 var a = null //让a指向的对象成为垃圾对象 a = null1
2
3
4严格区别变量类型与数据类型?
- js的变量本身是没有类型的, 变量的类型实际上是变量内存中数据的类型
- 变量类型：
- 基本类型: 保存基本类型数据的变量
- 引用类型: 保存对象地址值的变量
- 数据类型：
- 基本类型
- 对象类型
# 数据,变量,内存的理解
什么是数据?
- 在内存中可读的, 可传递的保存了特定信息的'东西', 本质就是0101二进制数据
- 具有可读和可传递的基本特性
- 一切皆数据, 函数也是数据
- 在内存中的所有操作（算术运算，逻辑运算，赋值，调用函数传参）的目标: 数据
什么是变量?
- 值可以变化的量, 由变量名与变量值组成
- 一个变量对应一块小内存, 变量名用来查找到内存, 变量值就是内存中保存的内容
什么是内存?
- 内存条通电后产生的存储空间(临时的)
- 产生和死亡: 内存条(集成电路板)==>通电==>产生一定容量的存储空间==>存储各种数据==>断电==>内存全部消失
- 内存的空间是临时的, 而硬盘的空间是持久的
- 一块内存包含2个方面的数据
- 内部存储的数据(一般数据/地址数据)
- 内存地址值数据
- 内存空间的分类
- 栈内存: 全局变量, 局部变量 (空间较小)
- 堆内存: 对象 (空间较大)
内存,数据,变量三者之间的关系
- 内存是一个容器, 用来存储程序运行需要操作的数据
- 变量是内存的标识, 我们通过变量找到对应的内存, 进而操作(读/写)内存中的数据
关于引用变量赋值问题
- 2个引用变量指向同一个对象, 通过一个引用变量修改对象内部数据, 另一个引用变量也看得见
- 2个引用变量指向同一个对象,让一个引用变量指向另一个对象, 另一个引用变量还是指向原来的对象
在js调用函数时传递变量参数时, 是值传递还是引用传递?
- 理解1: 都是值(基本值/地址值)传递
- 理解2: 可能是值传递, 也可能是引用传递(地址值)
JS引擎如何管理内存?
- 内存生命周期
- 分配小内存空间, 得到它的使用权
- 存储数据, 可以反复进行操作
- 不需要时释放/归还小内存空间
- 释放内存
- 为执行函数分配的栈空间内存(局部变量): 函数执行完自动释放
- 存储对象的堆空间内存(对象): 当内存没有引用指向时, 对象成为垃圾对象, 垃圾回收器后面就会回收释放此内存
# 对象的理解和使用
什么是对象?
- 代表现实中的某个事物, 是该事物在编程中的抽象
- 多个数据的集合体(封装体)
- 用于保存多个数据的容器
为什么要用对象?
- 便于对多个数据进行统一管理
对象的组成
- 属性
- 代表现实事物的状态数据
- 由属性名和属性值组成
- 属性名都是字符串类型, 属性值是任意类型
- 分类
一般 : 属性值不是function --> 描述对象的状态
方法 : 属性值为function的属性 --> 描述对象的行为
- 方法
- 代表现实事物的行为数据
- 是特别的属性==>属性值是函数
如何访问对象内部数据?
- .属性名: 编码简单, 但有时不能用
- ['属性名']: 编码麻烦, 但通用
什么时候必须使用['属性名']的方式?
- 属性名包含特殊字符: - 空格
- 属性名不确定
特别的对象
- 数组: 属性名是0,1,2,3之类的索引
- 函数: 可以执行的
# 函数的理解和使用
什么是函数?
- 用来实现特定功能的, n条语句的封装体
- 只有函数类型的数据是可以执行的, 其它的都不可以
为什么要用函数?
- 提高代码复用
- 便于阅读和交流
如何定义函数?
- 函数声明
- 表达式
如何调用(执行)函数?
- test() window
- new test() p
- obj.test() 新创建的对象
- test.call/apply(obj) obj
回调函数的理解
- 什么函数才是回调函数?
- 自己定义的
- 没有直接调用
- 但它最终执行了(在一定条件下或某个时刻)
- 常用的回调函数
- 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
2
3
专业术语为: IIFE (Immediately Invoked Function Expression) 立即调用函数表达式
作用: 隐藏内部实现 不污染外部(全局)命名空间
# 原型与原型链
函数的prototype属性
- 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
- 原型对象中有一个属性constructor, 它指向函数对象
给原型对象添加属性(一般都是方法)
- 作用: 函数的所有实例对象自动拥有原型中的属性(方法)
显式原型与隐式原型
- 每个函数function都有一个prototype，即显式原型(属性)
- 每个实例对象都有一个__proto__，可称为隐式原型(属性)
- 对象的隐式原型的值为其对应构造函数的显式原型的值
- 总结:
- 函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象
- 对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值
- 程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)
原型链
- 所有的实例对象都有__proto__属性, 它指向的就是原型对象
- 这样通过__proto__属性就形成了一个链的结构---->原型链
- 当查找对象内部的属性/方法时, js引擎自动沿着这个原型链查找, 如果最终没找到, 返回undefined
- 当给对象属性赋值时不会使用原型链, 而只是在当前对象中进行操作
- 函数的显示原型指向的对象默认是空Object实例对象(但Object不满足)
- 所有函数都是Function的实例(包含Function)
- Object的原型对象是原型链尽头
原型链属性问题
- 读取对象的属性值时: 会自动到原型链中查找
- 设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值
- 方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上
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
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)
- 在执行全局代码前将window确定为全局执行上下文
- 对全局数据进行预处理
- var定义的全局变量==>undefined, 添加为window的属性
- function声明的全局函数==>赋值(fun), 添加为window的方法
- this==>赋值(window)
- 开始执行全局代码
2.函数执行上下文(对程序员来说是透明的)
- 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象(虚拟的, 存在于栈中)
- 对局部数据进行预处理
- 形参变量==>赋值(实参), 添加为执行上下文的属性
- arguments==>赋值(实参列表), 添加为执行上下文的属性
- var定义的局部变量==>undefined, 添加为执行上下文的属性
- function声明的函数==>赋值(fun), 添加为执行上下文的方法
- this==>赋值(调用函数的对象)
- 开始执行函数体代码
执行上下文栈
- 在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
- 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
- 在函数执行上下文创建后, 将其添加到栈中(压栈)
- 在当前函数执行完后,将栈顶的对象移除(出栈)
- 当所有的代码执行完后, 栈中只剩下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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 作用域与作用域链
作用域
- 理解
- 作用域: 一块代码区域,它是静态的(相对于上下文对象), 在编码时就确定了, 不会再变化
- 作用域链: 多个嵌套的作用域形成的由内向外的结构, 用于查找变量
- 分类
- 全局作用域
- 函数作用域
- 没有块作用域(ES6有了)
- 作用
- 作用域: 隔离变量, 可以在不同作用域定义同名的变量不冲突
- 作用域链: 查找变量
作用域与执行上下文关系
- 作用域: 静态的, 编码时就确定了(不是在运行时), 一旦确定就不会变化了
- 执行上下文: 动态的, 执行代码时动态创建, 当执行结束消失
- 联系: 执行上下文环境是在对应的作用域中的
- 区别1
- 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时
- 全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建
- 函数执行上下文是在调用函数时, 函数体代码执行之前创建
- 区别2
- 作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化
- 执行上下文是动态的, 调用函数时创建, 函数调用结束时就会自动释放
- 联系
- 执行上下文(对象)是从属于所在的作用域
- 全局上下文环境==>全局作用域
- 函数上下文环境==>对应的函数使用域
作用域链
- 理解
- 多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)
- 查找变量时就是沿着作用域链来查找的
- 查找一个变量的查找规则
- 在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2
- 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入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
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
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
问题
- 函数执行完后, 函数内部声明的局部变量是否还存在?
- 一般是不存在, 存在于闭中的变量才可能存在
- 在函数外部能直接访问函数内部的局部变量吗?
- 不能, 但我们可以通过闭包让外部操作它
闭包的生命周期
- 产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
- 死亡: 在嵌套的内部函数成为垃圾对象时
闭包的应用:
- 模块化: 封装一些数据以及操作数据的函数, 向外暴露一些行为
- 具有特定功能的js文件
- 将所有的数据和功能都封装在一个函数内部(私有的)
- 只向外暴露一个包含n个方法的对象或函数
- 模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能
- 循环遍历加监听
- 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
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
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
2
3
4
5
对象字面量模式
- 套路: 使用{}创建对象, 同时指定属性/方法
- 适用场景: 起始时对象内部数据是确定的
- 问题: 如果创建多个对象, 有重复代码
var obj = {
name : 'Tom',
setName : function(name){
this.name = name
}
}
1
2
3
4
5
6
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
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
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
2
3
4
5
6
7
8
# 继承模式
原型链继承 : 得到方法
- 套路
- 定义父类型构造函数
- 给父类型的原型添加方法
- 定义子类型的构造函数
- 创建父类型的对象赋值给子类型的原型
- 将子类型原型的构造属性设置为子类型
- 给子类型原型添加方法
- 创建子类型的对象: 可以调用父类型的方法
- 关键: 子类型的原型为父类型的一个实例对象
// 定义父类型构造函数
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
借用构造函数（假继承） : 得到属性
- 套路:
- 定义父类型构造函数
- 定义子类型构造函数
- 在子类型构造函数中调用父类型构造
- 关键: 在子类型构造函数中通用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
2
3
4
5
6
7
8
9
10
11
12
13
14
组合继承
- 利用原型链实现对父类型对象的方法继承
- 利用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
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)
- 保存多个线程对象的容器, 实现线程对象的反复利用
比较单线程与多线程
多线程
- 优点
- 能有效提升CPU的利用率
- 缺点
- 创建多线程开销
- 线程间切换开销
- 死锁与状态同步问题
- 优点
单线程
- 优点
- 顺序编程简单易懂
- 缺点
- 效率低
- 优点
浏览器运行是单进程还是多进程?
- 有的是单进程
- firefox
- 老版IE
- 有的是多进程
- chrome
- 新版IE
如何查看浏览器是否是多进程运行的呢?
- 任务管理器==>进程
浏览器运行是单线程还是多线程?
- 都是多线程运行的
# 浏览器内核模块组成
什么是浏览器内核?
- 支持浏览器运行的最核心的程序
不同的浏览器可能不太一样
- Chrome, Safari: webkit
- firefox: Gecko
- IE: Trident
- 360,搜狗等国内浏览器: Trident + webkit
内核由很多模块组成
主线程
- js引擎模块 : 负责js程序的编译与运行
- html,css文档解析模块 : 负责页面文本的解析
- DOM/CSS模块 : 负责dom/css在内存中的相关处理
- 布局和渲染模块 : 负责页面的布局和效果的绘制(内存中的对象)
分线程
- 定时器模块 : 负责定时器的管理
- 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
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
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
- 不是每个浏览器都支持这个新特性