前言

在 JavaScript 的發(fā)展歷程中，變量聲明方式經(jīng)歷了重要的演變。從最初的var，到 ES6 引入的let和const，每種聲明方式都有其獨(dú)特的特性和使用場(chǎng)景。本文將結(jié)合具體代碼示例，詳細(xì)解析這三種聲明方式的區(qū)別與應(yīng)用。

1. var 的特性與問(wèn)題

var是 JavaScript 最早的變量聲明方式，但它存在一些與直覺(jué)不符的特性，在現(xiàn)代開(kāi)發(fā)中已不推薦使用。

// 早期的JS 就用來(lái)頁(yè)面交互，有一些缺失甚至設(shè)計(jì)不合理的地方
// 語(yǔ)言精粹， The Good Parts, The Bad Parts
// es5 只有var 聲明變量，沒(méi)有常量
var age = 18; // js 弱類型，由值決定
age++;
var PI = 3.1415926; // 變量大寫(xiě) 約定就不應(yīng)該改變 編程習(xí)慣
console.log(age);

var的主要問(wèn)題在于變量提升特性：

// var age=18;// undefined
// age = 18; // 賦值
// JS 腳本語(yǔ)言，它的編譯階段和執(zhí)行階段不像Java/C++ 一樣分開(kāi)的那么清晰
// 編譯階段有，就在代碼執(zhí)行之前的一霎那，var 就變量提升了
// 接下來(lái)代碼進(jìn)入執(zhí)行階段
// 變量提升 不利于代碼的可讀性，應(yīng)該廢棄的糟粕

變量提升意味著var聲明的變量會(huì)在代碼執(zhí)行前被提升到作用域頂部，這可能導(dǎo)致意外的行為和降低代碼可讀性。

2. let 的塊級(jí)作用域

ES6 引入的let解決了var的許多問(wèn)題，其中最關(guān)鍵的是引入了塊級(jí)作用域：

{   // 塊級(jí)作用域
    var age=18; // 不支持塊級(jí)作用域
    let height = 188; // 支持塊級(jí)作用域 最大型項(xiàng)目或高級(jí)語(yǔ)言的核心
}

console.log(age); // 輸出18，var聲明的變量在塊級(jí)作用域外仍可訪問(wèn)
console.log(height); // 報(bào)錯(cuò)：ReferenceError: height is not defined

上述代碼中，let聲明的height只在塊級(jí)作用域（{}內(nèi)）有效，在作用域外訪問(wèn)會(huì)拋出ReferenceError。這一特性讓 JavaScript 更符合其他高級(jí)編程語(yǔ)言的特性，也更適合大型項(xiàng)目開(kāi)發(fā)。

let還解決了變量提升的問(wèn)題，引入了暫時(shí)性死區(qū)：

// 暫時(shí)性死區(qū)
// 在編譯階段的變量提升是為了編譯階段就知道有哪些變量和常量
// let/const + 暫時(shí)性死區(qū) 解決了變量提升的問(wèn)題
let height=188;

在let聲明變量之前訪問(wèn)該變量會(huì)拋出ReferenceError: Cannot access '變量名' before initialization，這避免了因變量提升導(dǎo)致的意外行為。

3. const 的常量特性

const用于聲明常量，它具有let的塊級(jí)作用域特性，同時(shí)還保證變量引用不可更改：

const PI = 3.1415926;
const person={
    name: "nwk",
    age: 20
}
// person = 'hahaha'; // 報(bào)錯(cuò)：TypeError: Assignment to constant variable
person.age=21; // 允許修改對(duì)象屬性
console.log(person); // 輸出：{ name: 'nwk', age: 21 }

需要注意的是，const保證的是引用不可變，而非值不可變：

• 對(duì)于簡(jiǎn)單數(shù)據(jù)類型（如數(shù)字、字符串），const聲明的變量值不可更改
• 對(duì)于復(fù)雜數(shù)據(jù)類型（如對(duì)象、數(shù)組），const只保證引用地址不變，但可以修改引用地址中的屬性值

如果需要完全凍結(jié)對(duì)象，使其屬性也不可修改，可以使用Object.freeze()：

const wes = Object.freeze(person); // 凍結(jié)對(duì)象
console.log(wes);
wes.age = 17; // 嘗試修改凍結(jié)對(duì)象的屬性，不會(huì)生效也不會(huì)報(bào)錯(cuò)
console.log(wes); // 輸出：{ name: 'nwk', age: 21 }

4. 函數(shù)提升與作用域

JavaScript 中函數(shù)是一等公民，存在函數(shù)提升現(xiàn)象，與var的變量提升有所不同：

// js 中函數(shù)是一等公民，編譯階段就會(huì)進(jìn)行函數(shù)提升
// 和var 相同的地方都會(huì)提升，不同的地方在于var只會(huì)提升變量聲明
// 而函數(shù)不只提升聲明，連賦值也一起提升
setWidth(); // 可以在函數(shù)聲明前調(diào)用，因?yàn)楹瘮?shù)被完全提升

// 全局作用域
function setWidth(){
    // 函數(shù)作用域 局部
    var width=100;
    { // 塊級(jí)作用域
        let a=1;
    }
    console.log(width); // 輸出100
}

setWidth();
// console.log(width); // 報(bào)錯(cuò)：ReferenceError: width is not defined

函數(shù)提升允許在函數(shù)聲明前調(diào)用函數(shù)，而var聲明的變量只會(huì)提升聲明部分，不會(huì)提升賦值。

5. 常見(jiàn)錯(cuò)誤總結(jié)

使用這三種聲明方式時(shí)，常見(jiàn)的錯(cuò)誤包括：

1. ReferenceError: 變量名 is not defined：在作用域外訪問(wèn)let或const聲明的變量
2. TypeError: Assignment to constant variable：嘗試修改const聲明的變量引用
3. ReferenceError: Cannot access '變量名' before initialization：在暫時(shí)性死區(qū)內(nèi)訪問(wèn)let或const聲明的變量

6. 最佳實(shí)踐

• 優(yōu)先使用const，當(dāng)確實(shí)需要修改變量時(shí)使用let
• 避免使用var，以減少因變量提升和作用域問(wèn)題導(dǎo)致的錯(cuò)誤
• 對(duì)于不需要修改的對(duì)象，可使用Object.freeze()進(jìn)行凍結(jié)

通過(guò)合理使用var、let和const，可以寫(xiě)出更清晰、更可靠的 JavaScript 代碼，尤其在大型項(xiàng)目開(kāi)發(fā)中，這些特性顯得尤為重要。

到此這篇關(guān)于JavaScript中var、let和const的區(qū)別與應(yīng)用具體代碼示例的文章就介紹到這了,更多相關(guān)JS中var、let和const區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論