01.JS塊級作用域與let

来源:https://www.cnblogs.com/oksana/archive/2020/02/29/12386357.html
-Advertisement-
Play Games

1.塊級作用域 什麼是： 在一個代碼塊（括在一對花括弧中的一組語句）中定義的所需變數（與let配合使用）併在代碼塊的外部是不可見的。 為什麼： 在ES6之前，函數只能在全局作用域和函數作用域中聲明，不能在塊級作用域中聲明，造成諸多問題： 1.內層變數會覆蓋外層變數 2.用來計數的迴圈變數泄漏變成全局 ...


1.塊級作用域
   什麼是：
         在一個代碼塊（括在一對花括弧中的一組語句）中定義的所需變數（與let配合使用）併在代碼塊的外部是不可見的。
   為什麼：
         在ES6之前，函數只能在全局作用域和函數作用域中聲明，不能在塊級作用域中聲明，造成諸多問題：
              1.內層變數會覆蓋外層變數
              2.用來計數的迴圈變數泄漏變成全局變數
   何時：
         需要強化對變數生命周期的控制，避免全局污染出現錯誤
   優點：
         1.阻止變數泄漏變為全局變數，造成全局污染
         2.阻止變數提升覆蓋
         3.內層作用域可以定義與外層作用域相同的變數名，但變數是獨立的。
         4.允許任意嵌套，外層作用域無法讀取內層作用域的變數
   塊級作用域：
         {}，if{}，else{}，while{}，for{}，swicth{}…

    //塊級作用域{},與let配合使用
    {
      //大括弧之間就是塊級作用域
      var num=1;//還是全局變數，可以被外部訪問
      let num=1;//局部變數，不可以被外部訪問，塊級作用域必須用let聲明
    }
    console.log(num);//此時num已經不可以被訪問，說明塊級作用域生效

    //內層作用域可以定義與外層作用域相同的變數名，允許任意嵌套
    //但變數與變數之間是沒有關係的，都是獨立的個體。
    {
      let aa=1;
      console.log(aa);//1
      {
        let aa=11;
        console.log(aa);//11
        {
          let aa=111;
          console.log(aa);//111
        }
      }
    }
    console.log(aa);//此時是不能被訪問的，防止aa泄露為全局變數

    //防止變數提升造成覆蓋
    //雖然都是f，但是配合了let使用，{}內部變成了一個小個體，不會影響其他的f
      var f=17;
      {
        let f=28;
        console.log(f);
      }
      console.log(f);

    //for塊級作用域
    //計算1-100之間所有的整數的和，使用var聲明
    for (var i=1,sum=0;i<=100;i++){
      sum+=i;
    }
    console.log(sum);//5050,可以訪問
    console.log(i);//101,可以訪問

    //使用let聲明變數
    for (let i=1,sum=0;i<=100;i++){
      sum+=i;
    }
    console.log(i);//此時i是不能被訪問的。
    console.log(sum);//此時sum是不能被訪問的。
    //根據需求得知，最後需要訪問的是sum，i需要釋放
    //所以把sum單獨放在外面，sum就可以被訪問，而i會被釋放
    var sum=0;
    for (let i=1;i<=100;i++){
      sum+=i;
    }
    console.log(sum);

2.let聲明
   什麼是：
         專門代替var來聲明變數用的
   為什麼：
         var的問題：
             1.聲明提前
             2.沒有塊級作用域
             3.造成全局污染
   何時：
         只要聲明變數都用let
   優點：
         1.阻止了聲明提前
         2.添加了塊級作用域
         3.成為局部變數，不會造成全局污染
   原理：
         let其實就是一個匿名函數自調用！
         且let為了雙保險，其實在底層悄悄給變數改了名字，在變數前增加了_
   let的小脾氣：
         1.在相同作用域/塊內：禁止同時let兩個同名的變數
         2.在let 變數 之前到當前作用域的頂部之間，不允許提前使用變數
         3.不可以在函數內部重覆聲明參數

    //1.簡單瞭解let聲明的變數
    let a=2;
    console.log(a);
    let a=3;
    console.log(a);//報錯，a不能重覆聲明並賦值

    //var聲明的變數可以重覆聲明並重新賦值
    var b=2;
    console.log(b);//2
    var b=3;
    console.log(b);//3

    //在塊級作用域內{}
    {
      var c=2;
      let c=4;//在同一塊級作用域內不允許重覆聲明變數
      let d=3;
      console.log(d);//只能在當前{}塊級作用域內訪問
    }
    console.log(c);//可以被外部訪問的是var聲明的c
    console.log(d);//不可以被外部訪問

    //let不允許先調用，後聲明
    {
      console.log(aaa);
      let aaa=5;//報錯Cannot access 'aaa' before initialization
    }

         把let放入實例中理解

        //let應用
        //累加每個任務函數的時間
        var t=0;
        function task1(){
            console.log(`任務1耗時3s`);
            t+=0.3;
        }
        function task2(){
            console.log(`任務二耗時8s`);
            t+=0.8;
        }
        task1();
        task2();
        console.log(`共耗時${t}s`)
         以上是一個可以正常執行的代碼，並且是正確的程式          如果在task2內添加其他的功能，例如捕捉錯誤 
        //累加每個任務函數的時間
        var t=0;//聲明變數t準備累加每個任務函數的時間
        function task1(){
            console.log(`任務1耗時3s`);
            t+=3;
        }
        function task2(){
            console.log(`任務二耗時8s`);
            t+=8;
            //模擬出錯的變數，此段代碼是不執行的
            var err=false;
            //如果出錯
            if(err==true){
                //就獲得出錯時間
                var t=new Date();
                //並輸出出錯提示日誌
                console.log(`出錯啦，at：${t.toLocaleDateString()}`);
            };
        }
        task1();
        task2();
        console.log(`共耗時${t}s`)
         代碼正常執行，if內代碼是不執行的，但是結果卻是錯誤的，少了8s，那麼為什麼少了8s呢？          原來是因為var聲明的變數是全局變數，而if{}不是作用域，沒有實體牆，攔不住var，          所以var聲明的變數會提升到當前作用域task2的最前面。 
        //累加每個任務函數的時間
        var t=0;//全局t
        function task1(){
            console.log(`任務1耗時3s`);
            t+=3;
        }
        function task2(){
            //var t;//undefined，var聲明的t提前到該作用域最前面，並且沒有賦值
            //如果task2()中已經有了局部變數t，就不會用全局的t了，只有在局部沒有的t的時候才會調用全局的t
            console.log(`任務二耗時8s`);
            //這個8s沒有加到全局t，而是加在局部t上，當函數調用後，局部的t就被釋放了
            t+=8;//task2中的局部變數t，加在這裡
            var err=false;//模擬出錯的變數
            //如果出錯
            if(err==true){//if else for while do whlie 等程式結構的{}不是作用域，不是實體牆，攔不住var
                //就獲得出錯時間
                var t=new Date();
                //並輸出出錯提示日誌
                console.log(`出錯啦，at：${t.toLocaleDateString()}`);
            };
        }
        task1();
        task2();
        console.log(`共耗時${t}s`)//此處輸出的是全局的t，所以沒有那8s，
         那麼鑒於這種明明沒有執行的代碼，卻破壞了原本正確的代碼，          這就是沒有塊級作用域帶來的危害，此時就需要使用let聲明變數了，          因為let會阻止聲明提前，並會添加塊級作用域 
       //累加每個任務函數的時間
        var t=0;//全局t
        function task1(){
            console.log(`任務1耗時3s`);
            t+=3;
        }
        function task2(){
            console.log(`任務二耗時8s`);
            t+=8;//這個t還是會加到全局的t上，沒有被影響
            //模擬出錯的變數
            //var err=false;//代碼不執行
            var err=true;//代碼執行
            //如果出錯
            if(err==true){//let將if{}也變成了一級作用域，這個作用域是有實體牆的，是可以攔住let聲明的變數的                //就獲得出錯時間
                //let阻止了局部的t被聲明提前
                let t=new Date();//此時的t是在這個if塊級作用域的函數內，不會存在提升
                //並輸出出錯提示日誌
                console.log(`出錯啦，at：${t.toLocaleDateString()}`);//所以此時輸出的t也是if內的t
            };
        }
        task1();
        task2();
        console.log(`共耗時${t}s`)//列印全局t
         let的原理，添加匿名函數自調用，並改變名字 
        //累加每個任務函數的時間
        var t=0;//全局t
        function task1(){
            console.log(`任務1耗時3s`);
            t+=3;
        }
        function task2(){
            console.log(`任務二耗時8s`);
            t+=8;//這個t還是會加到全局的t上，沒有被影響
            //var err=false;
            var err=true;//模擬出錯的變數
            //如果出錯
            if(err==true){//let將if{}也變成了一級作用域，這個作用域是有實體牆的，是可以攔住let聲明的變數的
                //(function(){//let自動添加的
                //就獲得出錯時間
                //let阻止了局部的t被聲明提前
                let t=new Date();//let悄悄改變了名字，變成了_t，此時的t是在這個if塊級作用域的函數內，不會存在提升到
                //並輸出出錯提示日誌
                console.log(`出錯啦，at：${t.toLocaleDateString()}`);//_t，所以此時輸出的t也是if內的t
                //})();//let自動加的
            };
        }
        task1();
        task2();
        console.log(`共耗時${t}s`)//列印全局t    

         單詞：
               declare——聲明
               access——訪問
               initialization——初始化——>第一次聲明+賦值=初始化


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL--09.資料庫的管理應用
    9.1 創建資料庫 命令語法：create database show databases like 'oldboy'; + + | Database (oldboy) | + + | oldboy | + + 1 row in set (0.04 sec) 查看建庫的語句 (註意:如果編譯時指定字 ...
  • MySQL---08.SQL--結構化查詢語言
    8.1 什麼是 SQL？ SQL，英文全稱 Structured Query Language，中文意思是結構化查詢語言，它是一種對應關係數據中的數據進行定義和操作的語言方法，是大多數關係資料庫管理系統所支持的工業標準。 資料庫查詢語言 SQL 是一種資料庫查詢和程式設計語言，用於存取數據以及查詢、 ...
  • Android應用程式與SurfaceFlinger服務的連接過程分析
    [Android應用程式與SurfaceFlinger服務的連接過程分析 ](https://blog.csdn.net/luoshengyang/article/details/7857163) Android系統的開機動畫是由應用程式bootanimation來實現的，它位於/system/bi ...
  • Flutter Widgets 之 PageView
    註意：無特殊說明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 基礎用法 PageView控制項可以實現一個“圖片輪播”的效果，PageView不僅可以水平滑動也可以垂直滑動，簡單用法如下： PageView滾動方向預設是水 ...
  • form實現瀏覽者登陸、註冊頁面與瀏覽器的交互
    瀏覽器通過form表單把數據提交伺服器涉及http協議，模式為瀏覽器發送請求=>伺服器接收=>自身處理=>結果返回瀏覽器=>瀏覽器根據結果展示頁面給用戶，請求分為GET和POST。註意:所有表單控制項（文本框、文本域、按鈕、單選框、覆選框等）都必須放在表單中，其次同一組的單選按鈕，name 取值一定要... ...
  • JavaScript操作表格及CSS樣式
    在前端開發中，表格主要用於存儲結構化的數據，CSS主要用於修飾DOM元素，如何通過DOM來操作表格及CSS呢？本文主要通過一些簡單的小例子，簡述DOM對錶格和CSS的常見操作方法，僅供學習分享使用，如有不足之處，還請指正。 ...
  • ES6 - 基礎學習(10): Set 和 WeakSet 數據結構
    Set 數據結構 ES6 提供了新的數據結構 Set，註意不是數據類型，而是數據結構。它類似於數組，但是成員的值(可以是任何類型，無論是原始值或者是對象引用都行)都是唯一的，沒有重覆的值。 Set 中的特殊值 Set 數據結構存儲的成員 值總是唯一的，所以Set數據結構在添加新成員時需要判斷兩個值是 ...
  • CSS3動畫相關屬性詳解
    一、2D效果屬性 要使用這些屬性，我們需要通過transform，並且，為了保證相容性，我們可能還需要添加帶有瀏覽器內核首碼的屬性，比如 -webkit-transform。 在認識屬性前先知道這裡的使用坐標系是怎樣的，其坐標系與傳統的數學坐標系不同。 坐標系簡單分析如下： 1.預設狀態下，x軸是水 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類