JavaScript中的預解析(變數提升)介紹!
今天 小千 為大家介紹一下一下JavaScript中的預解析(變數提升)。從什麼是預解析及變數的預解析和函式的預解析及載入流程進行學習(注意:我們這裡說的ES5中的預解析)。
什麼是解析
首先程式碼執行肯定需要一個執行環境,瀏覽器會提供一個供javaScript執行的全域性作用域window。但是在javaScript執行之前會進行預解析,又稱之為變數提升。預解析可以分為兩部分:
- 宣告(declare): var a; 簡單的去理解宣告就是我們宣告一個變數沒有賦值;
- 定義(defined):a= 100; 定義相當於給這個變數進行賦值;
在javaScript執行之前瀏覽器會把全域性作用域下所有帶有var和function關鍵字的進行預解析(注意是帶有var和function關鍵字的),這也就是為什麼我們學習預解析去學習變數的預解析及函式的預解析原因,變數的預解析和函式的預解析存在一定的區別如下:
- var :在預解析的時候只宣告不定義
- function:在預解析的時候宣告+定義都已經完成了
變數的預解析
現在有如下程式碼:
這也就是為什麼在我們看到var a = 10;之前去輸出a沒有報錯而是輸出undefined;宣告一個變數沒有進行賦值那麼就是undefined;
函式的預解析及載入流程
前面我們說過了函式再預解析的時候宣告+定義都已經完成了,現在有如下程式碼:
我們先去看下函式的載入流程:
1. 函式在預解析的時候宣告+定義都已經完成了
2. 因為函式是引用資料型別,會新開闢一個堆記憶體空間,將函式以字串的形式進行儲存,並且會給這堆個記憶體空間分配一個記憶體地址比如xxxfff000
3.函式的呼叫的時候,會開闢一個新的私有作用域,將函式體中內容從上到下依次執行
4.函式每一次呼叫都是相互獨立的,並且函式執行完畢之後自動銷燬
方便大家理解載入流程如圖所示:
從上圖可以分析出函式先進性了預解析,在預解析的時候宣告+定義都已經完成了,並且開闢了一塊堆記憶體空間將函式以字串的形式進行儲存,並且給這塊堆記憶體分配一個記憶體地址便於我們使用的時候去找到它,因為這個時候函式以字串的形式進行儲存,也就是為什麼函式定義函式不去呼叫是不能執行的。
當我們呼叫的時候發現,開闢了個一個新的私有作用域,函式體從上到下去執行,並且每一次呼叫都會形成新的私有作用域,所以是相互獨立的,並且每一個私有作用執行完畢就自動銷燬了,是瀏覽器內建的垃圾回收機制。這樣保證了效能最佳化。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2764599/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- JavaScript中的預解析(變數提升)介紹JavaScript變數
- javascript變數宣告提升簡單介紹JavaScript變數
- javascript 變數簡單介紹JavaScript變數
- 【Web前端培訓】預解析(變數提升)Web前端變數
- javascript變數宣告簡單介紹JavaScript變數
- javascript變數汙染簡單介紹JavaScript變數
- js作用域(變數提升,預解析)例題JS變數
- JavaScript變數提升JavaScript變數
- javascript變數作用於簡單介紹JavaScript變數
- 關於javascript中變數及函式的提升JavaScript變數函式
- 關於JavaScript變數提升JavaScript變數
- javascript將浮點數數變為整數簡單介紹JavaScript
- javascript之變數提升與函式提升JavaScript變數函式
- C++中的基本變數型別介紹C++變數型別
- 簡單介紹SQLserver中的declare變數用法SQLServer變數
- JavaScript中變數提升是什麼?如何實現?JavaScript變數
- Javascript 函式和變數提升JavaScript函式變數
- javascript函式和變數宣告提前簡單介紹JavaScript函式變數
- 動畫:「變數提升」原理中的變數真的進行提升了嗎?動畫變數
- javascript函式中with的介紹JavaScript函式
- PHP的靜態變數介紹PHP變數
- javascript函式讀取變數作用域簡單介紹JavaScript函式變數
- 簡單介紹Lua中的變數與賦值方法變數賦值
- javascript中generator函式的介紹JavaScript函式
- JavaScript入門學習之旅(一)——JavaScript變數提升和函式提升JavaScript變數函式
- [譯] JavaScript 中的私有變數JavaScript變數
- JavaScript中的安全變數引用JavaScript變數
- 簡單介紹nginx 變數使用Nginx變數
- linux 環境變數介紹Linux變數
- JAVA環境變數配置介紹Java變數
- javascript變數的宣告預編譯期間JavaScript變數編譯
- 由變數提升談談 JavaScript Execution Context變數JavaScriptContext
- javascript圖片預載入詳細介紹JavaScript
- javascript圖片預載入簡單介紹JavaScript
- 變數提升變數
- JavaScript預解析JavaScript
- 理解 Javascript 中變數的作用域JavaScript變數
- javascript中的閉包概念簡單介紹JavaScript