這篇文章主要介紹JavaScript中作用域scope的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),集賢網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:集賢等地區(qū)。集賢做網(wǎng)站價(jià)格咨詢:18982081108

什么是作用域

程序的執(zhí)行，離不開(kāi)作用域，也必須在作用域中才能將代碼正確的執(zhí)行。

所以作用域到底是什么，通俗的說(shuō)，可以這樣理解：作用域就是定義變量的位置，是變量和函數(shù)的可訪問(wèn)范圍，控制著變量和函數(shù)的可見(jiàn)性和生命周期。

而JavaScript中的作用域，在ES6之前和ES6之后，有兩種不同的情況。

ES6之前，JavaScript作用域有兩種：函數(shù)作用域和全局作用域。

ES6之后，JavaScript新增了塊級(jí)作用域。

作用域的特性

在JavaScript變量提升的討論中，我們其實(shí)是缺少了一個(gè)作用域的概念的，變量提升其實(shí)也是針對(duì)在同一作用域中的代碼來(lái)說(shuō)的。

對(duì)編譯器的了解，讓我們明白，對(duì)于一段代碼【var a = 10】變量的賦值操作，其實(shí)是包含了兩個(gè)過(guò)程：

1、變量的聲明和隱式賦值（var a = undefined），這個(gè)階段在編譯時(shí)

2、變量的賦值（a = 10），這個(gè)階段在運(yùn)行時(shí)

先看一下如下代碼：

var flag = true;

if(flag) {
  var someStr = 'flag is true';
}

function doSomething() {
  var someStr = 'in doSomething';
  var otherStr = 'some other string';
  console.log(someStr);
  console.log(flag);
}

doSomething();

for(var i = 0; i < 10; i++) {
  console.log(i);
}

console.log(i);

{
  var place = 'i do not want to be visited';
}

那么這一些代碼在編譯之后，執(zhí)行之前，根據(jù)變量提升的機(jī)制，我們可以知道應(yīng)該是下面這個(gè)樣子：

function doSomething() { // 函數(shù)優(yōu)先提升
  // 提升隱式賦值
  var someStr = undefined; 
  var otherStr = undefined; 

  someStr = 'in doSomething';
  otherStr = 'some other string';

  console.log(someStr);
  console.log(flag);
}

// 隱式賦值和提升
var flag = undefined; 
var someStr = undefined;
var i = undefined;
var place = undefined;

flag = true;

if(flag) {
  someStr = 'flag is true';
}

for(i = 0; i < 10; i++) {
  console.log(i);
}

doSomething();

console.log(i);

{
  place = 'i do not want to be visited';
}

因?yàn)樽兞康奶嵘匦裕约盁o(wú)塊級(jí)作用域的概念，所以代碼中在同一個(gè)作用域中變量和函數(shù)的定義，在編譯階段都會(huì)提升到頂部。

通過(guò)上述代碼，我們大體上可以得出作用域的特性：

第一、內(nèi)部作用域和外部作用域是嵌套關(guān)系。外部作用域完全包含內(nèi)部作用域。

第二、內(nèi)部作用域可訪問(wèn)外部作用域的變量，但是外部作用域不能訪問(wèn)內(nèi)部作用域的變量，（鏈?zhǔn)嚼^承，向上部作用域查找）。

第三、變量提升是在同一個(gè)作用域內(nèi)部出現(xiàn)的。

第四、作用域用于編譯器在編譯代碼時(shí)候，確定變量和函數(shù)聲明的位置。

塊級(jí)作用域

上述代碼，在ES6+的環(huán)境中運(yùn)行，也是和ES6之前是相同的結(jié)果，但是ES6不是引用了塊級(jí)作用域嗎，為什么大括號(hào)塊內(nèi)的代碼還是會(huì)出現(xiàn)和之前一樣的編譯方式呢？

那么，ES6中的塊級(jí)作用域到底是什么？

let & const

利用var定義的變量，具有提升的性質(zhì)，可能會(huì)影響代碼的執(zhí)行結(jié)果。

這是var定義變量的缺陷，那么如何規(guī)避這種缺陷呢？在ES6中，設(shè)計(jì)出來(lái)了let和const來(lái)重新定變量。

但是，由于JavaScript標(biāo)準(zhǔn)定義的非常早，1995年5月JavaScript方案定義，1996年微軟提供了JavaScript解決方案JScript。而網(wǎng)景公司為了同微軟競(jìng)爭(zhēng)，神情了JavaScript標(biāo)準(zhǔn)，于是，1997年6月第一個(gè)國(guó)際標(biāo)準(zhǔn)ECMA-262便頒布了。

