變量

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的變量，然后又被重寫(xiě)為保存了數(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)

注意注意?。?！

我們雖然可以通過(guò)省略var操作符來(lái)定義全局變量，但是不推薦這么做，在局部作用域中定義的全局變量很難去維護(hù)，也會(huì)給我們?cè)斐梢欢ǖ睦Щ?/strong>，因?yàn)槲覀儾荒艽_定這個(gè)var是不是有意而為之，如果像這樣給未聲明的變量賦值，則會(huì)導(dǎo)致拋出ReferenceError

<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)文章希望大家以后多多支持腳本之家！

最新評(píng)論