作用域（Scope）是什么

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

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

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

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

下面我們就來說說各自的區(qū)別。

var 聲明

var聲明，為ES5的語法，var聲明的變量總是歸屬于包含函數(shù)（即全局，如果在最頂層的話）。在 javaScript 函數(shù)內(nèi)部聲明的變量（使用 var）是局部變量，所以只能在函數(shù)內(nèi)部訪問它（該變量的作用域是局部的）?？梢栽诓煌暮瘮?shù)中使用名稱相同的局部變量，因為只有聲明過該變量的函數(shù)才能識別出該變量。

提升(Hoisting)

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

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

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

變量只會被部分提升。而且只有變量的聲明會被提升，賦值不會動。

開發(fā)者可能最希望實現(xiàn) for循環(huán)的塊級作用域了，因為可以把隨意聲明的計數(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);
}

再來看一個例子

(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 聲明

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

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是對賦值做鎖定，不對值的改變鎖定。例如：數(shù)組、對象。 一個常見的誤解是：使用const聲明的變量，其值不可更改，但是對于數(shù)組和對象，其值是可以更改的。

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

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

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

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

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

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

最新評論