JS 块作用域

最新推荐文章于 2023-07-31 09:31:55 发布

姬田诗乃

最新推荐文章于 2023-07-31 09:31:55 发布

阅读量134

点赞数

分类专栏： Js 文章标签：块作用域

本文链接：https://blog.csdn.net/HeiXueJi/article/details/84841415

版权

Js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

变量声明

var、let、const

作用域：变量的作用范围

全局 - 非函数
函数 - 函数包含
块作用域 -一对{}包含的范围

var

支持变量声明预解析
不支持块作用域
允许重复声明

let

不支持变量声明预解析（先声明后使用）
支持块作用域
不允许重复声明（暂存死区）

const

不支持变量声明预解析（先声明后使用）
支持块作用域
不允许重复声明（暂存死区）
常量（值一旦确定，不允许修改，所以必须初始化）

例子：

{
    var a = 1;
    let b = 2;
    const c = 3;
}

console.log(a);
console.log(b);
console.log(c);

结果为：

1
Uncaught ReferenceError: b is not defined
Uncaught ReferenceError: c is not defined

故let和const在块作用域外是无法引用的

html的例子：

<!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>
    <style>
        button.active {
            background: yellow;
        }

        p {
            display: none;
        }

        p.active {
            display: block;
        }
    </style>
</head>

<body>
    <button class="active">选项一</button>
    <button>选项二</button>
    <button>选项三</button>
    <p>内容一</p>
    <p>内容二</p>
    <P>内容三</P>
</body>
<script>
    var buttons = document.querySelectorAll('button');
    var ps = document.querySelectorAll('p');

    for (let i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].className = '';
                ps[i].className = '';
            }

            this.className = 'active';
            ps[i].className = 'active';
        }
    }
</script>

</html>

效果：

姬田诗乃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 块作用域

变量声明var、let、const作用域：变量的作用范围全局 - 非函数函数 - 函数包含块作用域 -一对{}包含的范围var支持变量声明预解析不支持块作用域允许重复声明let不支持变量声明预解析（先声明后使用）支持块作用域不允许重复声明（暂存死区）const不支持变量声明预解析（先声明后使用）支持块作用域不允许重复声明（暂存死区）常量（值一旦确...
复制链接

扫一扫

专栏目录