ES6作用域的一个问题

最新推荐文章于 2024-09-21 20:29:56 发布

one or two

最新推荐文章于 2024-09-21 20:29:56 发布

阅读量83

点赞数

文章标签： es6

本文链接：https://blog.csdn.net/qq_41633396/article/details/118671413

版权

函数的形参初始化的一个问题

在这里插入图片描述

for循环监听的一个问题

在这里插入图片描述

ES6中如何区分函数作用域和块作用域

在这里插入图片描述

调试每一步如下所示：

在这里插入图片描述

紧挨着的上面的那个图里面，1处表示，块级作用域结束，但是，函数作用域还在

在这里插入图片描述

上面表示函数作用域也结束了

但是，在函数作用域中继续用let定义age时，会报错，根据ES6语法，用let定义的变量不能在同一作用域内被重复定义（声明），这个从侧面，证明了，此时函数作用域包括function()中的括号和该funciton(){}对应的中括号的内容，还有一点值得注意的是，此时函数作用域中的function()里面的{}中的内容，同时是一个块级作用域

在这里插入图片描述

看看以下作用域的问题

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>letandconstant</title>
    <script>
        window.onload = function () {
            function add(...values) {
                let sum = 0;
                let val = 1
                for (let val of values) {
                    let val
                    console.log(val) //undefinded
                    sum += val;
                }

                return sum;
            }

            console.log(add(2, 5, 3)) // 1
        }
        // console.log(val)

    </script>
</head>

<body>
    <ul id="list">
        <!-- <li><a href="javascript:;">1</a></li>
        <li><a href="javascript:;">2</a></li> -->
    </ul>
    <br>
    <br>
    <button id="btn01">点击我增加一个a</button>
</body>

</html>

在这里插入图片描述

上面的那个for循环这个（）里面是一个单独的块作用域，不是和for(){}的这个花括号里面的作用域完全没有关系，但是，可以说是父子作用域的关系，但是，这个不同于function()中的这个小括号，和function(){}中的花括号的作用域的问题

下面这个例子，体会下

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>letandconstant</title>
    <script>
        window.onload = function () {
            function add(...values) {
                let sum = 0;
                let val = 1
                for (let val of values) {
                    sum += val;
                    console.log(sum)//这个块级作用域里面没有sum，就会往上一层去找，这里实际上是修改的let sum = 0,这个地方的sum的值
                }

                return sum;
            }

            console.log(add(2, 5, 3)) // 1
        }
        // console.log(val)

    </script>
</head>

<body>
    <ul id="list">
        <!-- <li><a href="javascript:;">1</a></li>
        <li><a href="javascript:;">2</a></li> -->
    </ul>
    <br>
    <br>
    <button id="btn01">点击我增加一个a</button>
</body>

</html>