【ES6系列】變量與塊級作用域

PascalXie 發布于2019-08-26 11:50 / 2597人閱讀

摘要：不允許在相同作用域內，重復聲明同一個變量。如但是在中則不再必要了，我們可以通過塊級作用域就能夠實現本次主要針對中的變量和塊級作用域進行了梳理學習，并且通過與的實現方式進行了對比，從而看出其變化以及快捷與便利。

ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式發布了。它的目標，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。

ES6的出現已經很久了，由于之前的項目只是基于ES5以及之前的版本內容進行開發的，所以沒有系統性的梳理學習ES6的相關知識。感覺自己已經被發展的車輪落下了好遠好遠(@﹏@)~，所以在接下來這段時間針對性的進行學習整理，希望能夠讓自己有所提高，也希望能幫助和我一樣的人……

變量 常量 const命令 常量的定義

在之前的版本ES5甚至更早的版本（后面統稱ES5）中，很少能夠聽到常量的概念，我們也知道，JS不同于其他的語言，如Java、C++等，有常量的概念。雖然通過其他的方法能夠達到實現常量的方法，但是并不直接、方便。

如可通過下述方式進行常量的實現：

// 此處在window對象上面定義了一個圓周率變量PI，使之不能被修改，模擬常量
Object.defineProperty(window, "PI", {
    value: 3.1415926,
    writable: false
})

在ES6中，定義一個常量則非常簡單，通過const進行聲明即可。

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。

const PI = 3.1415926;

const聲明的變量不得改變值，這意味著，const一旦聲明變量，就必須立即初始化，不能留到以后賦值。

const定義常量的本質

const實際上保證的，并不是變量的值不得改動，而是變量指向的那個內存地址不得改動。對于簡單類型的數據（數值、字符串、布爾值），值就保存在變量指向的那個內存地址，因此等同于常量。但對于復合類型的數據（主要是對象和數組），變量指向的內存地址，保存的只是一個指針，const只能保證這個指針是固定的，至于它指向的數據結構是不是可變的，就完全不能控制了。

如：

const foo = {};

// 為 foo 添加一個屬性，可以成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另一個對象，就會報錯
foo = {}; // TypeError: "foo" is read-only

let命令

在ES6中新增了let命令，可以用來聲明一個變量，作用類似于之前常用的var，但是和var聲明的變量其有效的作用域不同，let聲明的變量只在let命令所在的代碼塊內有效。

如：

{
    let a = 1;
    var b = 2;
}
console.log(a); // Uncaught ReferenceError: a is not defined
console.log(b); // 2

通過上面代碼的執行結果來看能夠看出，let聲明的變量只在它所在的代碼塊中有效，即{}所在的代碼塊內。

那么let聲明的變量在什么情況下會比較有用呢？先讓我們來看下下面一段代碼：

var arrays = [];
for (var i = 0; i <= 2; i++) {
    arrays[i] = function() {
        return i * 2;
    }
}

console.table([
    arrays[0](),
    arrays[1](),
    arrays[2]()
])

可能我們預期的結果是顯示0,2,4，但是從執行代碼的結果中能夠看出，得到的卻是6,6,6,這是為什么呢？
首先我們上面是使用的var聲明的一個i變量，此處會有一個變量提升，相當于在for循環外面聲明了var i = 0變量。當在for循環中時，arrays[i]中的i即為每次循環的i的值（0,1,2），但是在函數體中并沒有將i變量取值為每次循環的值，它只是對變量的一個引用，并不是值的引用。當在執行循環中的函數體時，i變量已經變成了3，所以每次的結構輸出都是6。這個時候，ES6中的let命令就能夠滿足我們的要求了。

var arrays = [];
for (let i = 0; i <= 2; i++) {
    arrays[i] = function() {
        return i * 2;
    }
}

console.table([
    arrays[0](),
    arrays[1](),
    arrays[2]()
])

上面代碼中變量i只在for循環體內有效，只在其所在的塊作用域內有效，每次for循環時會將i變量的值保存在其對應的塊作用域中（for循環的{}），每一輪循環都是重新生成一個新的作用域，在執行for循環中聲明的函數時，都會獲取其對應作用域內的i的值。這部分涉及到的作用域相關的概念，我們后面會說到。

1、在前面提到過，var命令聲明的變量會發生變量提升的現象，即變量可以在聲明之前使用，值為undefined。按照一般的邏輯來說，變量應該在聲明語句之后才可以使用。所以在ES6中為了糾正這個現象，let命令改變了語法行為，它所聲明的變量一定要在聲明后使用，否則報錯。

2、只要在塊級作用域中存在let命令，它所聲明的變量就“綁定”（binding）這個區域，不再受外部的影響。

var tmp = 123;

if (true) {
  tmp = "abc"; // ReferenceError
  let tmp;
}

ES6 明確規定，如果區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會報錯。

