• ECMAScript 6 语法 1 —— 块作用域构造let 和 const

    Javascript 的作用域存在的两种情况

    情况一：函数内部

    1. function enterYourChoice(flag){
    2.     // var有变量提升的作用，相当于在此处写了一个 let choice;
    3.     if(flag){
    4.         var choice = "yes";
    5.     }
    6.     else {
    7.         console.log(choice); // undefined 并没有报错哦！ 神奇不？
    8.     }
    9.     return null;
    10. }
    11.  
    12. enterYourChoice(false);
    13.  
    14. console.log(choice)

          运行结果如下：

     else中的 choice没有报错的原因是因为， var变量具有变量提升的机制。

        在 函数作用域和全局作用域 中 通过var声明的变量，无论在哪声明，都会被当成在当前作用域顶部声明的变量，这就是var变量大名鼎鼎的变量提升机制。

      多个函数嵌套的作用域：

    情况二：语句块中

    1. {
    2.     let a =1;
    3. }
    4.  
    5. console.log(a)

    同理，a变量出了语句块，同样会报错 ReferenceError: a is not defined 。

    1. {
    2.     let a =1;
    3. }
    4. a= 2;
    5. console.log(a)

            但是，奇怪的是，我没有定义它，又使用了它。并没有报错，因为这种未定义就使用的情况，对于JS来说它就又变成了一个全局变量。在这里如同我们写了一个window.a；

    （吐槽：不得不说，JS是一个语法很Uglily的语言，丝毫不影响它的流行；就如同C# 是一门语法很优雅的语言，但是同样丝毫不影响它的日薄西山。）

            一般情况下，window 对象的内置属性都拥有全局作用域，例如 window.name、window.location、window.top 等等。全局作用域有个弊端：如果我们写了很多行 JS 代码，变量定义都没有用函数包括，那么它们就全部都在全局作用域中。这样就会 污染全局命名空间, 容易引起命名冲突。

            变量声明：

            在同一作用域下，用var 声明的变量，是可以不断重新声明的，let 做不到，const 更做不到。let虽做不到重复声明，但可以做到重新赋值；const 作为常量，连重新赋值都做不到。

    1. var a = 1;
    2. var a ='a';
    3. console.log('var 重新声明，重新赋值，都没有问题');
    4.  
    5. let b = 1;
    6. let b =2;
    7. console.log("let 重新声明，有问题");
    8.  
    9. let c = 1; 
    10. c =2;
    11. console.log("重新赋值，没有有问题");
    12.  
    13. const  d = 'd';
    14. d=3;
    15. console.log("作为常量，不赋值 或 重新赋值，绝对都有问题");

    使用const 声明的对象，对象本身 不可修改，但是对象的属性和值是可以修改的。

    1. const  person = {
    2.     name:'zhangsan'
    3. };
    4.  
    5. person.name='lili';
    6. person.age=18;
    7. delete person.age;
    8.  
    9. person = {};// TypeError: Assignment to constant variable. 类型错误：指派了一个常量。

    全局块作用域的绑定：

    在全局作用域中使用var声明的变量或对象，将成为浏览器环境中的window对象的属性，由于var是具有重新声明的特性，所以这种操作有可能会无意中覆盖一个已经存在的全局变量。

    1. html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6.         <title>Titletitle>
    7.     head>
    8.  
    9.     <body>
    10.         <script type="text/javascript">
    11.             var creditCardNo = '123456789';
    12.             debugger
    13.             console.log(window.creditCardNo);
    14.         script>
    15.     body>
    16.  
    17. html>

    鉴于以上情况，如果我们在全局作用域中使用let 或 const ，则会在全局作用域下创建一个新的绑定，但是该绑定不会成为window对象的属性，通过这种方式，是可以解决覆盖window对象属性的问题。

  • 相关阅读:
    使用Trivy扫描Docker镜像漏洞详细指南
    MySQL版本号6和7去哪了
    基于Eigen的位姿转换
    解决docker安装mysql的乱码问题
    手把手教你Python如何抓包~【异常详细版】
    详解 B树
    【WebRTC---源码篇】（十：零）WEBRTC/StreamStatisticianImpl持续更新中)
    184页10万字智慧城市公共服务中台：业务和数据中台建设方案
    vue入门
    通俗易懂的MVCC
  • 原文地址：https://blog.csdn.net/wdw18668109050/article/details/127733281