JavaScript中的變量提升和函數(shù)提升

第JavaScript中的變量提升和函數(shù)提升目錄前言為什么有變量提升javascript變量提升和函數(shù)提升總結(jié)

前言

在js中對(duì)變量進(jìn)行操作后打印值經(jīng)常會(huì)出現(xiàn)undefined的現(xiàn)象。其實(shí)原因是因?yàn)閖s中有一個(gè)叫做變量提升的功

舉例：

vardata="lyyyyy";

getData();

functiongetData(){

//第一次打印

console.log("data值為:",data);

vardata="yyyyyyy";

//第二次打印

console.log("data值為:",data);

}

打印的值第一個(gè)為undefined，而第二個(gè)打印的值為yyyyy.

原因：

在執(zhí)行g(shù)etData()方法的時(shí)候會(huì)在函數(shù)內(nèi)部首先將變量的聲明提升到第一步。然后再聲明函數(shù)內(nèi)部的函數(shù)（如果函數(shù)內(nèi)部有函數(shù)的話）。之后才會(huì)按照方法內(nèi)部的邏輯先后順序執(zhí)行代碼。前兩步只是聲明?。?！看到這里應(yīng)該就已經(jīng)知道為什么會(huì)有上面那樣的結(jié)果了。

實(shí)際的方法內(nèi)部代碼執(zhí)行順序應(yīng)該是這樣的：

functiongetData(){

//一。聲明變量

vardata;

//二。聲明函數(shù)（如果函數(shù)內(nèi)部有函數(shù)的話）

//三。按照代碼的順序執(zhí)行

console.log("data值為:",data);

data="yyyyyyy";

//第二次打印

console.log("data值為:",data);

}

看到拆分后的代碼執(zhí)行順序?qū)Y(jié)果也就不迷茫了。

為什么有變量提升

那么為什么會(huì)出現(xiàn)變量提升這個(gè)現(xiàn)象呢

其實(shí)js和其他語(yǔ)言一樣，都要經(jīng)歷編譯和執(zhí)行階段。而js在編譯階段的時(shí)候，會(huì)搜集所有的變量聲明并且提前聲明變量，而其他的語(yǔ)句都不會(huì)改變他們的順序，因此，在編譯階段的時(shí)候，第一步就已經(jīng)執(zhí)行了，而第二步則是在執(zhí)行階段執(zhí)行到該語(yǔ)句的時(shí)候才執(zhí)行。

javascript變量提升和函數(shù)提升

變量提升是把變量提升提到函數(shù)頂部。需要說(shuō)明的是，變量提升只是提升變量的聲明，并不會(huì)把賦值也提升上來(lái)。函數(shù)提升是把整個(gè)函數(shù)都提到前面去。函數(shù)表達(dá)式不能被提升，函數(shù)聲明形式能被提升。

!DOCTYPEhtml

htmllang="en"

head

/head

body

script

//變量提升

functiontest(){

a=2;

vara;

console.log(a);

//2

}

test();

//變量提升,不會(huì)把賦值也提升上來(lái)

varv='HelloWorld';

(function(){

varv;

console.log(v);

//undefined

v='Iloveyou';

})();

//函數(shù)聲明形式能被提升

functionmyTest(){

foo();

functionfoo(){

console.log("helloworld");

//helloworld

}

}

myTest();

//函數(shù)表達(dá)式不能被提升

functionmyTest2(){

foo();

//fooisnotafunction

varfoo=functionfoo(){

console.log("helloworld");

}

}

myTest2();

/script

/body

/html

!DOCTYPEhtml

htmllang="en"

head

/head

body

script

//輸出GoodbyeJack

varname='World!';

(function(){

if(typeofname==='undefined'){

varname='Jack';

console.log('Goodbye'+name);

}else{

console.log('Hello'+name);

})();

//輸出HelloWorld!

varname2='World!';

(function(){

if(typeofname2==='undefined'){

name2='Jack';

console.log('Goodbye'+name2);

}else{

console.log('Hello'+name2);

})();

//輸出HelloWorld!

varname3='World!';

(function(){

if(typeof3==='undefined'){

varname3='Jack';

console.log('Goodbye'+name3);

}else{

console.log('Hello'+3);

})();

/script

/body

/html

總結(jié)

1.js會(huì)將變量的聲明提升到j(luò)s頂部執(zhí)行，因此對(duì)于這種語(yǔ)句:vara=2;其實(shí)上js會(huì)將其分為vara;和a=2;兩部分，并且將var