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)
}
我們來看一下上面的這段代碼,既然延時器時間設(shè)置為0,那么應(yīng)該執(zhí)行一遍循環(huán)就應(yīng)該立即打印出一個i,但是最終的打印結(jié)果為:4,4,4。之所以會出現(xiàn)上面的結(jié)果,正是因為js代碼是單線程應(yīng)用。
在執(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)轉(zhuǎ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); //輸出的結(jié)果為1,2,3
},0);
}
//用自執(zhí)行函數(shù)進行包裹
for(var i=1; i<=3; i++){
!function(i){
setTimeOut(function(){
console.log(i); //輸出的結(jié)果為1,2,3
},0);
}(i)
}
二、js中的函數(shù)作用域和代碼的執(zhí)行
>>>函數(shù)作用域
我們先來了解一下以下幾個概念:
1、在js語言中,沒有類似于c語言這樣的塊級作用域。
2、js語言中的頂級作用域為window對象范圍內(nèi),稱為全局作用域,在全局作用域中聲明的變量為全局變量。
3、js函數(shù)范圍內(nèi)的變量只能在函數(shù)內(nèi)部使用,函數(shù)外部無法使用,這樣的變量為局部變量。
4、js函數(shù)可以嵌套,多個函數(shù)的嵌套構(gòu)成了作用域的層層嵌套,這稱為js中的作用域鏈。
5、js作用域鏈變量訪問規(guī)則:
?。?)、當前作用域內(nèi)存在要訪問的變量時,則使用當前作用域中的變量。
(2)、當前作用域中不存在要訪問的變量時,則會到上一層作用域中尋找,直到全局作用域。
>>>執(zhí)行順序
js代碼執(zhí)行分為兩個部分:
1、代碼的檢查裝載階段(預(yù)編譯階段),此階段進行變量和函數(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ī)則,當前作用域內(nèi)存在要訪問的變量a,所以使用當前作用域中的變量。再根據(jù)js代碼的執(zhí)行順序,此時的a只是聲明了而并未被賦值,默認為undefined,所以輸出undefined。
而第二個a,輸出1,正是因為此時的a已經(jīng)被聲明且被賦值,所以a輸出1。
總結(jié)
以上所述是小編給大家介紹的JavaScript代碼執(zhí)行的先后順序問題,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
js遍歷詳解(forEach, map, for, for...in, for...of)
在本篇文章里小編給大家整理的是關(guān)于js中的各種遍歷(forEach, map, for, for...in, for...of)相關(guān)知識點用法總結(jié),需要的朋友們參考下。2019-08-08
js關(guān)閉瀏覽器窗口及檢查瀏覽器關(guān)閉事件
js關(guān)閉瀏覽器窗口,不彈出提示框。支持ie6+,火狐,谷歌等瀏覽器,下面以一個示例為大家詳細介紹下具體的實現(xiàn)方法,感興趣的朋友可以參考下2013-09-09
js中方法重載如何實現(xiàn)?以及函數(shù)的參數(shù)問題
js中沒有辦法直接實現(xiàn)方法重載,但每一個函數(shù)都有一個特殊的參數(shù)arguments,利用它可以實現(xiàn)方法的重載,具體示例如下2013-08-08

