JavaScript的运行机制,简单大白话讲解.

今天本来想写一篇async,await的文,但是讲它就得讲Promise,但是讲Promise又得讲异步编程,讲异步编程又得讲JS的运行机制.冷静一下 还是先讲讲基础吧 (本文仅为个人见解,有错误请指正)

JavaScript的运行机制

不知道你有没有面试中被问到JavaScript的运行机制是什么,这个问题很简单,想必答案你肯定能脱口而出.

JavaScript的运行机制是单线程,同一个时只能执行一件事

console.log(1)
console.log(2)
//输出结果  1  2  (这么难的东西 不用我给你解释为什么了吧)

但是我是面试官,我一定会补一句,JS为什么是单线程的,他不能多线程吗?JS天下第一怎么是个弱鸡单线程呢? 现在你还能将答案脱口而出吗? 是不是从小就学1+1等于2,突然被问为什么等于2很气愤,心想这是什么脑抽面试官! 那么,好,带着你的愤怒继续听我逼逼.

JavaScript为什么是单线程的

JS作为浏览器的脚本语言,他的用途就是为了用户与浏览器之间的交互,通俗说就是你在网页上用鼠标点点点, 装逼一点说就是操作DOM. 也许你不会编程你不知道什么是DOM,没事会编程的也不一定知道什么是DOM. 假设DOM就是你养的狗,现在我想让我的狗狗说相声,那我就下达一个指令说相声,想让它说唱,那就下达一个指令说唱,由于我假设的这只狗狗是个智障狗一次只能干一件事(单线程),所以它会先说完相声,之后在说唱. 但假设,它智商和我一样(多线程),还是接收到我这两个指令,那它第一个想法就是,这小王八蛋说什么呢,我是只狗怎么会那些玩意,但奈何我是他主人,他还是会照做,但因为从单线程升级为了多线程,他现在可以一遍说唱一遍说相声,但这是不合理的.JS为了避免操作DOM时执行相互矛盾的命令(比如删除的同时还要添加)的情况发生,所以从它诞生的时候,就决定了JS只能是单线程的.

同步任务和异步任务

既然JS是单线程的,那就少不了有一些缺点.根据单线程一次做一件事的原则,假设有一个指令需要执行很久,它不执行完,后面的任务永远不能开始.也就是大家在某些页面上觉得卡顿的原因之一.

那JS是怎么解决的这些问题呢?听我给你编~,直接上代码,

console.log(1)

setTimeout(()=> {//计时器
  console.log(2);
},1000)

console.log(3)
//按照上文讲的逻辑, JS吗~~单线程吗~~ 输出 1 2 3 呗
//nononono 答案是 1 3 2

说好的单线程呢~原来是JS为了避免一些任务处理时间过长造成代码阻塞,在单线程的原则下,又将任务分为了同步任务和异步任务.

同步任务:假设你是舔狗A,现在你要给女神C发微信,发送成功,然后你就盯着手机屏幕看,5分钟过去了,咦她怎么不回我消息啊,她一定是没看见,再等等,我一定要守着手机不能错过消息(同步任务,你现在不能干别的),又一个小时过去了,她怎么还没回我消息啊,她今天肯定特别忙.不行我一定要盯着手机时刻不能离开(同步任务,你现在不能干别的),天黑了,你等到了C回复(同步任务结束,你可以做别的事情了).

异步任务: 假设你还是是舔狗A,还给女神C发微信,发送成功,然后你就盯着手机屏幕看,咦,她怎么没回我消息,那我先玩一把游戏把(异步任务,没收到回复,也可以先做别的事),两个小时过去了,她还没回我消息.那我出门吃个饭吧(异步任务,没收到回复,也可以先做别的事),天黑了收到C的回复(异步任务结束)

了解同步异步之后再看上面的题

console.log(1)  

setTimeout(()=> {//计时器
  console.log(2);
})

console.log(3)
//第一个console.log(1) 判定为同步任务必须执行完才可以继续 输出1
//第二个setTimeout 判定为异步任务 先不管他了  先看看后面的任务
//第三个console.log(3) 判定为同步任务 必须执行完 输出3
//没有任务了 那回头看异步任务 异步任务输出2
//所以结果是 1 3 2

废话说的太多了,篇幅略长,关于微任务宏任务,事件循环下次说,

那么,拜拜!
![在这里插入图片描述](https://img-blog.csdnimg.cn/51da308e88de45a4a11b4d3ab38ba713.png