在開(kāi)始介紹let和const變量聲明前，有必要先了解下JavaScript里的var變量聲明。

var變量聲明

全局聲明

var聲明在函數(shù)體外，所聲明的變量為全局變量。var?name?=?"張三";

var所聲明的全局變量會(huì)作為window的一個(gè)屬性，可以使用"."來(lái)引用。如上例的name引用：console.log(window.name)

注意：非嚴(yán)格模式下，聲明在函數(shù)體內(nèi)的變量，把聲明語(yǔ)句的var去掉，那么所聲明的變量也是全局變量。

作用域

var變量聲明的最大特點(diǎn)是它的作用域?yàn)槁暶髡Z(yǔ)句所在的最近函數(shù)體內(nèi)。

示例：function?f()?{

var?message?=?"Hello,?world!";

return?message;

}

var所聲明的message變量的作用域范圍就是在函數(shù)f內(nèi)。

var聲明變量的作用域?yàn)楹瘮?shù)體的全部，隱含著兩個(gè)主要問(wèn)題：變量提升和循環(huán)內(nèi)變量共享。

變量提升

變量提升：JavaScript會(huì)把函數(shù)內(nèi)的變量聲明提升到函數(shù)的最頂部。

示例：function(){

var?a='a';

var?b='b';

var?c='c';

}

等同于function(){

var?a,b,c;

a='a';

b='b';

c='c';

}

這樣看是貌似沒(méi)有問(wèn)題，想一下下面的例子輸出結(jié)果：var?message='message?1';

(function(){

console.log(message)

var?message?='message?2';

})()

很多人可能會(huì)認(rèn)為控制臺(tái)輸出的結(jié)果是message?1。執(zhí)行一下會(huì)發(fā)現(xiàn)，輸出的結(jié)果為undefined。這是因?yàn)樽兞刻嵘恕?/p>

上面的例子實(shí)際等同于var?message='message?1';

(function(){

var?message;

console.log(message)

message?='message?2';

})()

變量提升有它的優(yōu)勢(shì)，但也常常給我們帶來(lái)一些難以發(fā)現(xiàn)的bug。

循環(huán)內(nèi)變量共享

直接看示例：for?(var?i?=?0;?i?

setTimeout(function()?{?console.log(i);?},?100?*?i);

}

我們期待的輸出結(jié)果為依次為0,1,2,3,4,5,6,7,8,9，而實(shí)際輸出結(jié)果都為10。這是因?yàn)樵谘h(huán)內(nèi)共享了變量i，i自增到10結(jié)束setTimeOut()里的函數(shù)還沒(méi)有調(diào)用，當(dāng)調(diào)用函數(shù)時(shí)，i值為10，所以輸出的結(jié)果都為10。

為了解決循環(huán)內(nèi)變量共享，可以考慮使用IIFE。for?(var?i?=?0;?i?

(function(i)?{

setTimeout(function()?{?console.log(i);?},?100?*?i);

})(i);

}

重復(fù)聲明

在上面的例子var?message='message?1';

(function(){

console.log(message)

var?message?='message?2';

})()

message是允許重復(fù)聲明的，重復(fù)聲明的變量會(huì)覆蓋之前聲明的變量。

let變量聲明

let是ES6新增的特性，也是為了解決var變量聲明所存在的一些問(wèn)題，可以說(shuō)let是更完美的var。

基本用法

let?varName?=?變量值;

示例：let?name?=?"張三"；

這是和var聲明變量類(lèi)似。

注意：如果let變量聲明在全局，它并不會(huì)像var聲明的變量一樣成為window的一個(gè)屬性。

作用域

let變量聲明和var最大的不同點(diǎn)就是變量的作用域不一樣。var為函數(shù)作用域，而let變量聲明的為塊作用域(block-scoping)。

塊作用域會(huì)把聲明的變量限定在代碼塊(如使用{}括起來(lái)的代碼庫(kù))或者for循環(huán)內(nèi)，而不是整個(gè)函數(shù)體。function?f(input:?boolean)?{

let?a?=?100;

if?(input)?{

let?b?=?a?+?1;

return?b;

}

//?出錯(cuò):?'b'屬于上面的代碼塊定義的，在代碼塊外不能使用。

return?b;

}

let聲明的變量不允許在聲明前使用，這樣解決了var變量提升引起的問(wèn)題。(function(){

console.log(message);????//此處會(huì)報(bào)錯(cuò)，Uncaught?ReferenceError:?message?is?not?defined

let?message?='my?message';

})()

對(duì)于循環(huán)內(nèi)的變量，每次循環(huán)都會(huì)是捕獲值的副本作為運(yùn)算，而不是共享同一個(gè)值，解決了var循環(huán)內(nèi)共享變量的問(wèn)題。所以前面for循環(huán)的例子只需把var改為let即可：for?(let?i?=?0;?i?

setTimeout(function()?{?console.log(i);?},?100?*?i);

}

重復(fù)聲明

let是不允許在同一作用域內(nèi)重復(fù)聲明，重復(fù)聲明會(huì)報(bào)error:?can't?re-declare?'x'?in?the?same?scope。function?f(x)?{

let?x?=?100;?//?error:?interferes?with?parameter?declaration

}

function?g()?{

let?x?=?100;

var?x?=?100;?//?error:?can't?have?both?declarations?of?'x'

}

const變量聲明

const變量聲明和let類(lèi)似，但如它的名字所寓意，它定義的是常量，包含了兩層意思：聲明的的變量不能被重復(fù)賦值

const聲明變量是必須立刻賦值const?numLivesForCat?=?9;

numLivesForCat?=?10;??//重復(fù)賦值，錯(cuò)誤

const?name;??//錯(cuò)誤，聲明時(shí)沒(méi)有賦值

name?=?"張三";

對(duì)于const聲明的對(duì)象，對(duì)象本身是不能被賦值覆蓋，但是對(duì)象的可修改屬性是允許被修改值的。const?numLivesForCat?=?9;

const?kitty?=?{

name:?"Aurora",

numLives:?numLivesForCat,

}

//?Error

kitty?=?{

name:?"Danielle",

numLives:?numLivesForCat

};

//?all?"okay"

kitty.name?=?"Rory";

kitty.name?=?"Kitty";

kitty.name?=?"Cat";

kitty.numLives--;

總結(jié)

以上是生活随笔為你收集整理的php变量 声明提升,TypeScript：let和const变量声明的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。