通过动态表格案例来解释var声明在作用域下的影响

<style>
        table {
            border-collapse: collapse;
        }

        th,
        td {
            width: 200px;
            border: 1px solid black;
        }

        th {
            height: 50px;
            background-color: gray;
        }

        td {
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>

        </tr>
        <tr>
            <td>小明</td>
            <td>js</td>
            <td>100</td>
            <td><a href="#">删除</a> </td>

        </tr>
        <tr>
            <td>小明</td>
            <td>js</td>
            <td>100</td>
            <td><a href="#">删除</a> </td>


        </tr>
        <tr>
            <td>小明</td>
            <td>js</td>
            <td>100</td>
            <td><a href="#">删除</a> </td>


        </tr>
        <tr>
            <td>小明</td>
            <td>js</td>
            <td>100</td>
            <td><a href="#">删除</a> </td>


        </tr>
        <tr>
            <td>小明</td>
            <td>js</td>
            <td>100</td>
            <td><a href="#">删除</a> </td>

        </tr>
    </table>

二，动态表格实现点击删除键，删除当前行，js代码展示

 <script>
        var trs = document.querySelectorAll('tr')
        var as = document.querySelectorAll(' tr a')
        console.log(as);
        var ta = document.querySelector('tbody')
        var td = document.querySelectorAll('td')

        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                console.log(as[i]);//打印出来的是undefined，因为var声明没有块级作用域，只有全局和局部，
                //而as[i]在当前作用域下没有声明，往上一级去找也没有找到，所以打印出来的就是undefined
                ta.removeChild(this.parentNode.parentNode)//var 声明，没有as[i],所以就不能用as[i]指向，
                //而使用this可以是应为，在点击事件中，this指向的就是点击谁就是谁

            }
        }

    </script>

2.1，流程：

执行流程就是首先获取tr，td，a，tbody标签，可能会有人问，都没有tbody标签为什么要获取，是因为tbody标签是自带的，在控制台可以看到元素，tbody是tr元素的父节点，所以非常重要我们需要获取。获取完元素，给a标签添加点击事件，但是a标一个，

所以需要我们遍历一下，所以就是as[i]项点击事件删除列，删除项怎么获取，通过所点击的当前a标签的父元素的父元素也就是tr标签，这样就可以删除，

通过代码执行，我在这里遇到的一个问题就是，上述所说的获取删除项，为什么不能用as[i]项去获取，而是通过this指向呢？

这是因为var 声明只会在全局作用域或者局部作用域下有效，而通过上面代码我们能看出，as在当前作用域下并没有被声明赋值，通过作用琏去离他最近那个的作用域去找，但是会发现上面也没有，这时通过控制台打印后发现as为undefined，所以如果用as[i]结果就会报错，

但是我们可以通过把var声明换成let声明，就可以使用as[i]了，因为let声明有块级作用域（if，for{}这种属于块级作用域），这样as就被赋值

三，代码效果

四，使用let声明

 <script>
        var trs = document.querySelectorAll('tr')
        var as = document.querySelectorAll(' tr a')
        console.log(as);
        var ta = document.querySelector('tbody')
        var td = document.querySelectorAll('td')

        for (let i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                //打印出来的是undefined，因为var声明没有块级作用域，只有全局和局部，
                //而as[i]在当前作用域下没有声明，往上一级去找也没有找到，所以打印出来的就是undefined
                ta.removeChild(as[i].parentNode.parentNode)//var 声明，没有as[i],所以就不能用as[i]指向，
                //而使用this可以是应为，在点击事件中，this指向的就是点击谁就是谁
              console.log(as[i]);
            }
        }

    </script>

打印as[i],获得的就是你点击的那个项

五，作用域总结：

全局作用域：作用于所有代码执行的环境，整个script标签内部，或者一个独立的js文件中，如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
局部作用域：函数内使用var关键字声明的变量，只能在函数内部访问
块级作用域：由{}包括，if语句。for语句。
全局变量：在全局作用域下，变量为全局变量，都可以使用。