js高级之内存管理与闭包
javacript中的内存管理
javascript中不需要我们手动去分配内存，当我们创建变量的时候，会自动给我们分配内存。
- 创建基本数据类型时，会在栈内存中开辟空间存放变量
- 创建引用数据类型时，会在堆内存中开辟空间保存引用数据类型，并将堆内存中该数据的指针返回供变量引用
var name = "alice"
var user = {
name: "kiki",
age: 16
}
声明两个不同类型变量在内存中的表现形式如下
垃圾回收机制
内存是有限的，当某些内存不需要使用的时候，我们需要对其释放，以腾出更多的内存空间，在javascript中有两种垃圾回收算法。
1. 引用计数
当对象有引用指向它的时候，计数增加1，消除指向就减少1，当计数为0时，对象会自动被垃圾回收器及销毁
这样的回收机制可能存在问题，当两个对象循环引用时，这两个对象都不会被销毁，可能存在内存泄漏的情况
2. 标记清除
设置一个根对象，垃圾回收器会定期从这个根开始，找所有从根开始有引用到的对象，销毁没有引用到的对象
这样一种算法可以比较有效的解决循环引用的问题，下图中MN从根节点中无法找到有引用的对象，所以会被垃圾回收器销毁
函数的多种用途
在javascript中，函数是非常重要且应用广泛的，它最常用有以下几种
1、作为参数传递
函数可以直接作为另一个函数的参数，并且直接调用执行，以下定义了多种计算数字的方法，加减乘，进行不同的运算不需要每次调用不同的函数，只需要改变传参即可
function calcNum(num1, num2, fn) {
console.log(fn(num1, num2))
}
function add(num1, num2) {
return num1 + num2
}
function minus(num1, num2) {
return num1 - num2
}
function mul(num1, num2) {
return num1 * num2
}
calcNum(10, 20, add) // 30
2、作为返回值
函数也可以返回一个函数，以下函数叫做高阶函数，也成为函数柯里化，可以多次接收返回并进行统一的处理
function makeAdder(count) {
function add(num) {
return count + num
}
return add
}
var add5 = makeAdder(5)
console.log(add5(6))
console.log(add5(10))
var add10 = makeAdder(10)
var add100 = makeAdder(100)
3、作为回调函数
在数组中有很多方法都需要我们自定义回调函数来处理数据
var nums = [10, 50, 20, 100, 40]
var newNums = nums.map(function(item){
return item * 10
})
闭包
如果一个函数，可以访问到外层的自由变量，那么它就是闭包
如以下代码所示，bar函数可以访问到父级作用域的变量name和age
function foo(){
var name = "foo"
var age = 18
function bar(){
console.log(name)
console.log(age)
}
return bar
}
var fn = foo()
fn()
以上代码执行结果为
foo
18
按照代码的执行顺序来说，foo函数被执行完成，它的函数上下文已经从栈中弹出，而foo函数中的变量为什么还能被保存下来？
因为foo函数执行上下文创建的时候，同时创建AO对象，AO对象仍然被bar函数的parentScope所指向，所以不会被垃圾回收器销毁
以上代码在内存中的执行过程如下
-
Javascript --> AST
- 在内存中开辟空间0x100保存函数foo，其中保存父级作用域（parentScope）指向GO
- 内存中存在GO（Global Object）对象，其中包括了内置的模块如 String、Number等，同时将定义的全局变量保存至GO中，这里将fn添加到GO中，值为undefined，函数foo添加到GO中，值为0x100
-
Ignition处理AST
- V8引擎执行代码时，存在调用栈 ECStack，创建全局执行上下文，VO指向GO
- 创建函数foo的函数执行上下文，VO（variable object）指向foo的AO（
active object），执行函数体内代码 - 创建foo的AO对象，将name和age添加到AO中，值为undefined，
- 执行代码前，给foo内的函数bar开辟内存空间0x200，bar函数的父级作用域指向AO
- 将foo添加到AO对象中，值为0x200
-
执行代码
- 函数foo的返回值bar函数赋值给fn，所以fn的值为bar函数的内存地址 0x200
- 执行foo函数，将foo的AO对象中的name赋值为foo，age赋值为18
- 执行fn函数前，bar函数创建函数执行上下文，VO指向bar的AO
- 创建bar的AO，bar函数内没有定义变量，所以AO为空
- 执行fn函数，输入name和age
-
执行完成
- foo函数被执行完成，foo函数的执行上下文弹出调用栈
- bar函数被执行完成，bar函数的执行上下文弹出调用栈
- bar的AO对象是函数执行上下文存在时创建，此时也没有被其它地方引用，所以会被垃圾回收器销毁
- bar函数赋值给了全局变量，不会被销毁，并且bar的父级作用域指向foo的AO对象，因此foo的AO对象也不会被销毁，所以在bar函数中能访问到foo中的变量
图示如下
AO优化
以上foo的AO对象有被引用，所以没有销毁，如果此时AO对象只是部分变量被引用，而其它变量没有用到呢，那没有用到的变量会被销毁吗？比如以下foo函数的变量age
function foo(){
var name = "foo"
var age = 18
return function(){
console.log(name)
}
}
var fn = foo()
fn()
按照ECMAScript规范是不会的，因为整个AO对象都被保存在内存中了，但是JS引擎可能会做一些优化，比如说Chome浏览器使用的V8引擎
在以上闭包中增加debugger进行调试
function foo(){
var name = "foo"
var age = 18
return function(){
debugger
console.log(name)
}
}
var fn = foo()
fn()
可以用两种方法测试到foo的变量age没有被保存下来
1.在Sources中查看Closure保存的变量
代码执行到debugger处，可以查看到闭包此时的作用域，父级作用域foo中只保存了变量name
2.在Console中输出变量
当代码执行到debugger处，此时Console就是在闭包的执行环境中，可以直接打印变量，name可以直接被打印出来，而打印age则直接保存未定义
内存泄漏
如上述例子中被保存到全局的闭包，因为有互相的引用，不会被销毁，如果后续不再使用，就可能出现内存泄漏的情况。
用以下代码测试一下
function createFnArray() {
var arr = new Array(1024 * 1024).fill(1)
return function () {
console.log(arr.length)
}
}
var arrayFns = []
for (var i = 0; i < 100; i++) {
setTimeout(() => {
arrayFns.push(createFnArray())
}, i * 100)
}
setTimeout(() => {
for (var i = 0; i < 50; i++) {
setTimeout(() => {
arrayFns.pop()
}, 100 * i)
}
}, 10000)
以上代码每隔0.1s创建一个内存容量为1024*1024的数组（约4M）保存到全局变量中，共计100个，再隔10s后将每隔0.1s从数组底部弹出一个元素，共计50个。
这样操作在内存中的表现应为前10s陆续增加内存的使用，第10s时，内存占用约为400M，等到15s后，内存占用减少一半，因为垃圾回收器不会马上回收或销毁垃圾，所以可能会有一定的时间延缓
释放内存
内存的大量占用会造成内存泄漏，当不需要使用的时候，要及时的释放，只需要将变量指向null，即可释放内存
var fn = foo()
// 无需使用时
fn = null
以上就是关于内存和闭包的理解，关于js高级，还有很多需要开发者掌握的地方，可以看看我写的其他博文，持续更新中~
