詳解JavaScript中var和let的區(qū)別
變量
ECMAScript變量是松散類型,意思就是說(shuō)變量可以保存任何類型的數(shù)據(jù),每個(gè)變量只不過(guò)是用于保存任意值的命名占位符。在JavaScript中,有3個(gè)關(guān)鍵字可以聲明變量:var、const和let,其中var在ECMAScript的所有版本中都可以使用,而const和let只能在ECMAScript 6及更晚的版本中使用
var 關(guān)鍵字
如果我們想定義變量,我們可以使用var操作符(這里要注意var也是一個(gè)關(guān)鍵字~),后跟變量名
var message;
這行代碼會(huì)定義一個(gè)名為message的變量,用于保存任何類型的值,如果在不初始化的情況下,默認(rèn)為undefined。ECMAScript實(shí)現(xiàn)變量初始化,因此可以同時(shí)定義變量并且設(shè)置它的值
var message = "hi";
通過(guò)上方代碼我們可以了解到,message被定義為一個(gè)保存字符串值hi的變量,像這樣初始化變量不會(huì)將它標(biāo)識(shí)為字符串類型,這僅僅是一個(gè)簡(jiǎn)單的賦值而已,我們不僅可以改變保存的值,同時(shí)還可以改變值的類型
var message = "hi" message = 100 ;
通過(guò)上方代碼我們可以看到,message首先被定義為一個(gè)用于保存字符串值hi的變量,然后又被重寫為保存了數(shù)值100,雖然不推薦改變變量保存值的類型,但是這個(gè)在ECMAScript里面是非常有效的
var聲明作用域
我們?cè)诙x一個(gè)函數(shù)變量的時(shí)候,通常都會(huì)考慮他們的作用域,使用var操作符定義的變量將會(huì)成為包含它的函數(shù)的局部變量,比如用var在一個(gè)函數(shù)內(nèi)部定義一個(gè)變量,就意味著一旦出了這個(gè)區(qū)域,此定義無(wú)效
<script>
function test() {
var message = "hi";
}
test();
console.log(message);
</script>從上方代碼我們可以看到,message變量是在函數(shù)內(nèi)部使用var定義的,函數(shù)名叫test() ,調(diào)用它會(huì)創(chuàng)建這個(gè)變量并且會(huì)給它賦值,調(diào)用結(jié)束之后這個(gè)變量就會(huì)被銷毀,因此上方代碼的倒數(shù)第二行會(huì)報(bào)語(yǔ)法錯(cuò)誤,如果我們想要解決這個(gè)問(wèn)題,把message定義成全局變量即可
<script>
function test() {
message = "hi";
}
test();
console.log(message);
</script>去掉之前的var操作符之后,message就變成了全局變量,我們只需要調(diào)用一次函數(shù)test() ,就可以定義這個(gè)變量,并且在函數(shù)外部訪問(wèn)
注意注意!?。?/h3>
我們雖然可以通過(guò)省略var操作符來(lái)定義全局變量,但是不推薦這么做,在局部作用域中定義的全局變量很難去維護(hù),也會(huì)給我們?cè)斐梢欢ǖ睦Щ?/strong>,因?yàn)槲覀儾荒艽_定這個(gè)var是不是有意而為之,如果像這樣給未聲明的變量賦值,則會(huì)導(dǎo)致拋出ReferenceError
如果我們需要定義多個(gè)變量,我們可以在一條語(yǔ)句中用逗號(hào)分隔每個(gè)變量(及可選的初始化)
<script>
var message = "hi";
found = false;
age = 29;
</script>這里我們定義了3個(gè)初始化變量,因?yàn)?strong>ECMAScript是松散類型的,所以使用不同數(shù)據(jù)類型初始化的變量可以用一條語(yǔ)句來(lái)聲明,插入換行和空格縮進(jìn)不是必需品(因?yàn)檫@里不是Python~)
小tip
在嚴(yán)格模式下,不能定義名為eval和arguments的變量,否則會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤
var聲明提升
我們?cè)谑褂?strong>var的時(shí)候,下面的代碼不會(huì)報(bào)錯(cuò),因?yàn)?strong>使用這個(gè)關(guān)鍵字聲明的變量會(huì)自動(dòng)提升到函數(shù)作用域的頂部
<script>
function foo() {
console.log(age);
var age = 26;
}
foo();
</script>
之所以這個(gè)代碼不會(huì)報(bào)錯(cuò),是因?yàn)?strong>ECMAScript已經(jīng)幫我們解決啦~(它自己會(huì)自動(dòng)調(diào)整閱讀順序),這就是所謂的提升,也就數(shù)把所有變量聲明都拉到函數(shù)作用域的頂部,此外,反復(fù)多次使用var聲明同一個(gè)變量也是沒(méi)有問(wèn)題的
let聲明
let跟var的作用差不多,但是有著十分重要的區(qū)別,最明顯的區(qū)別就是,let聲明的范圍是塊作用域,而var聲明的范圍是函數(shù)作用域
<script>
if(true){
var name = "Matt"
console.log(name); //Matt
}
console.log(name); //Matt
if(true){
let age = 26 ;
console.log(age) //26
}
console.log(age) //ReferenceError
</script>
在這里,age變量之所以不能在if塊外部被引用,是因?yàn)?strong>它的作用域僅限于該塊內(nèi)部,塊作用域是函數(shù)作用于的子集,因此適用于var的作用域也適用于let
let也不允許同一個(gè)塊作用域中出現(xiàn)冗余聲明,這也會(huì)報(bào)錯(cuò)
var name ; var name ; let age ; let age ; //SyntaxError 標(biāo)識(shí)符age已經(jīng)聲明過(guò)了
當(dāng)然,JavaScript引擎會(huì)記錄用于變量聲明的標(biāo)識(shí)符及其所在的塊作用域,因此嵌套相同的標(biāo)識(shí)符不會(huì)報(bào)錯(cuò), 這是因?yàn)樵谕粋€(gè)塊中沒(méi)有重復(fù)聲明
<script>
var name = "Nicholas";
console.log(name); // Nicholas
if (true) {
var name = "Matt";
console.log(name); // Matt
}
let age = 30;
console.log(age); // 30
if (true) {
let age = 26;
console.log(age); // 26
}
</script>對(duì)聲明冗余報(bào)錯(cuò)不會(huì)因混用let和var而受影響,這兩個(gè)關(guān)鍵字聲明的并不是不同類型的變量,它們只是指出變量在相關(guān)作用域如何存在
var name ; let name ; //SyntaxError let age ; var age ; //SynatxError
到此這篇關(guān)于詳解JavaScript中var和let的區(qū)別的文章就介紹到這了,更多相關(guān)JavaScript var let內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript函數(shù)式編程(Functional Programming)箭頭函數(shù)(Arrow functions)
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)箭頭函數(shù)(Arrow functions)用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程中箭頭函數(shù)相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-05-05
基于dropdown.js實(shí)現(xiàn)的兩款美觀大氣的二級(jí)導(dǎo)航菜單
這篇文章主要介紹了基于dropdown.js實(shí)現(xiàn)的兩款美觀大氣的二級(jí)導(dǎo)航菜單,通過(guò)調(diào)用js插件實(shí)現(xiàn)導(dǎo)航效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
JavaScript是如何實(shí)現(xiàn)繼承的(六種方式)
大多OO語(yǔ)言都支持兩種繼承方式: 接口繼承和實(shí)現(xiàn)繼承 ,而ECMAScript中無(wú)法實(shí)現(xiàn)接口繼承,ECMAScript只支持實(shí)現(xiàn)繼承,而且其實(shí)現(xiàn)繼承主要是依靠原型鏈來(lái)實(shí)現(xiàn),下文給大家技術(shù)js實(shí)現(xiàn)繼承的六種方式,需要的朋友參考下2016-03-03

