在最基本的層面上，JavaScript有兩種類(lèi)型的范圍:

 

Global Scope（全局作用域）

 

Local Scope（局部作用域）

前端學(xué)習(xí)

全局作用域

當(dāng)你開(kāi)始用JavaScript編寫(xiě)代碼時(shí)，你就已經(jīng)在全局范圍內(nèi)。任何在全局范圍內(nèi)編寫(xiě)的東西都可以在JavaScript代碼中的任何地方訪問(wèn)

var cat = 'Jerry';

 

function localScopeExample(){

  // LOCAL SCOPE

  console.log(cat); // Jerry

}

 

// GLOBAL SCOPE

console.log(cat); // Jerry

 

局部作用域

局部作用域稍微復(fù)雜一點(diǎn)。局部作用域變量只能在局部作用域（它們被定義的地方）中可見(jiàn)和可訪問(wèn)。您可以將局部作用域視為您在全局范圍內(nèi)創(chuàng)建的任何新范圍。

一個(gè)簡(jiǎn)單的例子就是在使用函數(shù)時(shí)。用JavaScript編寫(xiě)的每個(gè)函數(shù)都會(huì)創(chuàng)建一個(gè)新的局部作用域。這些局部作用域的變量只能在它們定義的函數(shù)中訪問(wèn)。

我們來(lái)看一個(gè)例子。我們將創(chuàng)建一個(gè)函數(shù)并在該函數(shù)中聲明變量cat。貓可以訪問(wèn)并且可以在該功能的任何地方使用。但是，在函數(shù)之外調(diào)用cat將導(dǎo)致Uncaught ReferenceError：

function localScopeExample(){

  // LOCAL SCOPE

  var cat = 'Jerry';

  console.log(cat); // Jerry

}

 

// GLOBAL SCOPE

console.log(cat); // Uncaught ReferenceError: cat is not defined

 

由于局部變量只能在其函數(shù)中訪問(wèn)，因此可以在不同的函數(shù)中使用相同的變量名稱(chēng)：

function func1(){

  var cat = 'Jerry';

  console.log(cat); // Jerry

}

 

function func2(){

  var cat = 'Tom';

  console.log(cat); // Tom

}

 

詞法作用域

學(xué)習(xí)詞法作用域也很重要。詞法作用域（也稱(chēng)為靜態(tài)作用域）是內(nèi)部函數(shù)訪問(wèn)外部函數(shù)范圍的能力。

我們來(lái)看一個(gè)例子。在下面的代碼中，我們定義了兩個(gè)函數(shù) - func1在全局范圍內(nèi)，func2在func1范圍內(nèi)聲明。由于詞匯范圍的限制，您可以在范圍2中訪問(wèn)全局作用域和范圍1中的所有內(nèi)容：

// GLOBAL SCOPEvar dog = 'Lewis';

 

function func1(){

  // SCOPE 1

  var cat = 'Jerry';

 

  var func2 = function(){

    // SCOPE 2

    console.log(cat); // Jerry

    console.log(dog); // Lewis

  }

}

 

塊級(jí)作用域

使用var時(shí)，變量既可以是全局作用域，也可以局部作用于定義它的函數(shù)。塊級(jí)作用域如if，for，while，{}對(duì)var 沒(méi)有影響。

let & const,另一方面，它們被限定在它們所定義的區(qū)塊內(nèi)。我們來(lái)看一個(gè)例子：

let x = 1;

 

{

  let x = 2;

  console.log(x); // 2

}

 

console.log(x); // 1

 

正如你在上面看到的那樣，簡(jiǎn)單地使用括號(hào)來(lái)創(chuàng)建一個(gè)代碼塊將在本地范圍內(nèi)在該塊內(nèi)聲明的任何變量。相同的概念適用于其他塊范圍：

let x = 1;

 

if (x !== 2) {

  let x = 2;

  console.log(x); // 2

}

 

console.log(x); // 1

 

但要小心。如果您不小心重新聲明具有相同塊范圍的相同變量，則會(huì)出現(xiàn)錯(cuò)誤：

{

  let x = 1;

  let x = 2;

}

 

Uncaught SyntaxError: Identifier 'x' has already been declared

 

關(guān)鍵要點(diǎn)：

全局范圍的持續(xù)時(shí)間與系統(tǒng)一樣長(zhǎng)。

局部變量在函數(shù)啟動(dòng)時(shí)創(chuàng)建，并在函數(shù)結(jié)束時(shí)刪除。

詞法作用域允許內(nèi)部函數(shù)訪問(wèn)其外部函數(shù)的作用域

const和let是塊范圍變量。塊范圍不適用于var。

原文鏈接： codeburst.io