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

如下代碼輸出的結(jié)果是？

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

Javascript代碼執(zhí)行分為兩個(gè)大步：

預(yù)解析的過(guò)程
代碼的執(zhí)行過(guò)程

1.預(yù)解析與變量聲明提升

程序在執(zhí)行過(guò)程中，會(huì)先將代碼讀取到內(nèi)存中檢查，會(huì)將所有的聲明在此進(jìn)行標(biāo)記，所謂的標(biāo)記就是讓JS解析器知道有這個(gè)名字，后面在使用名字的時(shí)候不會(huì)出現(xiàn)未定義的錯(cuò)誤。這個(gè)標(biāo)記過(guò)程就是提升。

聲明：

名字的聲明，標(biāo)識(shí)符聲明（變量名聲明）

• 名字的聲明就是讓解析器知道有這個(gè)名字
• 名字沒(méi)有任何數(shù)據(jù)與之對(duì)應(yīng)

函數(shù)的聲明

• 函數(shù)聲明包含兩部分

• 函數(shù)聲明與函數(shù)表達(dá)式有區(qū)別，函數(shù)聲明是單獨(dú)寫(xiě)在一個(gè)結(jié)構(gòu)中，不存在任何語(yǔ)句，邏輯判斷等結(jié)構(gòu)中

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

首先函數(shù)聲明告訴解析器有這個(gè)名字存在，該階段與名字聲明一樣
告訴解析器，這個(gè)名字對(duì)應(yīng)的函數(shù)體是什么

var num = 1;
function num () {
 alert( num );
}
num(); // 報(bào)錯(cuò)

分析

1. 預(yù)解析代碼，提示名字

   • 首先提升名字num
   • 再提升函數(shù)名，但是名字已經(jīng)存在，因此只做第二部，讓名字與函數(shù)體對(duì)應(yīng)上
   • 結(jié)論就是 代碼中已經(jīng)有一個(gè)函數(shù) num 了

2. 開(kāi)始執(zhí)行代碼，第一句話(huà)從賦值語(yǔ)句開(kāi)始執(zhí)行

   • 給num賦值為1
   • 覆蓋了函數(shù)
3. 調(diào)用num，由于num中存儲(chǔ)的是數(shù)組1，因此報(bào)錯(cuò)

2.代碼分析舉例

程序1

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

1. 預(yù)解析，提升 num 名字和 foo1 函數(shù)
2. 執(zhí)行第一句話(huà)：num = 123;

3. 執(zhí)行函數(shù)調(diào)用

   • 函數(shù)調(diào)用進(jìn)入函數(shù)的一瞬間也要進(jìn)行預(yù)解析，此時(shí)解析的是變量名 num
   • 在函數(shù)內(nèi)部是一個(gè)獨(dú)立的空間，允許使用外部的數(shù)據(jù)，但是現(xiàn)在 num 聲明同名，即覆蓋外面的
   • 執(zhí)行第一句 打印num，沒(méi)有數(shù)據(jù)，undefined
   • 執(zhí)行第二句 賦值：num = 456；
   • 執(zhí)行第三句 打印num，結(jié)果456

程序2

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

首先，預(yù)解析，讀取提升 a ，有一個(gè)名字 a 存在了

其次，in 運(yùn)算符：判斷某一個(gè)字符串描述的屬性名是否在對(duì)象中

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

• 執(zhí)行第一個(gè)判斷：! 'a' in window

  • 'a' in window 結(jié)果為真
  • ！得到假
• if內(nèi)部的賦值不進(jìn)行

最后，打印結(jié)果 a 的值為 undefined

程序3

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

預(yù)解析：提升 f1 函數(shù)，只保留提升后的內(nèi)容，所以打印是 false

執(zhí)行代碼，第一句話(huà)就是一個(gè)空的if結(jié)構(gòu)

if ( true ) {
} else {
}

執(zhí)行函數(shù)調(diào)用，得到 false

3.問(wèn)題

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

上面的語(yǔ)法是聲明，可以提升，因此在函數(shù)上方也可以調(diào)用

下面的語(yǔ)法是函數(shù)表達(dá)式，函數(shù)名就是foo ，他會(huì)提升，提升的不是函數(shù)體

函數(shù)表達(dá)式也是支持名字語(yǔ)法

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

函數(shù)有一個(gè)屬性name，表示的是函數(shù)名，只有帶有名字的函數(shù)定義，才會(huì)有name屬性值，否則是“”

• 但是，函數(shù)表達(dá)式的名字，只允許在函數(shù)內(nèi)部使用，IE8可以訪(fǎng)問(wèn)
• （）可以將數(shù)據(jù)轉(zhuǎn)化為表達(dá)式

新的瀏覽器中，寫(xiě)在if、while、do..while結(jié)構(gòu)中的函數(shù)，都會(huì)將函數(shù)的聲明轉(zhuǎn)換成特殊的函數(shù)表達(dá)式
將代碼

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

轉(zhuǎn)換成

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

完。

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

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論