ECMAScript6(1)：塊級作用域

KoreyLee 發布于2019-08-23 11:45 / 1947人閱讀

摘要：和塊級作用域塊級作用于對于強類型語言經驗的人應該非常好理解一言以蔽之對變量作用于分隔使用了函數詞法作用域而使用花括號塊作用域。但是花括號對于沒有聲明直接定義以及用聲明的變量沒有影響這些變量依然遵守詞法作用域規則。

let、const和塊級作用域

塊級作用于對于強類型語言經驗的人應該非常好理解, 一言以蔽之：ES5對變量作用于分隔使用了函數(詞法作用域), 而ES6使用花括號(塊作用域)。
對于詞法作用域在 javascript函數、作用域鏈與閉包中有詳細的解釋。對于let 和 const聲明的變量在花括號的分割下同樣會形成作用于鏈(內部訪問外部的, 但外部不能訪問內部)。但是花括號對于沒有聲明直接定義以及用 var 聲明的變量沒有影響, 這些變量依然遵守詞法作用域規則。

對于let 和 const 最大的好處就是避免了可能的運行時錯誤, 不過也有直觀的好處：

用塊(Blocks)替換立即執行函數(IIFEs)

定義循環變量不會外泄

循環定義函數可以不用閉包了

可以放心的在 if 等條件中定義函數

//用塊(Blocks)替換立即執行函數(IIFEs)
//ES5
(function () {
  var food = "Meow Mix";
}());
console.log(food); // Reference Error

//ES6
{
  let food = "Meow Mix";
}
console.log(food); // Reference Error

var a = [];
for(let i = 0; i < 10; i++){
  a[i] = function(){
    console.log(i);
  }
}
a[6]();       //這里輸出6, 在var定義i的for循環中輸出 10
console.log(i);    //ReferenceError

function b(){console.log("outside");}
function f(){
  if(false){
    function b(){console.log("inside");}
  }
  b();
}
f();   // ES5 中報錯："TypeError:b is not a function" 而 ES6 中輸出"outside"

由此例可以看出 function 定義函數不具有塊級作用域。

但我們需要注意的一下幾點：

let 和 const 聲明的變量不在 window 的屬性中

var a = 10;
let b = 20;
const c = 30;

console.log(window.a);    //10
console.log(window.b);    //undedined
console.log(window.c);    //undedined

let 和 const 聲明的變量沒有聲明提前, 所以在作用域內存在暫時性死區

var temp = 20;
(function area(){
  console.log(temp);  //undefined
  var temp = 30;      //聲明提前
}());
if(true){
  console.log(temp);  //ReferenceError   但是 babel 會得到 undefined
  let temp = 20;
}

//一個隱蔽的死區
function bar(x = y, y = 2){
  console.log(x, y);
}
bar();    //報錯, 因為定義 x 的時候, y 還沒有定義 (babel 中不報錯，得到 undefined 2)
function par(x = 2, y = x){
  console.log(x, y);
}
par();    //22

let 和 const 聲明變量在當前作用域(不包括作用域鏈)上不能重復。const聲明的變量必須初始化, 且不能修改:

let a = 10;
var b = 20;
const c = 30;

let a = 4;    //報錯
const b = 3;  //報錯
c = 20;   //報錯, c是只讀的

不可以連續定義變量

let a=b=3;     //報錯 b 未定義
const c=d=2;   //報錯 d 未定義

技巧：ES6 中, 在塊作用于外調用內部函數

var f;
{
  f = function(){
    console.log("inside");
  }
}
f();

const 聲明的基本變量不可改變, 但復雜變量可以改變其內容

const 這個特性和底層的 c++ 一致, 在 c++ 中 const 相當于常指針 int * const p, 也就是其指向的數據所在內存區域可讀可寫, 但是指針的值初始后就不能改。

const a = 10;
const b = {
  num: 20
};
b.num = 30;
console.log(b.num);   //30
a = 20;         //TypeError
b = {
  num: 90
};              //TypeError

如果想讓非基本變量內部也不可改變, 需要使用 Object.freeze() 方法。可以參考：javascript對象、類與原型鏈

跨模塊常量

對于跨模塊的常量, 可以這樣寫：

// const.js module
export const A = 1;
export const B = 2;

// test.js 文件
import * as constants from "./const";
console.log(constants.A);   //1
console.log(constants.B);   //2
//or
import {A, B} from "./const";
console.log(A);   //1
console.log(B);   //2

GPU云服務器云服務器作用域中作用域作用域規則作用域實例

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

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

ECMAScript6 新特性——“let和const命令”

摘要：基本用法所聲明的變量，只在命令所在的代碼塊內有效。在循環中適合使用不存在變量提升不像那樣會發生變量提升現象暫時性死區只要塊級作用域內存在命令，它所聲明的變量就綁定這個區域，不再受外部的影響。塊級作用域實際上為新增了塊級作用域。 1 let 基本用法所聲明的變量，只在let命令所在的代碼塊內有效。 { let b = 100; console.log(b); //100...

PascalXie 2019-08-19 17:59 評論0 收藏0
常用ECMAScript6語法歸納

摘要：對象的解構賦值函數執行后，返回的是一個對象。分別取出對象中屬性為和的值，根據解構賦值的規則，在左側聲明變量，放在大括號中，變量名要和屬性名保持一致。箭頭函數在中，箭頭函數就是函數的一種簡寫形式允許使用箭頭定義函數。原文博客地址，歡迎學習交流:點擊預覽聲明變量可以使用let、const關鍵字聲明變量，而不推薦使用var聲明變量 var聲明變量的問題：可以多次重復聲明同一個變量...

raledong 2019-08-22 15:14 評論0 收藏0
ECMAScript6標準入門（一）新增變量與數據結構

摘要：一簡介與的關系是的規格，是的一種實現另外的方言還有和轉碼器命令行環境安裝直接運行代碼命令將轉換成命令瀏覽器環境加入，代碼用環境安裝，，根目錄建立文件加載為的一個鉤子設置完文件后，在應用入口加入若有使用，等全局對象及上方法安裝一、ECMAScript6 簡介 (1) 與JavaScript的關系 ES是JS的規格，JS是ES的一種實現（另外的ECMAScript方言還有Jscript和...

Tangpj 2019-08-21 14:26 評論0 收藏0
ES6學習摘要（01）（新人學習）

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

dmlllll 2019-08-21 17:59 評論0 收藏0
深入理解ES6 - var-let-const

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

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