理解JS執(zhí)行順序

Labradors 發(fā)布于2019-08-23 17:19 / 1402人閱讀

摘要：前言眾所周知，的執(zhí)行順序是自上而下的。嚴(yán)格意義上來(lái)說(shuō)，沒(méi)有多線程的概念，所有的程序都是單線程依次執(zhí)行的。代碼的執(zhí)行階段，此階段對(duì)變量進(jìn)行賦值和函數(shù)的聲明。

前言

眾所周知，JS的執(zhí)行順序是自上而下的。
嚴(yán)格意義上來(lái)說(shuō)，javascript沒(méi)有多線程的概念，所有的程序都是單線程依次執(zhí)行的。
就是代碼在執(zhí)行過(guò)程中，另一段代碼想要執(zhí)行就必須等當(dāng)前代碼執(zhí)行完成后才可以進(jìn)行。

注意

js代碼執(zhí)行分為兩個(gè)部分：
1、代碼的檢查裝載階段（預(yù)編譯階段），此階段進(jìn)行變量和函數(shù)的聲明，但是不對(duì)變量進(jìn)行賦值，
   變量的默認(rèn)值為undefined。
2、代碼的執(zhí)行階段，此階段對(duì)變量進(jìn)行賦值和函數(shù)的聲明。
所以：Js的變量提升和函數(shù)提升會(huì)影響JS的執(zhí)行結(jié)果，ES6中的let定義的變量不會(huì)提升 
3、js的執(zhí)行順序，先同步后異步
4、異步中任務(wù)隊(duì)列的執(zhí)行順序： 先微任務(wù)microtask隊(duì)列，再宏任務(wù)macrotask隊(duì)列
5、調(diào)用Promise 中的resolve，reject屬于微任務(wù)隊(duì)列，setTimeout屬于宏任務(wù)隊(duì)列
所以：【同步>異步；微任務(wù)>宏任務(wù)】

示例

console.log("event start")
setTimeout(function () {
    console.log("setTimeout");
});

new Promise(function(resolve,reject){
    console.log("promise start")
    resolve()
}).then(function(){
    console.log("promise end")
})
console.log("event end")

執(zhí)行結(jié)果為：

event start
promise start
event end
promise end
undefined
setTimeout

解釋：

主線程執(zhí)行按順序代碼
遇到 setTimeout, 回調(diào)進(jìn)入到宏任務(wù)隊(duì)列上
遇到 Promise, 立即執(zhí)行, then 函數(shù)進(jìn)入到微任務(wù)隊(duì)列
同步代碼執(zhí)行結(jié)束, 主線程檢查是否存在微任務(wù), 發(fā)現(xiàn) then, 執(zhí)行
微任務(wù)執(zhí)行完畢, 再去查找宏任務(wù) setTimeout, 執(zhí)行
setTimeout 執(zhí)行結(jié)束, 檢查是否存在微任務(wù), 不存在, 結(jié)束.

圖例

云服務(wù)器 GPU云服務(wù)器 js執(zhí)行順序 js 指定執(zhí)行順序 js沒(méi)有按順序執(zhí)行 js沒(méi)有按順序執(zhí)行嗎

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104159.html

相關(guān)文章

javascript引擎執(zhí)行的過(guò)程的理解--執(zhí)行階段

摘要：如果對(duì)語(yǔ)法分析和預(yù)編譯，還有疑問(wèn)引擎執(zhí)行的過(guò)程的理解語(yǔ)法分析和預(yù)編譯階段。參與執(zhí)行過(guò)程的線程分別是引擎線程也稱為內(nèi)核，負(fù)責(zé)解析執(zhí)行腳本程序的主線程例如引擎。以上便是引擎執(zhí)行宏任務(wù)的整個(gè)過(guò)程。一、概述 js引擎執(zhí)行過(guò)程主要分為三個(gè)階段，分別是語(yǔ)法分析，預(yù)編譯和執(zhí)行階段，上篇文章我們介紹了語(yǔ)法分析和預(yù)編譯階段，那么我們先做個(gè)簡(jiǎn)單概括，如下： 1、語(yǔ)法分析：分別對(duì)加載完成的代碼塊進(jìn)行語(yǔ)法...

