javascript
关于JS中变量提升的规则和原理的一点理解(一)
????關于變量提升,以前在一些教程和書籍上都聽到過,平時開發中也知道有這個規律,但是今天突然在一個公開課中聽到時,第一反應時一臉懵逼,然后一百度,瞬間覺得好熟悉啊,差點被這個概念給唬住了,不信我給你看個栗子,你也會恍然大悟的:
(function(){console.log(v);var v = 'I love you';console.log(v); })() // undefined I love you????這就是一個典型的變量提升的例子了,規則是怎樣的呢,我的理解是在一個作用域內,無論你在哪個地方聲明的變量都會被提升到頂部,但不會賦值。像本例子中的v就是先被提升到了函數作用域的頂端,所以實際運行過程是這樣的:
(function(){var v = undefined; console.log(v);v = 'I love you';console.log(v); })() // undefined I love you????為什么會這樣呢,我參考了別人的解釋是因為js的運行機制:
js自上而下的執行過程分為兩個詞法分析和執行兩個階段:詞法分析主要包括:分析形參、分析變量聲明、分析函數聲明三個部分.通過詞法分析將我們寫的js代碼轉成可以執行的代碼,接下來才是執行。
????變量提升還有一種情況,就是函數,詞法分析的時候關于函數聲明的處理與變量聲明的處理不太一致,會一步到位的給當前函數活動對象增加對應函數名的屬性,并重寫該方法。也就是不會像變量那樣先賦值undefined了。說的有點繞,我們還是看代碼,可以先自己看一下執行結果,再看下面的分析:
function a(){var b = 'a';function b(){console.log('b')}alert(b) } a()????簡單說下,詞法分析時對function b的處理:給當前函數活動對象obj增加屬性b,并賦值。即:obj.a = function(){...}; 所以詞法分析后的結果成了這個樣子:
function a(){var b = undefined;b = function b(){console.log('b')}b = 'a';alert(b); // a } a()????這個地方也只是我讀別人觀點的一種借鑒,但是我有點不太確定的是普通變量提升和函數提升同時進行時到底誰在最頂端?反正就目前我的認識變量提升的規律是清楚了,大提升提升的原理是因為JS運行機制的問題,為了盡量避免變量提升帶來的一些困擾,日常開發中文名還是要養成先聲明再使用的好習慣,盡量在函數開頭把所有變量都聲明出來。文中觀點大都是個人理解,如有不對,歡迎指出!
參考文章: https://www.cnblogs.com/huilixieqi/p/6473572.html
轉載于:https://www.cnblogs.com/wancheng7/p/8306711.html
總結
以上是生活随笔為你收集整理的关于JS中变量提升的规则和原理的一点理解(一)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: jsp页面遍历后台传递的对象
- 下一篇: JS笔记