ES6的块级作用域

ES6之前

  • 因为if和for都没有块级作用域的概念
  • 我们都必须借助于function的作用域来接决应用外面变量 的问题
  • 下面分析几种没有作用域带来的结果

1、变量作用域:变量在什么范围内是可用.


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script>
    {
      
        var name = 'why';
        console.log(name);
    }
    console.log(name);
script>
body>
html>

本来想输出一个why,另一个报错,但是var没有块级作用域,结果如下ES6的块级作用域_第1张图片

2、没有块级作用域引起的问题:if的块级


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script>
    var func;
    if(true){
      
        var name = 'why';

        func = function () {
      
            console.log(name);
        }
        // func();
    }
    name = 'kobe';
    func();
    console.log(name);
script>
body>
html>

本来想输出一个why一个kobe,但是结果如下
ES6的块级作用域_第2张图片

3、没有块级作用域引起的问题:for的块级


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<button>按扭1button>
<button>按扭2button>
<button>按扭3button>
<button>按扭4button>
<button>按扭5button>
<script>
    var btns = document.getElementsByTagName('button');
    for(var i = 0; i < btns.length; i++){
      
        btns[i].addEventListener('click',function () {
      
            console.log('第' + i + '个按钮被点击了');
        })
    }
script>
body>
html>

这样会出问题(出现了联动问题,都是第五个按钮被点击),具体结果看下面的动图

ES6的块级作用域_第3张图片
那么如何解决上面的问题呢

必须闭包,为什么闭包会解决问题:函数是一个作用域


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<button>按扭1button>
<button>按扭2button>
<button>按扭3button>
<button>按扭4button>
<button>按扭5button>
<script>
    var btns = document.getElementsByTagName('button');
    for(var i = 0; i < btns.length; i++){
      
        //
        (function (num) {
      
            btns[i].addEventListener('click',function () {
      
                console.log('第' + num + '个按钮被点击了');
            })
        })(i)
    }
script>
body>
html>

ES6的块级作用域_第4张图片

ES6引入了let,有if和for的块级作用域

只需要将var改成let就好了

  • 上面的点击按钮使用闭包函数,可以改成如下代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<button>按扭1button>
<button>按扭2button>
<button>按扭3button>
<button>按扭4button>
<button>按扭5button>
<script>
    const btns = document.getElementsByTagName('button');
    for(let i = 0; i < btns.length; i++){
      
        btns[i].addEventListener('click',function () {
      
            console.log('第' + i + '个按钮被点击了');
        })
    }
script>
body>
html>

ES6的块级作用域_第5张图片

你可能感兴趣的:(#,Vue,#,ES6)