js中的堆、栈、队列、宏任务、微任务

 

栈（stack) 、堆（heap)、 队列（queue)是js的三种数据结构

 

JS内存机制

　　在js中，每一个数据都需要一个内存空间，内存空间又分为两种，栈内存与堆内存。

 

栈内存（先进后出）

　　存储基础数据类型  Number String Null Undefind Boolearn Symbol

　　如： var a1 = '1'

堆内存

　　存储引用类数据类型

　　如：var a2 = {a:1}

　　JS的引用数据类型，比如数组Array，它们值的大小是不固定的。引用数据类型的值是保存在堆内存中的对象。JavaScript不允许直接访问堆内存中的位置，因此我们不能直接操作对象的堆内存空间。要访问堆内存中的引用数据类型时，实际上我们首先是从栈中获取了该对象的地址引用（或者地址指针），然后再从堆内存中取得我们需要的数据

 

浏览器的事件机制

 console.log(1)
let promise = new Promise(function(resolve,reject){
    console.log(3)
    resolve(100)
}).then(function(data){
    console.log(100)
})
setTimeout(function(){
    console.log(4);
})
console.log(2)

//1 3 2 100 4

　　

对象放在heap（堆）里，常见的基础类型和函数放在stack（栈）里，函数执行的时候在栈里执行。栈里函数执行的时候可能会调一些Dom操作，ajax操作和setTimeout定时器，这时候要等stack（栈）里面的所有程序先走**（注意：栈里的代码是先进后出）**，走完后再走WebAPIs，WebAPIs执行后的结果放在callback queue（回调的队列里，注意：队列里的代码先放进去的先执行），也就是当栈里面的程序走完之后，再从任务队列中读取事件，将队列中的事件放到执行栈中依次执行，这个过程是循环不断的。

• 1.所有同步任务都在主线程上执行，形成一个执行栈
• 2.主线程之外，还存在一个任务队列。只要异步任务有了运行结果，就在任务队列之中放置一个事件。
• 3.一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列,将队列中的事件放到执行栈中依次执行
• 4.主线程从任务队列中读取事件，这个过程是循环不断的

宏任务和微任务

　　概念：微任务和宏任务都是属于队列，而不是放在栈中

　　宏任务：setTimeout setInterval

　　微任务：promise.then()

　　执行顺序：同步任务--微任务--宏任务

　　

console.log('1'); // 同步

setTimeout(function() { 
  console.log('setTimeout'); // 宏任务
}, 0);

Promise.resolve().then(function() {
  console.log('promise1'); // 同步
}).then(function() {
  console.log('promise2'); // 微任务
});

console.log('2');// 同步

//1 2 promise1 promise2 setTimeout