JavaScript变量声明提升

一、什么是声明提升

在JavaScript中，变量和函数的声明都将被提升到函数的最顶部。

变量可以在使用后声明，也就是变量可以先使用后声明。

声明提升：即变量和函数会被解释器提升到方法体的最顶部。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>javascript 声明提升</title>
 6     </head>
 7     <body>
 8         <p id="demo"></p>
 9         <script>
10             x = 5
11             elem = document.getElementById("demo");   //查找元素
12             elem.innerHTML=x;   //在原素显示
13             var x   //声明变量x          
14         </script>
15     </body>
16 </html>

JavaScript初始化变量不会提升

JavaScript只有声明的变量会提升，初始化的变量不会提升

eg：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>javascript 初始化变量</title>
 6     </head>
 7     <body>
 8         <p id="demo"></p>
 9         <script>
10             var x=5;
11             var y=6;
12             elem = document.getElementById("demo");
13             elem.innerHTML=x+" "+y; //显示5 6
14         </script>
15     </body>
16 </html>

如果在后面声明y变量，如：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>javascript 初始化变量</title>
 6     </head>
 7     <body>
 8         <p id="demo"></p>
 9         <script>
10             var x=5;
11             elem = document.getElementById("demo");
12             elem.innerHTML="x is "+x+" "+"y is "+y; //显示x is 5 y is undefined
13             var y=6;
14         </script>
15     </body>
16 </html>

上述代码y输出为undefined，是因为变量声明var y提升了，但是初始化y=6并不会被提升，所以输出是，y是一个未定义的变量。

上述代码中的var y=6与在顶部声明var y，在底部在声明变量 y=6是一样的；

那么为了避免出现类似的问题，我们通常在每个作用域的开始声明这些变量。

posted @ 2023-01-11 15:56  H年轻的心  阅读(66)  评论(0)    收藏  举报