目錄

• 變數
• （一）var
• 1）關於var宣告的變數的作用域
• 2）var宣告提升（hoist）
• （二）let
• 1）與var不同，let宣告的變數不會再作用域中被提升，這一現象被稱為“暫時性死區”
• 2）全域性宣告
• （三）Const
• 總結

變數

ECMAScript中，變數可以儲存任何型別的資料（既可以是字串也可以是陣列也可以是別的……），也即“鬆散的”，變數只是一個用來區分的佔位符，一共有var、const、let三個關鍵字用於宣告變數（var在ECMAScrip所有版本可用，後兩個只在ES6及以後可用）。

（一）var

var a；//僅定義
var b=‘hi'；//定義的同時，設定值

要注意的是，值的設定可以覆蓋，但我們不推薦這麼做

var a=”hello”
a=”hi”

ECMAScript的變數是“鬆散”的，那麼可以用一條語句來對不同的資料型別初始化的宣告，當然插入、換行不是必要的，只是一定要用逗號隔開不同的變數。

Var a=“hello”，
    b=12，
    c=false；

1）關於var宣告的變數的作用域

function test(){
    var a="shanxi";
}
test();//呼叫函式
console.log(a);
//ReferenceError: a is not defined
//報錯：a未定義

變數在使用var定義時，若是在函式內部，則該變數在函式退出時將會被銷燬，無法再呼叫。這裡的a在函式test內部使用var完成定義，呼叫函式test之後，隨即a便被銷燬，因而出現如上報錯。

當省略關鍵詞var時，這樣定義的變數將成為全域性變數（不過不建議這麼做，太多的全域性變數會讓程式變得難以維護）

function test(){
    a="sichuan";
}
test();//呼叫函式
console.log(a);
//sichuan

2）var宣告提升（hoist）

如下，結果是undefined而並沒有報錯，是因為，使用var關鍵字宣告的變數，會自動提升到函式作用域的頂部。也就是，會被ECMAScript看作

function test(){
   console.log(a)
   var a=12;
}
test()
//undefined

也就是，會被ECMAScript看作

function test(){
   var a; 
   console.log(a)
   a=12;
}
test()
//undefined

這種“提升”，會把所有變數的宣告都提到函式作用域的頂部。

（二）let

Let和var作用客棧相似，只是let宣告的範圍是塊作用域，var宣告的範圍是函式作用域

例如如下的if語句中的{}就是一個“塊”，而http://www.cppcns.com不是一個函式作用域。

if(true){
    var b="zhang"
    console.log(b);//zhang
}
console.log(b);//zhang

換成let：

if(true){
    let b="zhang"
    console.log(b);//zhang
}
console.logwww.cppcns.com(b);//ReferenceError: b is not defined

此時b在if外邊（定義b的塊作用域外）便不能被引用。

！！！注意：塊作用域是函式作用域的子域（是前者不一定是後者是後者不一定是前者）。

！！！注意：適用於var的作用域限制，對let是等同的（只是一個作用域是函式作用域一個是塊作用域）。

關於重複宣告，var不報錯而let會報錯，看如下例項：

var a=24;var a=12;var a=5;console.log(a);//5let b=2;let b=4;//SyntaxError: Identifier 'b' has already been declared//執行到此處就已經報錯let b=8;console.log(b);var a=24;
var a=12;
var a=5;
console.log(a);//5
let b=2;
let b=4;//SyntaxError: Identifier 'b' has already been declared
//執行到此處就已經報錯
let b=8;
console.log(b);

關於巢狀使用，會記錄用於變數宣告的識別符號以及其所在塊的作用域，所以在巢狀使用時，不會報錯（因為在同一塊作用域中沒有重複宣告）。

var a="shanxi"
console.log(a);//shanxi
if(true){
    var a="sichaun";
    console.log(a);//sichuan
}
let b=3;
console.log(b);//3
if(true){
    let b=5;
    console.log(b);//5
}

所以，let和var區別只在於，二者決定所宣告的變數的相關作用域存在。

var a;
let a;//SyntaxError: Identifier 'a' has already been declared
let c;
var c;//SyntaxError: Identifier 'c' has already been declared

1）與var不同，let宣告的變數不會再作用域中被提升，這一現象被稱為“暫時性死區”

console.log(a);
var a=2;//undefined
console.log(b);
let b=3;//ReferenceError: Cannot access 'b' before initialization

2）全域性宣告

Var在全域性作用域中宣告出的變數自動會成為window物件的屬性，但let不會

var a=3;
console.log(window.a)//a
let b=10;
console.log(window.b);//undefined

不過let宣告出的變數，依舊是全域性作用域發生的（不然也不會是“undeifned”），變數也會在頁面的生命週期記憶體續，所以必須保證頁面不會重複宣告同一個變數

（三）Const

基本上和let相同，只是使用const時，必須同時初始化變數，且嘗試修改const宣告的變數時會報錯

const n="zhang";
n="li";//TypeError: Assignment to constant variable.
const a=12;
const  a=9;//不可以重複宣告
//SyntaxError: Identifier 'a' has already been declared

當然，const有關宣告的限制，只適用於它指向的變數本身的引用，也就是說，若為一個物件，那麼修改這一物件內部屬性，不會違反const有關的限制。

const house={};

house.name=”myhouse”;

那麼，在let和const出現之後，許多開發者不再很多地使用var了，多使用let和const，使得變數有了明確的作用域、宣告位置以及不變的值。

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望www.cppcns.com您能夠多多關注我們的更多內容!