C語(yǔ)言標(biāo)準(zhǔn)化的過(guò)程卻是將近二十年后才頒布。

所以，我們以后設(shè)計(jì)的語(yǔ)言既要兼容var也要有自己的塊級(jí)作用域，讓var和let以及const在引擎做到兼容。

所以，我們定義塊級(jí)作用域的標(biāo)準(zhǔn)，只能從定義變量的方式入手，而不是直接一個(gè){}塊就可以解決。

先讓我們看一下下面代碼：

var name = 'someName';

function doSomething(){
  console.log(name);
  if(true) {
    var name = 'otherName';
  }
}
doSomething();
結(jié)果：undefined

產(chǎn)生這個(gè)結(jié)果的原因是我們函數(shù)內(nèi)部的變量提升，覆蓋了外部作用域的變量，也就是說(shuō)，其實(shí)打印出來(lái)的值是doSomething函數(shù)中的變量聲明的值。

但是這樣卻并不符合塊級(jí)作用域的預(yù)期，如果有許多類似代碼，理解起來(lái)也會(huì)相當(dāng)困難。如果將代碼用ES6方式改寫(xiě)：

let name = 'someName';

function doSomething(){
  console.log(name);
  if(true) {
    let name = 'otherName';
  }
}

doSomething();

結(jié)果：'someName'

從運(yùn)行結(jié)果看，我們真正的做到了塊級(jí)作用域應(yīng)該有的效果，那么let和const又是如何支持塊作用域的呢？

執(zhí)行上下文

先想想一下JavaScript中的一個(gè)作用域兩個(gè)執(zhí)行上下文中的編譯過(guò)程中的環(huán)境：

變量環(huán)境：編譯階段var聲明存放的位置（一個(gè)大對(duì)象）。

詞法環(huán)境：我們代碼書(shū)寫(xiě)的位置，也是let和const的初始化位置（代碼按詞法環(huán)境順序執(zhí)行，按照{(diào)}劃分的棧結(jié)構(gòu)）。

而在編譯階段，我們將var定義的變量全都在編譯過(guò)程在變量環(huán)境初始化為undefined，但是用let和const定義的變量，其實(shí)他們并未在變量環(huán)境初始化，而是在詞法環(huán)境初始化，也就是執(zhí)行代碼位置初始化。

詞法環(huán)境的特點(diǎn)：按照{(diào)}劃分的一個(gè)棧結(jié)構(gòu)。

變量查找方式

JavaScript中變量查找的方式：沿著詞法環(huán)境的棧頂向下查找，找不到的變量去變量環(huán)境中查找，這樣就形成了先查找代碼塊中的變量，再查找提升之后的變量環(huán)境，這樣就形成了塊級(jí)作用域的概念。

上面的代碼形成兩種環(huán)境的情況如下：

一、全局環(huán)境的執(zhí)行上下文

變量環(huán)境：函數(shù)聲明function doSomething() { … }

詞法環(huán)境棧：執(zhí)行到let name = ‘someName';讓語(yǔ)句name = ‘someName'入棧。

二、doSomething的執(zhí)行上下文（被全局環(huán)境包裹）

變量環(huán)境：無(wú)

詞法環(huán)境棧情況：執(zhí)行到let name = ‘otherName',語(yǔ)句的時(shí)候，name = ‘other'才會(huì)入棧；

JavaScript代碼執(zhí)行方式

執(zhí)行doSomething的時(shí)候，還未執(zhí)行l(wèi)et name = ‘otherName',所以，此時(shí)doSomething的詞法環(huán)境中并未有name = ‘otherName'，這個(gè)時(shí)候查找，只能向外部作用域查找（全局作用域）

此時(shí)查找到全局作用域name = ‘someName'所以此時(shí)就打印了someName

代碼接著執(zhí)行到了if語(yǔ)句內(nèi)部，才會(huì)將name = ‘otherName'入棧，但是此時(shí)因?yàn)檎Z(yǔ)句已經(jīng)執(zhí)行完畢，所以也就無(wú)關(guān)痛癢了。

JavaScript也就通過(guò)這種方式，實(shí)現(xiàn)了塊級(jí)別作用域。

以上是“JavaScript中作用域scope的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)題目：JavaScript中作用域scope的示例分析-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://chinadenli.net/article0/dhpoio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、面包屑導(dǎo)航、網(wǎng)站營(yíng)銷、標(biāo)簽優(yōu)化、網(wǎng)站建設(shè)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)