JavaScript中let、const、var 的區別

胖蕊蕊發表於2020-11-23

JavaScript中let、const、var 的區別

目錄:
1.是否存在變數提升?
2.是否存在暫時性死區?
3.是否允許重複宣告變數?
4.是否存在塊級作用域?

  • 是否能修改宣告的變數?
    在ES5中,宣告變數只有var和function兩種形式。但是因為var宣告的變數會有一定的缺點(內層變數可能覆蓋外層變數的問題以及用來計數的迴圈變數洩露為全域性變數,下面有介紹),ES6提出了使用let和const宣告變數,彌補了ES5中var的缺點。
    1.是否存在變數提升?

    • var宣告的變數存在變數提升(將變數提升到當前作用域的頂部)。即變數可以在宣告之前呼叫,值為undefined。
    • let和const不存在變數提升。即它們所宣告的變數一定要在宣告後使用,否 則報ReferenceError錯。
console.log(f) //undefined
var f = 1 ;

console.log(g) //ReferenceError: g is not defined
let g = 2;

console.log(h) //ReferenceError: g is not defined
const h = 2;

2.是否存在暫時性死區

let和const存在暫時性死區。即只要塊級作用域記憶體在let命令,它所宣告的變數就“繫結”(binding)這個區域,不再受外部的影響。
var tmp = 123;
if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
//以上程式碼if後面{}形成了塊級作用域,由於使用let宣告瞭tmp,則這個變數就繫結了塊區域,在宣告之前使用,會報錯。在這裡插入程式碼片

在這裡插入程式碼片在程式碼塊內,使用let命令宣告變數之前,該變數都是不可用的。這在語法上,稱為“暫時性死區”(temporal dead zone,簡稱 TDZ)。
總之,暫時性死區的本質就是,只要一進入當前作用域,所要使用的變數就已經存在了,但是不可獲取,只有等到宣告變數的那一行程式碼出現,才可以獲取和使用該變數。
3.是否允許重複宣告變數?

  • var允許重複宣告變數。
  • letconst在同一作用域不允許重複宣告變數。
var f = 4;
var f = 5;
console.log(5) //5

let g = 6;
let g = 7;
console.log(7) //SyntaxError: Identifier 'g' has already been declared

const h = 8;
const h = 9;
console.log(h) //SyntaxError: Identifier 'g' has already been declared

4.是否存在塊級作用域?

  • var不存在塊級作用域。
  • let和const存在塊級作用域。
    什麼是塊級作用域:
    ES5中作用域有:全域性作用域、函式作用域。沒有塊作用域的概念。因此也有一系列的問題。
//1,內層變數可能覆蓋外層變數的問題
var a = 2;
function fun(){
    console.log(a) //undefined
    if(false){
        var a = 3;//變數提升帶來的,儘管存在塊級作用域,但是var宣告的變數會跨越這個域。
    }
}
fun()
//2,用來計數的迴圈變數洩露為全域性變數。
var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5  i迴圈結束後,洩露成了全域性變數

ECMAScript 6(簡稱ES6)中新增了塊級作用域。塊作用域由{ }包括,if語句和for語句裡面的{ }也屬於塊作用域。

//1,解決內層變數可能覆蓋外層變數的問題
var b = 2;
function fun1(){
    console.log(b) //2 訪問的外層變數
    if(false){
        let b = 3;//不存在變數提升,變數存在於塊級作用域之中。
    }
}
fun1()
//2,解決用來計數的迴圈變數洩露為全域性變數。
var s1 = 'hello';
for (let j = 0; j < s1.length; j++) {
  console.log(s1[j]); //j存在於塊級作用域之中,和其繫結
}
console.log(j); // 報錯 j is not defined

5. 是否能修改宣告的變數?

  • varlet可以。
  • const宣告一個只讀的常量。一旦宣告,常量的值就不能改變。const宣告的變數不得改變值,這意味著,const一旦宣告變數,就必須立即初始化,不能留到以後賦值。
const f = 10;
// f= 11;
// console.log(f) //報錯 不能進行重複宣告

const obj = {
    name: '小明',
    age: 18
}
obj.age = 20
console.log(obj) //{ name: '小明', age: 20 }  
//const宣告常量,不允許對變數重新賦值。對於引用型別的值而言,只要在棧記憶體儲存的地址值不變即可。

相關文章