ES6语法（一）——块级作用域

最新推荐文章于 2022-09-21 20:14:46 发布

田小江爱分享

最新推荐文章于 2022-09-21 20:14:46 发布

阅读量120

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/third_/article/details/111083809

版权

Vue学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1、let和const

事实上var的设计可以看成是javaScript语言设计上的错误。但是这种错误多半不能修复和移除，因为需要向后兼容。

大概十年前，Brendan Eich 就决定修复这个问题，于是他添加了一个新的关键字：let
我们可以将let看成是更完美的var。

let是有块级作用域的，var是没有块级作用域的。块级作用域：

JS中使用var来声明一个变量时，变量的作用域主要是和函数的定义有关。
针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
<script src="../js/vue.js"></script>
<script>
    // 在ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题
    // 在ES6中加入了let，let它是有if和for的块级作用域 
    // 1.变量作用域： 变量在什么范围内是可用的
    {
        var name = 'kim';
        console.log(name);
    }
    console.log(name);

    // 2.没有块级作用域引起的问题：if的块级
    var func;
    if (true) {
        var age = 18;
        func = function () {
            console.log(age)
        }
    }
    age = 1;
    // 我们期待的效果是age一直打印为18，因为在同一个if里面，
    // 但是由于我们在用这个func方法的时候，age没有作用域，age的值被改掉了，所以age的结果是1
    func();

    // 3.没有块级作用域引起的问题：for的块级。
    // 问题：打印结果一直为第5个按钮被打印，因为在循环的过程中，值已经被改变了
    var buttons = document.getElementsByTagName('button')
    for (var i = 0; i < buttons.length; i++ ) {
        buttons[i].addEventListener('click', function() {
            console.log('第' + i + '个按钮被打印！')
        });
    }
    // 3.没有块级作用域引起的问题：for的块级，解决办法：搞一个闭包
    // 为什么闭包可以解决问题：因为函数是一个作用域。每个按钮都是有自己的函数的。在javaScript中只有函数是有作用域的。
    var buttons = document.getElementsByTagName('button')
    for (var i = 0; i < buttons.length; i++ ) {
        (function(i) {
            buttons[i].addEventListener('click', function() {
            console.log('第' + (i + 1) + '个按钮再次被打印了～～～～～')
            });
        })(i)
    }
    // 4.函数有自己的作用域，永远在自己的作用域内使用自己的参数
    var name  = 'jinjiang'
    function abc(name) {
        console.log(name)
    }
    abc(name);
    name = 'yangchi';
    abc(name);

    // 5.ES6 使用let，有自己的作用域
    const es6Buttons = document.getElementsByTagName('button')
    for (let i = 0; i < es6Buttons.length; i++ ) {
        es6Buttons[i].addEventListener('click', function() {
            console.log('第' + (i + 1) + '个按钮使用ES6被打印！')
        });
    }
</script>
</body>

页面执行效果如下：