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-2765853/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- JavaScript中的預解析(變數提升)介紹!JavaScript變數
- 【Web前端培訓】預解析(變數提升)Web前端變數
- JavaScript變數提升JavaScript變數
- js作用域(變數提升,預解析)例題JS變數
- 關於javascript中變數及函式的提升JavaScript變數函式
- 關於JavaScript變數提升JavaScript變數
- javascript之變數提升與函式提升JavaScript變數函式
- C++中的基本變數型別介紹C++變數型別
- 簡單介紹SQLserver中的declare變數用法SQLServer變數
- Javascript 函式和變數提升JavaScript函式變數
- javascript函式中with的介紹JavaScript函式
- JavaScript中變數提升是什麼?如何實現?JavaScript變數
- javascript中generator函式的介紹JavaScript函式
- 簡單介紹Lua中的變數與賦值方法變數賦值
- 動畫:「變數提升」原理中的變數真的進行提升了嗎?動畫變數
- JavaScript中的安全變數引用JavaScript變數
- [譯] JavaScript 中的私有變數JavaScript變數
- 簡單介紹nginx 變數使用Nginx變數
- 簡單介紹下各種 JavaScript 解析器JavaScript
- JavaScript預解析JavaScript
- javascript instanceof的原型介紹JavaScript原型
- 【JavaScript高階進階】JavaScript變數/函式提升的細節總結JavaScript變數函式
- shell程式設計–bash變數介紹程式設計變數
- JavaScript setTimeout() 介紹JavaScript
- JavaScript變數的生命週期:為什麼let不被提升JavaScript變數
- Python 中變數賦值傳遞時的引用和複製介紹Python變數賦值
- 變數提升變數
- 深入解析JS變數宣告和函式宣告提升JS變數函式
- 死磕JavaScript-鬆散型別、js變數儲存模型、變數提升JavaScript型別JS變數模型
- JS----預編譯及變數提升詳解JS編譯變數
- JavaScript 6 的新特性介紹JavaScript
- javascript字串的語法介紹JavaScript字串
- Python 動態變數名與呼叫介紹Python變數
- 用預編譯去理解函式宣告提升和變數宣告提升編譯函式變數
- JavaScript ECMAScript版本介紹JavaScript
- JavaScript 簡單介紹JavaScript
- JavaScript元素集合介紹JavaScript
- JavaScript 語法介紹JavaScript