JavaScript变量提升及代码执行阶段

最新推荐文章于 2020-12-29 16:12:57 发布

杨旭华　

最新推荐文章于 2020-12-29 16:12:57 发布

阅读量292

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Yxh666/article/details/103107689

版权

JavaScript 专栏收录该内容

17 篇文章 13 订阅

订阅专栏

作用域与JS代码的运行

作用域：变量可以起作用的范围和区域

全局变量和局部变量

全局变量与局部作用域

在任何地方都可以访问到的变量就是 全局变量，全局变量所在的区域就是 全局作用域

局部变量

只在固定的代码片段内可访问到的变量，最常见的例如函数内部的变量，就是 局部变量，局部变量所在的区域就是 局部作用域（函数作用域）
```
不使用var声明的变量是全局变量，不推荐使用
变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁
```

那么如何区分 全局作用域和局部作用域 呢，我们来看一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var a = 1;
    function f1(){
        var a = 2;
    }
</script>
</html>

像上面的，函数里面就是局部作用域，函数外面就是全局作用域

那局部作用域和全局作用域有什么区别呢，我们看：

... ...
     var f2 = function(){
        var a = 1;
    }
    var a = 2;
    console.log(a);
</script>
</html>

我们看这个要是打印出来是1，还是2呢：
在这里插入图片描述

是2，那可能会问，那1呢，没有吗，我们把console.log，放前面：

... ...
     var f2 = function(){
        var a = 1;
    }
    console.log(a);
    var a = 2;
</script>
</html>

在这里插入图片描述
这是undefined啊，既不是1，也不是2，那有细心的人会发现了，我们只是声明变量，并没有调用啊，那我们调用一下在看：

... ...
     var f2 = function(){
        var a = 1;
    }
    f2();
    console.log(a);
    var a = 2;
</script>
</html>

在这里插入图片描述

同样还是个undefined，这时候就说明了什么问题，就是，不管声明还是不声明变量，如果这个变量的声明在函数里面，说明是一个局部变量，如果是局部变量，在外面相当于全局作用域中，想要获取局部作用域中的局部变量，是获取不到的

那我们接着解决另一个问题,我们直接打印下面代码，没有声明变量，更没有赋值，看效果是什么：

    console.log(a);

在这里插入图片描述
看样子是直接报错的，那我们在看一下这样的：

    var a = 2;
    console.log(a);

在这里插入图片描述
打印出来的结果是2，没问题，那我们在看让它们互换位置会怎么样：

    console.log(a);
    var a = 2;

在这里插入图片描述
结果有是undefined，我们都知道代码运行是从上往下运行的，我们看这个代码 console.log(a); 写不写对 **var a = 2;**有什么影响吗，是是不没有影响的，但是是真的有影响的，如果只写 console.log(a); ，是会报错的

如果都写了

    console.log(a);
    var a = 2;

是存在一个叫：变量提升，那么什么叫变量提升呢？
注意：
变量提示这个概念，一定要明白，JavaScript代码是怎样运行的：

   JS 代码的运行分为两个阶段：
1、解析(编译) 阶段：语法检查，变量及函数进行声明
2、运行阶段：变量的赋值，代码流程的执行

上面两行代码就可以拆分成三行代码来看：

    var a;
    console.log(2);
    a = 2;

那么这个就更简单来了，就是：

先进行的变量的声明；
在打印；
最后在赋值；

当然这个是看不到的，那我们就知道了，一个变量，不管是在哪声明的，在执行前，一定是声明好的，所以这种情况我们就称为变量提升

杨旭华　

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript变量提升及代码执行阶段

作用域与JS代码的运行作用域：变量可以起作用的范围和区域全局变量和局部变量全局变量与局部作用域在任何地方都可以访问到的变量就是全局变量，全局变量所在的区域就是全局作用域局部变量只在固定的代码片段内可访问到的变量，最常见的例如函数内部的变量，就是局部变量，局部变量所在的区域就是局部作用域（函数作用域）不使用var声明的变量是全局变量，不推荐使用变量退出作用域之后会...
复制链接

扫一扫