JavaScript 中事件循环(eventloop)、垃圾回收机制、闭包、递归函数的理解及示例

事件循环(eventloop)

概念

js 是单线程，为防止阻塞代码，把同步代码交给 js 引擎执行 异步代码交给宿主环境，
同步代码放入执行栈中 异步代码等待时机送入任务队列中，
执行栈执行完毕 会去任务队列看是否有异步任务 有就送到执行栈执行 反复循环查看执行 这个过程就是事件循环

同步任务和异步任务(宏任务和微任务)

• 同步：立即放入js引擎（js主线程）执行，并原地等待结果

• 异步：先放入宿主环境（浏览器/node），不必原地等待结果，并不阻塞主线程继续往下执行，异步结果在将来执行

• 宏任务：由宿主（浏览器、node）发起 setTimeout setTimeout不管时间是 0 还是 200 都是异步任务

• 微任务：由 js 引擎发起 promise、async/await、Object.observe、process.nextTick(node) promise本身是同步，then/catch 的回调函数是异步的

执行顺序

先执行同步任务，在执行微任务，宏任务。
先进先出原则

例子

console.log(1);

setTimeout(() => {
		console.log(2);
}, 0)

console.log(3);

new Promise((resolve, reject) => {
		console.log(4);
		resolve(5);
}).then(res => {
		console.log(res);
}).catch(err => { })


console.log(6);
// 1 3 4 6 5 2

垃圾回收

常见浏览器垃圾回收算法：引用计数法（基本不再使用）和标记清除法

垃圾回收机制

js 中内存的分配和回收都是自动完成的，内存在不适用的时候会被垃圾回收器自动回收

内存泄漏

不再用到的内存，没有及时释放，就叫做内存泄漏

内存的生命周期

内存分配、内存使用、内存回收
全局变量一般不会回收，页面关闭回收
局部变量一般不用了，会被自动回收

闭包

概念

可以从内部函数访问外部函数的作用域

闭包的作用

缓存数据，延长作用域链

优点同时也是缺点：滥用闭包会造成内存泄漏

闭包的模式

• 对象模式的闭包
• 函数模式的闭包

基本写法

function closure() {
    var name = 'xr' // closure 局部变量
    function fn() { // closure 内部函数
        console.log(name); // 使用了父函数中声明的变量，此时形成了闭包
    }
    fn()
}
closure()

另一种写法

function closure() {
    var name = 'xr'
    return function fn() {
        console.log(name);
    }
}
closure()()

思考题

var name = 'window name'
var obj = {
    name: 'obj name',
    fun: function () {
        return function () {
            console.log(this.name);
        }
    },
    fun2: function () {
        var that = this
        return function () {
            console.log(that.name);
        }
    }
}

obj.fun()() // window name
obj.fun2()() // obj namedw

递归

概念

函数中调用函数自己 此时就形成了递归

递归一定要有结束条件 不然报错

例子

递归求和

function total(num) {
    if (num === 1) return 1 // 结束条件
    return num += total(num - 1) // 调用自己
}
console.log(total(3)); // 6

解析

• 第一轮 3 + total(2)
• 第二轮 3 + 2 + total(1)
• 第三轮 3 + 2 + 1

对象深克隆

var obj = {
    name: "zs",
    list: [1, 2],
    detail: {
        msg: "123",
    },
};
var o = {};
function deepClone(newObj, oldObj) {
    for (var k in oldObj) {
        var item = oldObj[k];
        //   数组也属于对象所以要先在前面判断
        if (item instanceof Array) {
            newObj[k] = [];
            deepClone(newObj[k], item);
        } else if (item instanceof Object) {
            newObj[k] = {};
            deepClone(newObj[k], item);
        } else {
            newObj[k] = item;
        }
    }
}
deepClone(o, obj);
console.log(o);
o.detail.msg = "修改成功";
console.log(obj);

递归生成 tree 数据

let data = [
     { id: 1, name: "办公管理", pid: 0 },
     { id: 2, name: "请假申请", pid: 1 },
     { id: 3, name: "系统设置", pid: 0 },
     { id: 4, name: "权限管理", pid: 3 },
 ];
 function parentDeal(data, pid) {
     //声明返回数组
     let returnArr = [];
     data.forEach((item) => {
         if (item.pid === pid) {
             //除去最高层级的数据（id === 0）
             returnArr.push(item)
             //进入递归中处理 
             childrenDeal(data, item, item.id)
         }
     })
     return returnArr;
 }

 function childrenDeal(arr, itemData, itemId) {
     //首先判断是否有子类  没有默认为空
     itemData.children = itemData.children ? itemData.children : [];
     arr.forEach((item) => {
         //递归条件
         if (item.pid === itemId) {
             //找到则追加至上层数据children中
             itemData.children.push(item)
             //不断递归查找子类直到找不到子类本次递归结束才进入parentDeal函数进行下一最高层级操作
             childrenDeal(arr, item, item.id)
         }
     })
 }
 let resArr = parentDeal(data, 0)
 console.log(resArr)