JavaScript代碼執(zhí)行的先后順序問題
一、js--->單線程
嚴格意義上來說,javascript沒有多線程的概念,所有的程序都是單線程依次執(zhí)行的。
1、什么是單線程?
通俗點說,就是代碼在執(zhí)行過程中,另一段代碼想要執(zhí)行就必須等當前代碼執(zhí)行完成后才可以進行。我們拿一段代碼來解釋一下吧
for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); //輸出:4,4,4 },0) }
我們來看一下上面的這段代碼,既然延時器時間設置為0,那么應該執(zhí)行一遍循環(huán)就應該立即打印出一個i,但是最終的打印結果為:4,4,4。之所以會出現(xiàn)上面的結果,正是因為js代碼是單線程應用。
在執(zhí)行過程中,先遇到for循環(huán),for循環(huán)先進入線程。當i=1時,循環(huán)走到setTimeOut后,此時的for循環(huán)還沒有執(zhí)行完成,setTimeOut就會被放入一個地方(線程池)等待執(zhí)行。此時for循環(huán)繼續(xù)執(zhí)行,當i=2時,for循環(huán)仍沒有執(zhí)行完,這時的setTimeOut仍會被放在線程池中等待執(zhí)行……依次類推,直到for循環(huán)轉完3遍后,for循環(huán)執(zhí)行完了,此時線程空閑了,在線程池中等待執(zhí)行的setTimeOut依次執(zhí)行打印i,而for循環(huán)執(zhí)行完成后,i變成了4,所以打印出了三個4。
2、如果想要改變上面的狀況可以運用以下代碼
//將var變?yōu)閘et for(let i=1; i<=3; i++){ setTimeOut(function(){ console.log(i); //輸出的結果為1,2,3 },0); } //用自執(zhí)行函數(shù)進行包裹 for(var i=1; i<=3; i++){ !function(i){ setTimeOut(function(){ console.log(i); //輸出的結果為1,2,3 },0); }(i) }
二、js中的函數(shù)作用域和代碼的執(zhí)行
>>>函數(shù)作用域
我們先來了解一下以下幾個概念:
1、在js語言中,沒有類似于c語言這樣的塊級作用域。
2、js語言中的頂級作用域為window對象范圍內,稱為全局作用域,在全局作用域中聲明的變量為全局變量。
3、js函數(shù)范圍內的變量只能在函數(shù)內部使用,函數(shù)外部無法使用,這樣的變量為局部變量。
4、js函數(shù)可以嵌套,多個函數(shù)的嵌套構成了作用域的層層嵌套,這稱為js中的作用域鏈。
5、js作用域鏈變量訪問規(guī)則:
(1)、當前作用域內存在要訪問的變量時,則使用當前作用域中的變量。
(2)、當前作用域中不存在要訪問的變量時,則會到上一層作用域中尋找,直到全局作用域。
>>>執(zhí)行順序
js代碼執(zhí)行分為兩個部分:
1、代碼的檢查裝載階段(預編譯階段),此階段進行變量和函數(shù)的聲明,但是不對變量進行賦值,變量的默認值為undefined。
2、代碼的執(zhí)行階段,此階段對變量進行賦值和函數(shù)的聲明。
看了上面的一些具體的概念,我們拿一段代碼進行舉例說明:
var a=1; //聲明了一個全局變量 function func(){ console.log(a); //輸出:undefined。打印a,而在func這個作用域中已經(jīng)聲明了a變量,按照js的執(zhí)行順序,此時的a并未被賦值。 var a=1; console.log(a); //輸出:1。 } func();
看上面的代碼:第一個a輸出undefined。原因:js作用域鏈的訪問規(guī)則,當前作用域內存在要訪問的變量a,所以使用當前作用域中的變量。再根據(jù)js代碼的執(zhí)行順序,此時的a只是聲明了而并未被賦值,默認為undefined,所以輸出undefined。
而第二個a,輸出1,正是因為此時的a已經(jīng)被聲明且被賦值,所以a輸出1。
總結
以上所述是小編給大家介紹的JavaScript代碼執(zhí)行的先后順序問題,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
相關文章
Bootstrap CSS組件之面包屑導航(breadcrumb)
這篇文章主要為大家詳細介紹了Bootstrap CSS組件之面包屑導航(breadcrumb),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12