第JavaScript中的變量提升和函數提升目錄前言為什么有變量提升javascript變量提升和函數提升總結

前言

在js中對變量進行操作后打印值經常會出現undefined的現象。其實原因是因為js中有一個叫做變量提升的功

舉例：

vardata="lyyyyy";

getData();

functiongetData(){

//第一次打印

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

vardata="yyyyyyy";

//第二次打印

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

}

打印的值第一個為undefined，而第二個打印的值為yyyyy.

原因：

在執行getData()方法的時候會在函數內部首先將變量的聲明提升到第一步。然后再聲明函數內部的函數（如果函數內部有函數的話）。之后才會按照方法內部的邏輯先后順序執行代碼。前兩步只是聲明！！！看到這里應該就已經知道為什么會有上面那樣的結果了。

實際的方法內部代碼執行順序應該是這樣的：

functiongetData(){

//一。聲明變量

vardata;

//二。聲明函數（如果函數內部有函數的話）

//三。按照代碼的順序執行

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

data="yyyyyyy";

//第二次打印

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

}

看到拆分后的代碼執行順序對結果也就不迷茫了。

為什么有變量提升

那么為什么會出現變量提升這個現象呢

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

javascript變量提升和函數提升

變量提升是把變量提升提到函數頂部。需要說明的是，變量提升只是提升變量的聲明，并不會把賦值也提升上來。函數提升是把整個函數都提到前面去。函數表達式不能被提升，函數聲明形式能被提升。

!DOCTYPEhtml

htmllang="en"

head

/head

body

script

//變量提升

functiontest(){

a=2;

vara;

console.log(a);

//2

}

test();

//變量提升,不會把賦值也提升上來

varv='HelloWorld';

(function(){

varv;

console.log(v);

//undefined

v='Iloveyou';

})();

//函數聲明形式能被提升

functionmyTest(){

foo();

functionfoo(){

console.log("helloworld");

//helloworld

}

}

myTest();

//函數表達式不能被提升

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

總結

1.js會將變量的聲明提升到js頂部執行，因此對于這種語句:vara=2;其實上js會將其分為vara;和a=2;兩部分，并且將var