摘要:雖然,在我們工作中應用得越來越廣泛,但是還是很多項目保留著的寫法,所以,今天,帶著大家重新鞏固下下的作用域及預解析機制。概念作用域域,指的是一個空間范圍區域,作用指的是在域內可進行讀寫操作。
雖然,ES6在我們工作中應用得越來越廣泛,但是還是很多項目保留著ES5的寫法,所以,今天,帶著大家重新鞏固下ES5下的作用域及預解析機制。
概念:作用域:域,指的是一個空間、范圍、區域,作用指的是在域內可進行讀寫操作。一個變量的作用域是程序源代碼中定義的這個變量的區域。
在ES5中,只存在全局和函數級作用域,在ES6中,引入了塊級作用域,js的預解析機制大概分為兩個過程:預解析和自上而下逐行解讀
預解析:js解析器會先把var定義的變量、function、參數等一些東西存儲進倉庫里面(內存)。變量var在正式運行之前,都賦值為undefined,function函數在運行之前,就是整個函數塊
逐行解讀
表達式=、+、-、*、/、++、--、!、%.....number()、參數都可以賦值
遇到重名的,只留下一個,變量和函數重名,函數優先級高于變量,只留下函數
函數調用(函數是一個作用域,遇到作用域都會按照先進行預解析,然后逐行解讀的過程執行),先局部找參數,局部找不到就自下向上找(作用域鏈)
概念扯了一大段,估計初學者還是有點暈乎乎,老司機就可以提前下車了,接下來,咋們舉幾個小栗子,結合上面的理論,深入理解。
實踐 例1:alert(a); //error: a is not defined a = 3;分析:
預解析
上面說過,預解析時只會把var 、 function 、參數等存儲起來,所以:
整個作用域沒有找到var function 參數
逐行解讀
預解析后,內存中存在a且被賦值了underfind整個變量,所有,代碼執行過程中程序直接報錯。
例2:alert(a); //undefined var a = 3;分析:
預解析
上面說過,預解析時只會把var 、 function 、參數等存儲起來,所以:
執行到第二行時,a 的值是未定義。
逐行解讀
第一行:預解析后,內存中存在a且被賦值了underfined
例3:alert(a); // function a (){ alert(4); } var a = 1; alert(a); // 1 function a (){ alert(2); } alert(a); // 1 var a = 3; alert(a); // 3 function a (){ alert(4); } alert(a); // 3分析:
域解析
上面說過,預解析時只會把var 、 function 、參數等存儲起來,所以:
執行到第二行時,a 的值是未定義。
執行到第四行時,a 的值是函數本身,也就是function a(){alert(2);}。
執行到第六行時,a 的值還是第四行時的值,也就是function a(){alert(2);},因為函數的優先級比變量高。
執行到第八行時,a 的值就變成了function a(){alert(4);} ,因為當兩個函數重名時,遵循代碼從上往下執行。
逐行解讀
預解析完成之后,就是代碼逐行執行了,
第一行:會彈出function a(){alert(4);} ,因為預解析完成之后,被存進內存的a 的值就是function a(){alert(4);}
第二行:第二行里有表達式,a 被賦了一個新的值1 表達式會改變變量的值。表達式可以改變預解析的值。
第三行:a現在被賦值為1,所有會彈出1
第四行:只是函數的聲明,并沒有用到表達式,而且也沒有函數的調用,所以不會改變a 的值。
第五行:因為a的值沒有變化,所以還是1
第六行:使用了表達式,a 被賦了一個新的值3
第七行:會彈出3
第八行:函數的聲明,不會改變a 的值。
第九行:a的值沒有改變,所以還是3
通過上面的栗子,相信大家應該對變量作用域的預解析過程有一定的了解了,接下來,咋們再舉幾個函數作用域的栗子
var a=1; function fn1(){ alert(a); //undefined var a = 2; } fn1(); alert(a) //1例5:
var a=1; function fn1(a){ alert(a); //1 var a = 2; } fn1(a); alert(a) //1例6:
var a=1; function fn1(a){ alert(a); //1 a = 2; } fn1(a); alert(a) //1例7:
var a=1; function fn1(){ alert(a); //1 a = 2; } fn1(a); alert(a) //2
這幾個栗子想必不用在一步步分析吧,不過就一點小改動,可能結果就截然不同,所以,大家還是需要仔細琢磨下。祝君好運?!厩岸私涣鱍群:659522518】
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/107232.html
摘要:所以覺得把這個執行的詳細過程整理一下,幫助更好的理解。類似的語法報錯的如下圖所示三預編譯階段代碼塊通過語法分析階段之后,語法都正確的下回進入預編譯階段。另開出新文章詳細分析,主要介紹執行階段中的同步任務執行和異步任務執行機制事件循環。 一、概述 js是一種非常靈活的語言,理解js引擎的執行過程對于我們學習js是非常有必要的??戳撕芏噙@方便文章,大多數是講的是事件循環(event loo...
摘要:所以覺得把這個執行的詳細過程整理一下,幫助更好的理解。類似的語法報錯的如下圖所示三預編譯階段代碼塊通過語法分析階段之后,語法都正確的下回進入預編譯階段。另開出新文章詳細分析,主要介紹執行階段中的同步任務執行和異步任務執行機制事件循環。 一、概述 js是一種非常靈活的語言,理解js引擎的執行過程對于我們學習js是非常有必要的??戳撕芏噙@方便文章,大多數是講的是事件循環(event loo...
閱讀 893·2021-11-22 12:04
閱讀 2095·2021-11-02 14:46
閱讀 619·2021-08-30 09:44
閱讀 2102·2019-08-30 15:54
閱讀 721·2019-08-29 13:48
閱讀 1594·2019-08-29 12:56
閱讀 3448·2019-08-28 17:51
閱讀 3286·2019-08-26 13:44