JavaScript之变量的作用域

最新推荐文章于 2024-07-09 19:28:48 发布

JZJZY

最新推荐文章于 2024-07-09 19:28:48 发布

阅读量267

点赞数

文章标签：前端 JavaScript 变量的作用域

本文链接：https://blog.csdn.net/weixin_43772533/article/details/106984338

版权

变量的作用域意思就是变量可以在什么位置使用

变量的作用域分为：局部作用域，全局作用域
局部变量：
在函数内声明的变量，只能在该函数内访问
函数运行结束，变量自动销毁
函数参数也是局部变量，只能在当前函数中访问
全局变量：
只要不是在函数内声明的变量，在任何位置都可以访问你
当所在页面关闭时销毁
在函数内未使用var声明的变量，直接赋值的变量，也是全局变量

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function show() {
            var age = 21; //局部变量，只能在当前函数中访问
            sex = "male"; //全局变量，在函数内未使用var声明，直接赋值的变量，也是全局变量
            console.log("show1：" + name + "," + age + "," + sex);
        }
        show();
        console.log(sex);
        console.log(age);
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

变量作用域的就近原则：
如果局部变量和全局变量同名，默认访问的是局部变量
如果想访问全局变量，必须使用window前缀，在一定条件下也可以使用this前缀

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var hobby = "吃饭";

        function show() {
            var hobby = "睡觉";
            console.log("局部变量：" + hobby);
            console.log("全局变量：" + window.hobby);
            console.log("全局变量：" + this.hobby);
        }
        show();
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

在ES6之前，js中没有块级作用域的概念
只要不是在函数中定义的变量都是全局变量

ES6新增let和const命令
let命令
ES6新增let命令，用来声明变量，支持块级作用域，变量只在let命令所在的代码块内有效
不存在变量提升，只能在声明的位置后面使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function show() {
            for (let i = 1; i <= 10; i++) {
                let name = "宝宝"; //局部变量，只在for循环中可以访问
                console.log(name + " 心里苦+" + i);
            }
            console.log(name); //不可以
            console.log(i); //不可以
        }
        show();
        console.log(name);

        {
            var a = 5;
            let b = 8; //只在声明它的代码块中有效
        }
        console.log(a); //可以
        console.log(b); //不可以
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

const命令
const命令也来声明变量，但是变量一旦声明了，就不允许再改变值，因此成为常量
支持块级作用域，常量只在const命令所在的代码块内有效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        const a = 5;
        console.log(a); 
        a = 9; 
        console.log(a); 

        {
            const PI = 3.14; //常量名一般全大写
            console.log(PI);
        }
        //console.log(PI); //不可以,会报错
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。
凡是在声明之前就使用这些变量就会报错，在语法上称为“暂时性死区”，如下代码就会报错

var y = 8; 
{
    y = 4; //此处不能使用y，即使外部声明了全局变量y也不行
    let y = 6;
    console.log(y);
}

JZJZY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