作用域（Scope）是什么

作用域是程序的執(zhí)行環(huán)境，它包含在當(dāng)前位置可訪問(wèn)的變量和函數(shù)。在 ES5 語(yǔ)法中，有全局作用域和局部作用域，ES6 則新增了塊級(jí)作用域。

全局作用域是最外層的作用域，在函數(shù)外面定義的變量屬于全局作用域，可以被任何其他子作用域訪問(wèn)。在瀏覽器中，window 對(duì)象就是全局作用域。在編寫(xiě)前端代碼過(guò)程中，其中有一條優(yōu)化規(guī)則就是少使用全局變量，因?yàn)槿肿兞咳菀讓?dǎo)致程序BUG，并且不容易查找。

局部作用域的基本單元是 function，只在函數(shù)體內(nèi)有效。局部作用域是在函數(shù)內(nèi)部的作用域。在局部作用域定義的變量只能在該作用域以及其子作用域被訪問(wèn)。

javascript中，變量聲明使用 var、const、let來(lái)聲明變量，var為ES5的語(yǔ)法，const和let為ES6之后的語(yǔ)法。ES6 的let和const為新引入的關(guān)鍵字，它們不會(huì)被提升，而且是塊作用域。也就是說(shuō)被大括號(hào)包圍起來(lái)的區(qū)域聲明的變量外部將不可訪問(wèn)。

下面我們就來(lái)說(shuō)說(shuō)各自的區(qū)別。

var 聲明

var聲明，為ES5的語(yǔ)法，var聲明的變量總是歸屬于包含函數(shù)（即全局，如果在最頂層的話）。在 javaScript 函數(shù)內(nèi)部聲明的變量（使用 var）是局部變量，所以只能在函數(shù)內(nèi)部訪問(wèn)它（該變量的作用域是局部的）。可以在不同的函數(shù)中使用名稱(chēng)相同的局部變量，因?yàn)橹挥新暶鬟^(guò)該變量的函數(shù)才能識(shí)別出該變量。

提升(Hoisting)

在編譯過(guò)程中，將var和function的定義移動(dòng)到他們作用域最前面的行為叫做提升。

整個(gè)函數(shù)定義會(huì)被提升。所以，可以在函數(shù)還未定義之前調(diào)用它，而不用擔(dān)心找不到該函數(shù)。

console.log(toSquare(3));?//?9
function?toSquare(n)?{
????return?n?*?n;
}

變量只會(huì)被部分提升。而且只有變量的聲明會(huì)被提升，賦值不會(huì)動(dòng)。

開(kāi)發(fā)者可能最希望實(shí)現(xiàn) for循環(huán)的塊級(jí)作用域了，因?yàn)榭梢园央S意聲明的計(jì)數(shù)器變量限制在循環(huán)內(nèi)部。

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

立即執(zhí)行函數(shù)能夠有效解決：

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

再來(lái)看一個(gè)例子

(function?()?{
????var?testValue?=?"hello";
????var?testFunc?=?function?()?{
????????console.log("just?test");
????};
})();
console.log(window.testValue);?//?undefined
console.log(window.testFunc);?//?undefined

趣題：

var?x?=?10;
var?y?=?20;
[y,?x]?=?[x,?y];
console.log(x,?y);?//?20?10

let 聲明

過(guò)早訪問(wèn) let聲明的引用導(dǎo)致的這個(gè)referenceerror叫做臨時(shí)死亡區(qū)錯(cuò)誤，在訪問(wèn)一個(gè)已經(jīng)聲明但還沒(méi)有初始化的變量。創(chuàng)建一個(gè)塊作用域。

let?g1?=?"global?1";
let?g2?=?"global?2";
{
????g1?=?"new?global?1";
????let?g2?=?"local?global?2";
????console.log(g1);?//?new?global?1
????console.log(g2);?//?local?global?2
????console.log(g3);?//?ReferenceError:?g3?is?not?defined
????let?g3?=?"I?am?not?hoisted";
}

const 聲明

const是對(duì)賦值做鎖定，不對(duì)值的改變鎖定。例如：數(shù)組、對(duì)象。 一個(gè)常見(jiàn)的誤解是：使用const聲明的變量，其值不可更改，但是對(duì)于數(shù)組和對(duì)象，其值是可以更改的。

const?tryMe?=?"initial?assignment";
//下面重新賦值會(huì)導(dǎo)致程序錯(cuò)誤
tryMe?=?"this?has?been?reassigned";?//?TypeError:?Assignment?to?constant?variable.

//對(duì)于數(shù)組是可以更改元素值
const?array?=?["Ted",?"is",?"awesome!"];
array[0]?=?"Barney";
array[3]?=?"Suit?up!";
console.log(array);?//?[?'Barney',?'is',?'awesome!',?'Suit?up!'?]
//下面這樣更改整個(gè)數(shù)組，相對(duì)于重新賦值，是錯(cuò)誤的
array?=?["Barney",?"is",?"awesome!",?"Suit?up!"];

//?同樣對(duì)于對(duì)象
const?airplane?=?{};
airplane.wings?=?2;
airplane.passengers?=?200;
console.log(airplane);?//?{?wings:?2,?passengers:?200?}

//下面是錯(cuò)誤
airplane?=?{?wings:?2,?passengers:?200?};

對(duì)于支持ES6的語(yǔ)法，建議默認(rèn)使用 const， 在確實(shí)需要改變的變量聲明使用 let, 這樣可以在某種程度上實(shí)現(xiàn)代碼的不可變。從而可以避免很多的問(wèn)題的出現(xiàn)。

到此這篇關(guān)于javascript 變量聲明 var,let,const 的區(qū)別的文章就介紹到這了,更多相關(guān)JS var,let,const 的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論