JavaScript-var-变量提升

最新推荐文章于 2024-07-28 14:43:22 发布

王建博09

最新推荐文章于 2024-07-28 14:43:22 发布

阅读量871

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wangjianbo09/article/details/110931338

版权

DATE 20201209 By WJB

变量提升就是作用域中声明的变量在代码预编译时会将所有的变量声明语句提升到最前边。

例如

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>lesson1</title>
    </head>
    <body>
    <script>    
      console.log(world);
    </script>
    </body>
</html>

执行结果：

执行时提示world 未定义，其实在预编译时就会报错。

（1）对做如下修改

在console.log(world);语句下加一句“var world =“i like this world”；”

如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>lesson1</title>
    </head>
    <body>
    <script>    
      console.log(world);
      var world ="i like the world";
    </script>
    </body>
</html>

执行结果如下

执行结果显示，world已经声明但为定义。问题来了，为什么log的时候world未声明而执行结果却是显示已声明？

这里就要提到“变量提升”了，var world ="i like the world"; 可以拆分为变量声明和变量赋值。代码拆分为var world；world ="i like the world";。

其中var world 被提到作用用于最前边。编译时代码如下

<script>    
   var world
   console.log(world);
   world ="i like the world";
</script>

这样就可以解释了执行结果了。

这样就存在一个弊端，既所有的变量都会被声明。如下实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>lesson1</title>
    </head>
    <body>
    <script>    
      if(false)
        { var world ="i like the world"; }
      console.log(world);
    </script>
    </body>
</html>

执行结果如下