本文實例講述了JavaScript變量聲明提升。分享給大家供大家參考，具體如下：

如下代碼輸出的結果是？

var num = 123;function foo1(){ console.log( num ); //undefined var num = 456; console.log( num ); //456}foo1();

Javascript代碼執行分為兩個大步：

預解析的過程代碼的執行過程

1.預解析與變量聲明提升

程序在執行過程中，會先將代碼讀取到內存中檢查，會將所有的聲明在此進行標記，所謂的標記就是讓JS解析器知道有這個名字，后面在使用名字的時候不會出現未定義的錯誤。這個標記過程就是提升。

聲明：

名字的聲明，標識符聲明（變量名聲明）

名字的聲明就是讓解析器知道有這個名字 名字沒有任何數據與之對應

函數的聲明

函數聲明包含兩部分

函數聲明與函數表達式有區別，函數聲明是單獨寫在一個結構中，不存在任何語句，邏輯判斷等結構中

function f() {}function func() { // 函數聲明} if ( true ) { function func2 () {} //函數表達式}var f = function func3 () {}; //函數表達式this.sayHello = function () {}; //函數表達式var i= 1；function func4 () {} // 函數聲明 var j = 2;}

首先函數聲明告訴解析器有這個名字存在，該階段與名字聲明一樣告訴解析器，這個名字對應的函數體是什么

var num = 1;function num () { alert( num );}num(); // 報錯

分析

預解析代碼，提示名字

首先提升名字num 再提升函數名，但是名字已經存在，因此只做第二部，讓名字與函數體對應上 結論就是 代碼中已經有一個函數 num 了

開始執行代碼，第一句話從賦值語句開始執行

給num賦值為1 覆蓋了函數 調用num，由于num中存儲的是數組1，因此報錯2.代碼分析舉例程序1

var num = 123;function foo1(){ console.log( num ); //undefined var num = 456; console.log( num ); //456}foo1(); 預解析，提升 num 名字和 foo1 函數 執行第一句話：num = 123;

執行函數調用

函數調用進入函數的一瞬間也要進行預解析，此時解析的是變量名 num 在函數內部是一個獨立的空間，允許使用外部的數據，但是現在 num 聲明同名，即覆蓋外面的 執行第一句 打印num，沒有數據，undefined 執行第二句 賦值：num = 456； 執行第三句 打印num，結果456 程序2

if ( ！ ’a’ in window ) { var a = 123;}console.log( a );

首先，預解析，讀取提升 a ，有一個名字 a 存在了

其次，in 運算符：判斷某一個字符串描述的屬性名是否在對象中

var o = { name:’jim’ }; ’name’ in o，’age’ in o

執行第一個判斷：! ’a’ in window

’a’ in window 結果為真 ！得到假 if內部的賦值不進行

最后，打印結果 a 的值為 undefined

程序3

if ( false ) { function f1 () { console.log( ’true’ ); }} else { function f1 () { console.log( ’false’ ); }}f1();

預解析：提升 f1 函數，只保留提升后的內容，所以打印是 false

執行代碼，第一句話就是一個空的if結構

if ( true ) {} else {}

執行函數調用，得到 false

3.問題

function foo () } {}var foo = function () {};

上面的語法是聲明，可以提升，因此在函數上方也可以調用

下面的語法是函數表達式，函數名就是foo ，他會提升，提升的不是函數體

函數表達式也是支持名字語法

var foo = function func1 () {};func();

函數有一個屬性name，表示的是函數名，只有帶有名字的函數定義，才會有name屬性值，否則是“”

但是，函數表達式的名字，只允許在函數內部使用，IE8可以訪問 （）可以將數據轉化為表達式

新的瀏覽器中，寫在if、while、do..while結構中的函數，都會將函數的聲明轉換成特殊的函數表達式 將代碼

if (...) { function foo () { ... }}

轉換成

if (...) { var foo = function foo () { .... }}

完。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。