快捷導(dǎo)航

一文詳解JS中的塊級作用域

更新時(shí)間：2023年09月10日 08:18:49 作者：編程三昧

在JavaScript的世界里,作用域可以分為三種,分別是全局作用域,函數(shù)作用域,塊級作用域,本文主要來和大家聊聊JS中塊級作用域的相關(guān)知識,感興趣的可以了解下

JavaScript 本身一直是函數(shù)式作用域，這就是我們經(jīng)常將整個(gè) JavaScript 文件封裝在一個(gè)空的立即調(diào)用函數(shù)表達(dá)式（IIFE）中的原因。這樣做是為了隔離文件中的所有變量，因此全局中就不會存在變量名沖突。

現(xiàn)在，我們有塊級作用域和兩個(gè)綁定到塊的新變量聲明。

Let

這與var類似，但有一些顯著差異。由于它聲明的變量具有塊級作用域，所以可以在不影響外部變量的情況下聲明具有相同名稱的新局部（內(nèi)部）變量。

var a = 'car' ;
{
    let a = 5;
    console.log(a) // 5
}
console.log(a) // car

因?yàn)樗壎ǖ揭粋€(gè)塊（即就是 { 和 } 之間的范圍），它解決了這個(gè)經(jīng)典的面試問題：“輸出是什么，如何讓它按照你的期望工作？”

for (var i = 1; i < 5; i++){
    setTimeout(() => { console.log(i); }, 1000);
}

在這種情況下，它會輸出 “5 5 5 5 5”，因?yàn)樽兞?i 在每次迭代中都會被改變，最終所有結(jié)果以最后一次變更為準(zhǔn)。

如果您將var切換為let，那就不一樣了?，F(xiàn)在，每個(gè)循環(huán)都會創(chuàng)建一個(gè)新的塊作用域，其值為綁定到該循環(huán)的值。相當(dāng)于你寫了：

{let i = 1; setTimeout(() => { console.log(i) }, 1000)}
{let i = 2; setTimeout(() => { console.log(i) }, 1000)}
{let i = 3; setTimeout(() => { console.log(i) }, 1000)}
{let i = 4; setTimeout(() => { console.log(i) }, 1000)}
{let i = 5; setTimeout(() => { console.log(i) }, 1000)}

var和let之間的另一個(gè)區(qū)別是let不會像var一樣被提升。

{
    console.log(a); // undefined
    console.log(b); // ReferenceError
    var a = 'car';
    let b = 5;
}

由于其更嚴(yán)格的范圍界定和更可預(yù)測的行為，有些人表示應(yīng)該使用let而不是var，除非特別需要用var的聲明提升或需要其更寬松的作用范圍。

Const

如果你想在 JavaScript 中聲明一個(gè)常量變量，那么慣例是將變量命名大寫。然而，這并不能保證它是一個(gè)常量 - 它只是讓其他開發(fā)人員知道這是一個(gè)常量，不應(yīng)該改變。

現(xiàn)在我們有了const聲明。

{
    const c = "tree";
    console.log(c);  // tree
    c = 46;  // TypeError!
}

const 不會使變量不可變，只是鎖定它的賦值。如果你有一個(gè)復(fù)雜的賦值（對象或數(shù)組），那么該值仍然可以修改。

{
    const d = [1, 2, 3, 4];
    const dave = { name: 'David Jones', age: 32};
    d.push(5);
    dave.job = "salesman";
    console.log(d);  // [1, 2, 3, 4, 5]
    console.log(dave);  // { age: 32, job: "salesman", name: 'David Jones'}
}

到此這篇關(guān)于一文詳解JS中的塊級作用域的文章就介紹到這了,更多相關(guān)JS塊級作用域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: