深入理解ES6 (一) 塊級綁定

KunMinX 發布于2019-08-26 10:27 / 1388人閱讀

摘要：聲明聲明的語法與的語法一致。總結文章都是以深入理解讀書筆記形式，大部分引用書中的定義，加上作者的理解，樣例也做了調整，所有樣例都可以放到里運行親自嘗試。

1.變量提升

使用 var 關鍵字聲明的變量，無論其實際聲明位置在何處，都會被視為聲明于所在函數的
頂部（如果聲明不在任意函數內，則視為在全局作用域的頂部）。這句話從字面上不難理解。
但是他是怎樣一個過程，為什么會這樣。當你代碼中使用var 去聲明一個變量或者函數時，
在瀏覽器引擎解析代碼去執行之前會收集你var 變量放入內存中，根據作用域關聯起來，此時
變量被聲明出來。這就將當前作用域var變量提升到作用域頂部的過程。至于為什么會做變量提
升這件事需要理解瀏覽器引擎的工作原理這里不過多做介紹可以看一下這這個。
下邊用一個例子來理解

        function getValue(condition) {
            console.log(value);// value 在此處可訪問，值為 undefined 
            if (condition) {
                var value = "blue";
                // 其他代碼
                console.log(value);//此時 value 的值為 blue;
            } else {
                // value 在此處可訪問，值為 undefined
               console.log(value);
            }
        }

當執行getValue(false) 時，在value 未初始化值時去輸出value 為undefined，在走else分支時同樣也為undefined。

實際上當瀏覽器引擎解析以后去執行的代碼是下面這樣。同理當你用var聲明一個函數時同樣會被提升。

        function getValue(condition) {
            var value;//在解析時在作用域頂端先進行聲明
            console.log(value);
            if (condition) {
                value = "blue";
                // 其他代碼
                 console.log(value);
            } else {
                  console.log(value);
            }
        }

2.塊級聲明

塊級聲明避免了變量提升，同事更加突顯了作用域的劃分，在一個函數內部或在一個代碼塊（由一對花括號包裹）內部
塊級作用域內變量只在這一塊作用域內生效。

let聲明
let 聲明的語法與 var 的語法一致。你基本上可以用 let 來代替 var 進行變量聲明，但會將變量的作用
用域限制在當前代碼塊中（其他細微差別會在稍后討論）。由于 let 聲明并不會被提升到當前代碼塊的頂部，因此
因此你需要手動將 let 聲明放置到頂部，以便讓變量在整個代碼塊內部可用。這是書中對let的定義和解釋，也就
是說你可以用let 代替 var 使用但是這涉及到你個人的編程習慣是否會受到影響，以及如何靈活應用 var 和 let

   function getValue(condition) {
       if (condition) {
           let value = "blue";
           var value = "blue";
           // 其他代碼
           console.log(value);
       } else {
           // value 在此處不可用
          console.log(value);//condition=False 時候let 聲明時直接報錯value is not defined var聲明時 undefine
       }
          console.log(value);//condition=True 時候let 聲明時直接報錯value is not defined var聲明時 blue
   }
    從上面例子可以看出來當使用let時 value 作用域被綁定在if的分支{}內在其他位置無法訪問，程序會報錯，使用var時由于變量提升
    可以訪問到value。由此也可以看出變量提升可能會造成一些問題但是它本身容錯率更高，let的約束性更強。

const常量聲明
const 聲明的變量會被認為是常量（constant ），意味著它們的值在被設置完成后就不能再被改變。正因為如此，所有的 const
變量都需要在聲明時進行初始化。const 聲明的常量進行賦值會拋出錯誤。這個約束通常用于一些重要的且不會更改的變量定義，這
樣如果不慎在代碼中做出重新賦值的操作會拋出錯誤。增加了可調試性。但是有一點const強調的時禁止對變量的修改，但是如果是對象
那對象的屬性成員修改不違反const約束。例子如下：



        const person = {
            name: "Nicholas"
        };
      
        person.name = "Greg";  // 工作正常
       
        person = { // 拋出錯誤
        name: "Greg"
        };

全局塊級綁定
當你用var聲明一個全局變量時會被添加到window對象下，這樣可能會覆蓋原有可修改的屬性，當你用let 聲明一個全局變量時，不會被
添加到全局對象window上。例子：

            console.log(window.name);//空字符串
            var name="ok";
            //let name="ok";
            console.log(window.name);//"ok"
            
        這里我采用的是window對象本身固有的一個屬性name，初始為空字符串，當使用var聲明name更改了name屬性的值，當let聲明
        時對window下name屬性無影響。

總結

文章都是以《深入理解ES6》讀書筆記形式，大部分引用書中的定義，加上作者的理解，樣例也做了調整，所有樣例都可以放到console
里運行親自嘗試。

--by JK ES6學習筆記

云服務器 GPU云服務器深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106184.html

深入理解ES6筆記（一）塊級作用域綁定

摘要：和都能夠聲明塊級作用域，用法和是類似的，的特點是不會變量提升，而是被鎖在當前塊中。聲明常量，一旦聲明，不可更改，而且常量必須初始化賦值。臨時死區臨時死區的意思是在當前作用域的塊內，在聲明變量前的區域叫做臨時死區。主要知識點有：var變量提升、let聲明、const聲明、let和const的比較、塊級綁定的應用場景showImg(https://segmentfault.com/img...

馬忠志 2019-08-23 10:58 評論0 收藏0
小白學《深入理解es6》--塊級作用域綁定

摘要：塊級聲明前是沒有塊級作用域的，比如外可以訪問內部的變量。循環中的塊作用域綁定我們經常使用循環發現了什么在循環執行后，我們仍然可以訪問到變量。 var聲明及變量提升機制在ES6之前，在函數作用域中或者全局作用域中通過var關鍵字來聲明變量，無論是在代碼的哪個位置，這條聲明語句都會提到最頂部來執行，這就是變量聲明提升。注意：只是聲明提升，初始化并沒有提升。看一個例子： functio...

fox_soyoung 2019-08-20 18:04 評論0 收藏0
深入理解ES6之《塊級作用域綁定》

摘要：眾所周知，中的聲明存在變量提升機制，因此引用了塊級作用域來強化對變量生命周期的控制聲明不會被提升，有幾個需要注意的點不能被重復聲明假設作用域中已經存在某個標識符無論該標識符是通過聲明還是變量聲明，此時再使用或關鍵定聲明會拋錯此處則會拋出錯誤眾所周知，js中的var聲明存在變量提升機制，因此ESMAScript 6引用了塊級作用域來強化對變量生命周期的控制let const 聲明不會被...

Nosee 2019-08-21 12:02 評論0 收藏0
深入理解ES6 - var-let-const

摘要：聲明變量不存在變量提升。臨時死區，而且不能在聲明之前訪問它。禁止重復聲明相同的變量，否則報錯。不存在變量提升，一旦執行快外就會立即銷毀。聲明不允許修改綁定，但允許修改值，也就是說用創建對象后，可以修改該對象的屬性值。知識點 var 聲明變量： 1、存在變量提升，實際上var無論在哪里聲明，都會被當做當前的作用域頂部聲明變量。 2、可以重復聲明，后聲明的變量會覆蓋前聲明的變量。 let...

alexnevsky 2019-08-22 17:34 評論0 收藏0