一 什么是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:为避免出现一些意料不到的变量提升的错误,在每一个变量的作用域开始之前,声明并初始化变量,留意函数体中未声明的变量自动变成全局变量后,导致的种种情况
原文地址:https://www.cnblogs.com/fermin/p/9062311.html
时间: 2024-10-09 09:04:22