JavaScript中的变量提升和函数提升

第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