SnaiLiu 2019-08-23 15:10 評(píng)論0 收藏0
javascript引擎執(zhí)行的過(guò)程的理解--執(zhí)行階段

摘要：如果對(duì)語(yǔ)法分析和預(yù)編譯，還有疑問(wèn)引擎執(zhí)行的過(guò)程的理解語(yǔ)法分析和預(yù)編譯階段。參與執(zhí)行過(guò)程的線程分別是引擎線程也稱為內(nèi)核，負(fù)責(zé)解析執(zhí)行腳本程序的主線程例如引擎。以上便是引擎執(zhí)行宏任務(wù)的整個(gè)過(guò)程。一、概述 js引擎執(zhí)行過(guò)程主要分為三個(gè)階段，分別是語(yǔ)法分析，預(yù)編譯和執(zhí)行階段，上篇文章我們介紹了語(yǔ)法分析和預(yù)編譯階段，那么我們先做個(gè)簡(jiǎn)單概括，如下： 1、語(yǔ)法分析：分別對(duì)加載完成的代碼塊進(jìn)行語(yǔ)法檢驗(yàn)，語(yǔ)...

Achilles 2019-05-23 14:34 評(píng)論0 收藏0
Javascript 事件循環(huán)event loop

摘要：現(xiàn)實(shí)中是這樣的執(zhí)行結(jié)果為結(jié)果告訴我們，是單線程沒(méi)錯(cuò)，不過(guò)不是逐行同步執(zhí)行。搜索了很多官方個(gè)人博客得到了一堆詞引擎主線程事件表事件隊(duì)列宏任務(wù)微任務(wù)，徹底懵逼。。。以此規(guī)則不停的執(zhí)行下去就是我們所聽(tīng)到的事件循環(huán)。都知道javascript是單線程，那么問(wèn)題來(lái)了，既然是單線程順序執(zhí)行，那怎么做到異步的呢？我們理解的單線程應(yīng)該是這樣的，排著一個(gè)個(gè)來(lái)，是同步執(zhí)行。 showImg(https...

Miyang 2019-08-23 14:44 評(píng)論0 收藏0
10分鐘理解JS引擎的執(zhí)行機(jī)制

摘要：深入理解引擎的執(zhí)行機(jī)制靈魂三問(wèn)為什么是單線程的為什么需要異步單線程又是如何實(shí)現(xiàn)異步的呢中的中的說(shuō)說(shuō)首先請(qǐng)牢記點(diǎn)是單線程語(yǔ)言的是的執(zhí)行機(jī)制。深入理解JS引擎的執(zhí)行機(jī)制 1.靈魂三問(wèn) : JS為什么是單線程的? 為什么需要異步? 單線程又是如何實(shí)現(xiàn)異步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.說(shuō)說(shuō)setTimeout 首先,請(qǐng)牢記2...

zzbo 2019-08-26 17:04 評(píng)論0 收藏0
JS每日一題：函數(shù)式編程中代碼組合(compose)如何理解?

摘要：期函數(shù)式編程中代碼組合如何理解定義顧名思義，在函數(shù)式編程中，就是將幾個(gè)有特點(diǎn)的函數(shù)拼湊在一起，讓它們結(jié)合，產(chǎn)生一個(gè)嶄新的函數(shù)代碼理解一個(gè)將小寫(xiě)轉(zhuǎn)大寫(xiě)的函數(shù)一個(gè)在字符后加的函數(shù)將兩個(gè)函數(shù)組合起來(lái)這里假設(shè)我們實(shí)現(xiàn)了每日一題每日一題顯示結(jié)果里上面 20190315期函數(shù)式編程中代碼組合(compose)如何理解? 定義: 顧名思義，在函數(shù)式編程中，Compose就是將幾個(gè)有特點(diǎn)的函數(shù)拼湊在...

Kaede 2019-08-23 16:08 評(píng)論0 收藏0