ES 6 新增的塊級作用域let

Xufc 發布于2019-08-26 10:11 / 2128人閱讀

摘要：為什么要添加塊級作用域之前，變量只有全局作用域也稱全局變量和函數作用域局部變量，所以會導致以下不合理的情況函數的局部變量會覆蓋同名的全局變量。這就導致了如果你要在函數內部調用全局變量，那么函數內聲明的局部變量就一定不能和全局變量同名。

ES 6 新增的塊級作用域let

在2015年之前，JavaScript是沒有塊級作用域的，之后在ES6版本新增了塊級作用域，為了更好的理解ES6這一新特性，我們先提出這幾個問題：
1.什么是塊級作用域？
2.為什么要添加塊級作用域？
3.怎么使用塊級作用域？

什么是塊級作用域？

塊級作用域，就是指在只能在語句塊這個范圍中起作用，超出這個范圍則無效，其中語句塊，是指將多個語句放在一對大括號{}里面，通常用于流程控制，比如if,for,while等等。

示例

while (x < 10) {
  if(x>5){
  x++;
  }
}

這里{if(x>5){x++;}}是一個語句塊，{x++;}也是一個語句塊，巧記：一對大括號就是一個語句塊，就代表一個作用域。

為什么要添加塊級作用域？

ES6之前，變量只有全局作用域（也稱全局變量）和函數作用域（局部變量），所以會導致以下不合理的情況:

1.函數的局部變量會覆蓋同名的全局變量。 示例

      var a = 0
      (function() {
        console.log("函數內部調用全局的a：", a) //輸出：函數內部調用全局的a： 0
      })()
      console.log("全局變量a：", a) //輸出;全局變量a： 0

      var a = 0
      ;(function() {
        console.log("a=", a) //輸出：a= undefined，按理說應該輸出a=0
        if (false) {
          var a = 1
          console.log(a)
        }
      })()

原因

變量提升導致內層的 a 變量覆蓋了外層的 a 變量。
這就導致了如果你要在函數內部調用全局變量，那么函數內聲明的局部變量就一定不能和全局變量同名。

2.函數內部中，只要聲明了變量，之后在函數結束前，都可以使用。 示例

      (function() {
        console.log(a) //輸出：undefined
        if (true) {
          for (var a = 0; a < 10; a++) {
            var b = 0
            console.log(a) //輸出：0~9
          }
        }
        console.log("if之外a：", a) //輸出：if之外a： 10
        console.log("if之外b：", b) //輸出：if之外b： 0
      })()

原因

在for循環中聲明的a,b變量，在函數結束前并不會被銷毀。
這樣就導致了一些不必要的內存消耗。
為了避免這兩個不合理的問題，塊級作用域就出現了。

怎么使用塊級作用域？

使用變量命令 let。

示例

      (function() {
        if (true) {
          for (let a = 0; a < 10; a++) {
            console.log(a) //輸出：0~9
          }
        }
        console.log("if之外a：", a) //報錯：ReferenceError: a is not defined
      })()

對于let命令的變量：

作用域：變量所在的語句塊，即一對大括號{}；

不存在變量提升，而是“暫時性死區”，也就是說從塊級作用域開始到聲明該變量，這段時間里是不能訪問該變量的；

同一語句塊中，不能被同一變量名不能重復聲明。

經典案例：let命令代替閉包功能

閉包實現：

var arr = [];
for(var i = 0; i < 2; i++){
    arr[i] = (function(i){
        return function(){
            console.log(i);
        };
    }(i));
};
arr[1]();

let 實現：

"use strict";
var arr = [];
for(let i = 0; i < 2; i++){
    arr[i] = function(){
        console.log(i);
    };
};
arr[1]();

參考文章：

ES6中啥是塊級作用域？運用在哪些地方？

變量作用域

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

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

ES6新增命令：let

摘要：的介紹是新增的命令。基本語法聲明的變量，只在其所在其所在的代碼塊內有效。不允許在函數的一級作用域內重新聲明參數。 let的介紹 let是ES6新增的命令。作用：聲明變量。類似于：var。與var的區別：使用let聲明的變量，只在其所在的代碼塊內有效。定義回顧聲明變量：可以用var，也可以不用var。是否允許變量提升：允許。是否允許重復聲明同一個變量：允許。變量的作用域：全局作用域、...

mist14 2019-08-23 14:12 評論0 收藏0
ES6學習摘要（01）（新人學習）

摘要：入門一前言由于最近本人在學習，做一些筆記能夠更好的熟悉，就趁此機會來寫一篇關于的新人學習摘要吧。的作用域與命令相同只在聲明所在的塊級作用域內有效。塊級作用域新增方式和實際上為新增了塊級作用域。同時，函數聲明還會提升到所在的塊級作用域的頭部。 ECMAScript6/ES6 入門一、前言由于最近本人在學習ES6，做一些筆記能夠更好的熟悉，就趁此機會來寫一篇關于ES6的新人學習摘要吧。...

dmlllll 2019-08-21 17:59 評論0 收藏0
es6塊級作用域

摘要：塊級作用域存在于兩個地方函數內部。如下例應該返回創建數組的構造函數即這是數組返回這是數組從上例，我們可以知道即使全局作用域中已經定義了變量或者已經存在了屬性，但我們之后定義的變量則會覆蓋之前已經定義好的或者已經存在的變量屬性。一.var 聲明與變量提升機制在JavaScript中使用var定義一個變量，無論是定義在全局作用域函數函數的局部作用域中，都會被提升到其作用域的頂部，這也是...

cnTomato 2019-08-23 16:19 評論0 收藏0
ES6簡單了解

摘要：報錯塊級作用域明確允許在塊級作用域中聲明函數。但其值是固定的，不可更改，只讀。一旦聲明變量，就必須立即初始化，不能留到以后賦值。調用函數會返回一個內部指針，執行它不會返回結果返回的是指針對象。 ES6初步學習 let和const let 用來聲明變量，但是所聲明的變量只在let命令所在的代碼塊內有效 let不像var那樣會發生變量提升，所以一定要先聲明后使用。 console.log...

K_B_Z 2019-08-20 15:08 評論0 收藏0
深入理解ES6 - var-let-const

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

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