【JavaScript】变量提升和函数提升
2021/4/14 14:55:40
本文主要是介绍【JavaScript】变量提升和函数提升,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<script> console.log(a); var a = "a"; function foo() { console.log(a); var a = 'a1'; } foo(); </script>
由于js自上而下逐行解释执行的,有人可能会认为第一行代码引用了一个没有声明的变量a,会抛出 ReferenceError 异常,而注掉第一行后,由于变量 a 在第二行log之前已经声明并赋值,打印结果应该是 "a"。而实际的执行结果是:
在js代码执行前引擎会先进行预编译,预编译期间会将变量声明与函数声明提升至其对应作用域的最顶端。举例来说:
<script> console.log(a); var a = 3; //预编译后的代码结构可以看做如下 var a; // 将变量a的声明提升至最顶端,赋值逻辑不提升。 console.log(a); // undefined a = 3; // 代码执行到原位置即执行原赋值逻辑 </script>
变量提升
变量声明的提升是以变量所处的第一层词法作用域为“单位”的,即全局作用域中声明的变量会提升至全局最顶层,函数内声明的变量只会提升至该函数作用域最顶层。那么开始的一段代码经过预编译则变为:
<script> var a; console.log(a); //undefined a = "a"; function foo() { var a; //全局变量会被局部作用域中的同名变量覆盖 console.log(a); //undefined a = 'a1'; } foo(); </script>
函数提升
有了上面变量提升的说明,函数提升理解起来就比较容易了,但较之变量提升,函数的提升还是有区别的。举例说明:
<script> console.log(foo1); foo1(); console.log(foo2); foo2(); function foo1 () { console.log("foo1"); }; var foo2 = function () { console.log("foo2"); }; </script>
即函数提升只会提升函数声明,而不会提升函数表达式,再举一个小例子:
<script> var a = 1; function foo() { a = 10; console.log(a); return; function a() {}; } foo(); console.log(a); </script>
上面的代码块经过预编译后可以看做如下形式(只分析foo方法内部情况):
<script> var a = 1; // 定义一个全局变量 a function foo() { // 首先提升函数声明function a () {}到函数作用域顶端, 然后function a () {}等同于 var a = function() {};最终形式如下 var a = function () {}; // 定义局部变量 a 并赋值。 a = 10; // 修改局部变量 a 的值,并不会影响全局变量 a console.log(a); // 打印局部变量 a 的值:10 return; } foo(); console.log(a); // 打印全局变量 a 的值:1 </script>
变量提升和函数提升的顺序
在作用域中,不管是变量还是函数,都会提升到作用域最开始的位置。不同的是,函数的提升后的位置是在变量提升后的位置之后的。
<script> function foo() { console.log(a); var a = 1; console.log(a); function a() { } console.log(a); } foo(); </script>
上面的代码在js眼中是这样解析的:
<script> function foo() { var a; function a() { } console.log(a); a = 1; console.log(a); console.log(a); } foo(); </script>
注意:只有声明的变量和函数才会进行提升,隐式全局变量不会提升。例:
<script> function foo() { console.log(a); console.log(b); // 报错 b = 'aaa'; var a = 'bbb'; console.log(a); console.log(b); } foo(); </script>
参考链接:
https://blog.csdn.net/kontar123/article/details/83508740
https://www.cnblogs.com/lvonve/p/9871226.html#1589567655
这篇关于【JavaScript】变量提升和函数提升的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行