案例之-块的作用域

最新推荐文章于 2022-11-14 10:10:00 发布

然陈

最新推荐文章于 2022-11-14 10:10:00 发布

阅读量5.5k

点赞数 58

本文链接：https://blog.csdn.net/cj521zhihui/article/details/109081068

版权

一：ES5 var作用域

//ES5中的var是没有块级作用域的（if/for）
//ES6中的let是有块级作用域的（if/for）
// 1.变量作用域:变量在什么范围内是可用.
{
    var name = 'why';
    console.log(name);
  }
  console.log(name);
  //不管在{ }里面，还是在外面都可以调用

在这里插入图片描述

二：ES5 var作用域

//2.没有块级作用域引起的问题: if的块级
var func;
    if(true){
        var name ="why";
        func = function(){
            console.log(name);
        }
        func()
    }
    name='kobe';

    func()
    //第一次调用是未被修改之前，第二次调用被修改
    //说明var 的修改，会导致之后再次调用的结果发生变化

在这里插入图片描述
2.1ES5 var作用域

var name = 'why'
    function abc(aaa){
        console.log(aaa);
    }
    abc(name)
    name = "so"
    console.log(name)
    //和上个案例相似

在这里插入图片描述
三ES5 var作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级作用域</title>
</head>
<body>
<button>按钮0</button>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>

    //3.没有块级作用域引起的问题:for的块级
    var btns = document.getElementsByTagName('button');
    for (var i=0;i<btns.length;i++){
        btns[i].addEventListener('click',function(){
            console.log("第"+i+'个按钮被点击');
        })
    }
      //不管怎么点都是显示的是最后一个按钮
      //这就是全局变量引起的
      //请看下一个案例解决
</script>
</html>

在这里插入图片描述
四 ES5 闭包解决全局变量问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级作用域</title>
</head>
<body>
<button>按钮0</button>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>
    // 我们可以用闭包解决ES5的var全局变量问题
    // 为什么闭包可以解决问题: 函数是一个作用域.
    var btns = document.getElementsByTagName('button');
    for (var i=0;i<btns.length;i++){
        (function (i){
            btns[i].addEventListener('click',function(){
                console.log("第"+i+'个按钮被点击');
            })
        })(i)
    }

</script>
</html>

在这里插入图片描述
五.ES6 let的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级作用域</title>
</head>
<body>
<button>按钮0</button>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>
    var btns = document.getElementsByTagName('button');
    for (let i=0;i<btns.length;i++){
        btns[i].addEventListener('click',function(){
            console.log("第"+i+'个按钮被点击');
        })
    }
    //直接用ES6 let和ES5中使用闭包解决全局变量的结果是一样的
</script>
</html>

在这里插入图片描述

然陈

关注

58
点赞
踩
5

收藏

觉得还不错? 一键收藏
59
评论
案例之-块的作用域

一：ES5 var作用域//ES5中的var是没有块级作用域的（if/for）//ES6中的let是有块级作用域的（if/for）// 1.变量作用域:变量在什么范围内是可用.{ var name = 'why'; console.log(name); } console.log(name); //不管在{ }里面，还是在外面都可以调用二：ES5 var作用域//2.没有块级作用域引起的问题: if的块级var func; if(true){
复制链接

扫一扫