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

目录

前言

为什么有变量提升

javascript变量提升和函数提升

总结

前言

在js中对变量进行操作后打印值经常会出现undefined的现象。其实原因是因为js中有一个叫做变量提升的功

举例:

var data="lyyyyy"; getData(); function getData(){ //第一次打印 console.log("data值为: ", data); vardata="yyyyyyy"; //第二次打印 console.log("data值为: ", data); }

打印的值第一个为undefined,而第二个打印的值为yyyyy.

原因:

在执行getData()方法的时候会在函数内部首先将变量的声明提升到第一步。然后再声明函数内部的函数(如果函数内部有函数的话)。之后才会按照方法内部的逻辑先后顺序执行代码。前两步只是声明!!!看到这里应该就已经知道为什么会有上面那样的结果了。

实际的方法内部代码执行顺序应该是这样的:

function getData(){ //一。声明变量 vardata; //二。声明函数(如果函数内部有函数的话) //三。按照代码的顺序执行 console.log("data值为: ", data); data="yyyyyyy"; //第二次打印 console.log("data值为: ", data); }

看到拆分后的代码执行顺序对结果也就不迷茫了。

为什么有变量提升

那么为什么会出现变量提升这个现象呢?

其实js和其他语言一样,都要经历编译和执行阶段。而js在编译阶段的时候,会搜集所有的变量声明并且提前声明变量,而其他的语句都不会改变他们的顺序,因此,在编译阶段的时候,第一步就已经执行了,而第二步则是在执行阶段执行到该语句的时候才执行。

javascript变量提升和函数提升

变量提升是把变量提升提到函数顶部。需要说明的是,变量提升只是提升变量的声明,并不会把赋值也提升上来。函数提升是把整个函数都提到前面去。函数表达式不能被提升,函数声明形式能被提升。

<!DOCTYPE html> <html lang="en"> <head> </head> <body> <script>     //变量提升     function test(){         a=2;         var a;         console.log(a);   //2     }     test();     //变量提升,不会把赋值也提升上来     var v='Hello World';     (function(){         var v;         console.log(v);  //undefined         v='I love you';     })();     //函数声明形式能被提升     function myTest(){         foo();         function foo(){             console.log("hello world");  //hello world         }     }     myTest();     //函数表达式不能被提升     function myTest2(){         foo();    //foo is not a function         var foo =function foo(){             console.log("hello world");         }     }     myTest2(); </script> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> </head> <body> <script> //输出Goodbye Jack var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })(); //输出Hello World! var name2 = 'World!'; (function () { if (typeof name2 === 'undefined') { name2 = 'Jack'; console.log('Goodbye ' + name2); } else { console.log('Hello ' + name2); } })(); //输出Hello World! var name3 = 'World!'; (function () { if (typeof this.name3 === 'undefined') { var name3 = 'Jack'; console.log('Goodbye ' + name3); } else { console.log('Hello ' + this.name3); } })(); </script> </body> </html> 总结

1.js会将变量的声明提升到js顶部执行,因此对于这种语句:var a = 2;其实上js会将其分为var a;和a = 2;两部分,并且将var a这一步提升到顶部执行。

2.变量提升的本质其实是由于js引擎在编译的时候,就将所有的变量声明了,因此在执行的时候,所有的变量都已经完成声明。

3.当有多个同名变量声明的时候,函数声明会覆盖其他的声明。如果有多个函数声明,则是由最后的一个函数声明覆盖之前所有的声明。

到此这篇关于JavaScript中的变量提升和函数提升的文章就介绍到这了,更多相关js变量提升内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    excel怎么用乘法函数

    excel怎么用乘法函数,乘法,函数,哪个,excel乘法函数怎么用?1、首先用鼠标选中要计算的单元格。2、然后选中单元格后点击左上方工具栏的fx公

    excel中乘法函数是什么?

    excel中乘法函数是什么?,乘法,函数,什么,打开表格,在C1单元格中输入“=A1*B1”乘法公式。以此类推到多个单元。1、A1*B1=C1的Excel乘法公式

    标准差excel用什么函数?

    标准差excel用什么函数?,函数,标准,什么,在数据单元格的下方输入l标准差公式函数公式“=STDEVPA(C2:C6)”。按下回车,求出标准公差值。详细

    针灸科设置|针灸科常见操作

    针灸科设置|针灸科常见操作,,1. 针灸科常见操作⒈临床实践技能(临床实际本领)考核 ⑴基本操作:①中医四诊、针灸、推拿、拔罐等中医临床技术;

    如何解决errtor加载操作系统的引导

    如何解决errtor加载操作系统的引导,,电脑启动后,屏幕上出现了errtor加载操作system错误提示,无法继续启动进入系统。以下是diskedit软件解决

    萤石设置方法|萤石操作手册下载

    萤石设置方法|萤石操作手册下载,,1. 萤石操作手册下载寻找验证码方法:恢复萤石云的验证码,需要在浏览器输入摄像头的ip地址登陆到一下界面:此