JavaScript 变量和函数提升问题总结
Posted fermin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 变量和函数提升问题总结相关的知识，希望对你有一定的参考价值。
一 什么是javascript 变量提升？
-- JS程序运行时，
（a）变量的声明会被解释器"提升"到方法体内的顶部，初始化赋值操作不提升按顺序执行
（b）函数体内未声明的变量，解释器会在函数体外声明变量，成为全局变量
（c）声明过的函数，整个函数体会被解释器提升到方法体的顶部，初始化赋值操作按顺序执行
1-1 变量提升
eg：变量的声明提升，初始化赋值不提升。
<script> console.log(a); // undefined var a=3; // 若没有var声明，会报错 a is not defined console.log(a); // 3 function fn() { console.log(a); // undefined var a = ‘a‘; //此a为局部变量，没有这一句上下输出的结果都变为3 console.log(a); // a } fn(); console.log(a); // 3 </script>
上述代码相当如下：
<body> <script> var a; console.log(a); // undefined a=3; // 若没有var声明，会报错 a is not defined console.log(a); // 3 function fn() { var a; console.log(a); // undefined a = ‘a‘; //没有这一句上下输出的结果都变为3 console.log(a); // a } fn(); console.log(a); // 3 </script> </body>
对比改掉函数中a的var声明
<script> console.log(a); // undefined var a=3; // 若没有var声明，会报错 a is not defined console.log(a); // 3 function fn() { console.log(a); //变成了 3 a = ‘a‘; //此a变成全局变量，没有这一句上下输出的结果都变为3 console.log(a); // a } fn(); console.log(a); //变成了 a </script>
上述代码相当如下：
<script> console.log(a); // undefined var a=3; // 若没有var声明，会报错 a is not defined console.log(a); // 3 var a; function fn() { console.log(a); // 3 a = ‘a‘; //没有这一句上下输出的结果都变为3 console.log(a); // a } fn(); console.log(a); // a </script>
ps：所以为避免调用函数后，可能修改了外部的变量，函数内的变量都要声明初始化，规范化。
1-2 函数提升
eg：声明式函数将整个函数体提升到顶部，字面量式函数只提升声明过的变量
<script> console.log(f1); //function f1() {} console.log(f2); //undefined function f1() {} var f2 = function () {}; //若没有var声明，上面结果报错f2 is not defined console.log(f2); //function () {} </script>
上述代码相当如下：
<script> function f1() {} //提前 var f2; //提前 console.log(f1); //function f1() {} console.log(f2); //undefined f2 = function () {}; //若没有var声明，上面结果报错f2 is not defined console.log(f2); //function () {} </script>
ps：为避免出现一些意料不到的变量提升的错误，在每一个变量的作用域开始之前，声明并初始化变量，留意函数体中未声明的变量自动变成全局变量后，导致的种种情况
以上是关于JavaScript 变量和函数提升问题总结的主要内容，如果未能解决你的问题，请参考以下文章