總之，在代碼塊內，使用let命令聲明變量之前，該變量都是不可用的。這在語法上，稱為“暫時性死區”（temporal dead zone，簡稱 TDZ）。

3、typeof不再是一個完全安全的操作。之前我們知道，針對一個沒有生命的變量調用typeof方法時會返回undefined，但是在上面出現的“暫時性死區”中，typeof將會被報錯。

使用let聲明變量時，只要變量在還沒有聲明完成前使用，就會報錯。

4、let不允許在相同作用域內，重復聲明同一個變量。

塊級作用域 為什么需要塊級作用域

1、內層變量可能會覆蓋外層變量

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = "hello world";
  }
}

f(); // undefined

內層的tmp變量由于變量提升覆蓋了外層的tmp變量，導致輸出不符合預期

2、計數的循環變量泄露為全局變量

我們上面用到的for循環的例子就是這個現象的證明，var聲明的變量i在循環結束后泄露成了全局變量。

ES6的塊級作用域

在ES6中{}包裹的塊即為一個塊級作用域，并且塊級作用域支持嵌套，如

{{{{{let insane = "Hello World"}}}}}; // 5層塊級作用域

并且外層作用域不能讀取內層作用域的變量；
內層作用域可以定義外層作用域的同名變量。

在之前的版本中，當我們想要實現一個變量只在一個代碼塊中運行，我們往往需要通過使用立即執行函數來實現。如

(function () {
  var tmp = ...;
  ...
}());

但是在ES6中則不再必要了，我們可以通過塊級作用域就能夠實現

{
  let tmp = ...;
  ...
}

本次主要針對ES6中的變量和塊級作用域進行了梳理學習，并且通過與ES5的實現方式進行了對比，從而看出其變化以及快捷與便利。希望能夠對您有所幫助，如有寫的不對的地方望請指正，從而共同進步。

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

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

ES6 變量作用域與提升：變量的生命周期詳解

摘要：不同的是函數體并不會再被提升至函數作用域頭部，而僅會被提升到塊級作用域頭部避免全局變量在計算機編程中，全局變量指的是在所有作用域中都能訪問的變量。 ES6 變量作用域與提升：變量的生命周期詳解從屬于筆者的現代 JavaScript 開發：語法基礎與實踐技巧系列文章。本文詳細討論了 JavaScript 中作用域、執行上下文、不同作用域下變量提升與函數提升的表現、頂層對象以及如何避免創建...

lmxdawn 2019-08-21 11:55 評論0 收藏0
ES6系列文章塊級作用域

摘要：聲明之函數作用域和全局作用域。塊級作用域不能重復聲明臨時性死區等特性用來解決變量存在的種種問題。塊級作用域終于在外面訪問不到了。一些常量聲明使用聲明的變量名全部大寫。 ES5之前javascript語言只有函數作用域和全局作用域，使用var來聲明變量，var聲明的變量還存在變量提升使人困惑不已。我們先來復習一下ES5的var聲明，再對比學習let和const 。 var var聲明之函...

趙連江 2019-08-21 16:53 評論0 收藏0
ES6 系列之 let 和 const

摘要：塊級作用域存在于函數內部塊中字符和之間的區域和塊級聲明用于聲明在指定塊的作用域之外無法訪問的變量。和都是塊級聲明的一種。值得一提的是聲明不允許修改綁定，但允許修改值。這意味著當用聲明對象時沒有問題報錯臨時死區臨時死區，簡寫為。塊級作用域的出現通過 var 聲明的變量存在變量提升的特性： if (condition) { var value = 1; } console.lo...

PascalXie 2019-08-22 17:25 評論0 收藏0
ES6學習總結（1）

摘要：返回一個對象，遍歷對象自身和繼承的所有可枚舉屬性不含，與相同和在紅寶書中就已經提到過屬性，表示的是引用類型實例的一個內部指針，指向該實例的構造函數的原型對象。半個月前就決定要將ES6的學習總結一遍，結果拖延癥一犯，半個月就過去了，現在補起來，慚愧慚愧。阮一峰的《ES6標準入門》這本書有300頁左右，除了幾個新的API和js語法的擴展,真正有價值的內容并不多。所謂存在即合理，每部分的...

happyfish 2019-08-20 15:38 評論0 收藏0
JavaScript基礎系列---變量及其值類型

摘要：但對于引用類型的數據主要是對象和數組，變量指向的內存地址，保存的只是一個引用地址指針，只能保證這個引用地址指針是固定的，至于它指向的堆內存中的存儲的值是不是可變的，就完全不能控制了。基礎概念變量是存儲信息的容器，這里需要區分一下：變量不是指存儲的信息本身，而是指這個用于存儲信息的容器，可以把變量想象成一個個用來裝東西的紙箱子變量需要聲明，并且建議在聲明的同時進行初始化，如下所...

sugarmo 2019-08-22 17:19 評論0 收藏0