let命令

基本用法

我們都知道let命令是用來(lái)聲明變量的，類(lèi)似于var，但是通過(guò)let命令聲明的變量只在所在代碼塊內(nèi)有效。

let a = [];
for (let i = 0;i < 10; i++ ) {
    a[i] = function () {
        console.log(i);
    }
}
a[5](); // 5

如上代碼所示，使用的是let聲明的i，那么這個(gè)變量?jī)H在塊級(jí)作用域內(nèi)有效，即只在每輪循環(huán)內(nèi)有效，所以每次循環(huán)的i其實(shí)都是一個(gè)新變量，所以最后輸出了5。

如果使用了var去申明i，那么這個(gè)i是在全局范圍內(nèi)都有效的，函數(shù)數(shù)組里的i都會(huì)指向同一個(gè)i，導(dǎo)出最后輸出的是最后一輪循環(huán)的i的值。

那就有了一個(gè)疑問(wèn)，使用let聲明的i如果每一輪都是一個(gè)新變量，那怎么知道上一輪循環(huán)的值然后計(jì)算出本輪的值？

這是因?yàn)镴avaScript引擎內(nèi)部會(huì)記住上一輪循環(huán)的值，初始化當(dāng)次循環(huán)的i時(shí)，會(huì)在上一輪循環(huán)的基礎(chǔ)上計(jì)算。

for循環(huán)還有一個(gè)特別的地方，就是設(shè)置循環(huán)變量的括號(hào)內(nèi)是一個(gè)父作用域，而循環(huán)體內(nèi)是一個(gè)單獨(dú)的子作用域。

特性

不存在變量提升：

不存在變量提升我們應(yīng)該都知道，在var命令中會(huì)發(fā)生“變量提升”，就是變量可以在聲明之前使用，而值是undefined。這種是比較奇怪的現(xiàn)象，因?yàn)樗歼€沒(méi)聲明怎么就可以使用呢？

所以。let命令改變了這種語(yǔ)法，通過(guò)let聲明的變量一定要在變量聲明后才能用，不然就會(huì)報(bào)錯(cuò)。

console.log(b) // undefined
console.log(a) // 報(bào)錯(cuò)ReferenceError
let a = 2;
var b = 1;

暫時(shí)性死區(qū)

只要塊級(jí)作用域內(nèi)存在Let命令，那么這個(gè)let聲明的變量就綁定了這個(gè)區(qū)域，不會(huì)受到外部的影響。

var num = 1;
if(true) {
    num = 2; // 報(bào)錯(cuò)，ReferenceError
    let num;
}

如上面代碼所示，if代碼塊內(nèi)想要修改的是if外部的num，但是if內(nèi)部通過(guò)let聲明了一個(gè)num但為賦值，所以導(dǎo)致了通過(guò)let聲明的num綁定了這個(gè)塊級(jí)作用域（即if內(nèi)部這個(gè)塊級(jí)作用域），所以不會(huì)受到外部的num影響，所以對(duì)num賦值會(huì)報(bào)錯(cuò)。

ES6明確規(guī)定了，如果在區(qū)塊內(nèi)存在let和const命令，那么這個(gè)區(qū)塊對(duì)這些命令聲明的變量從一開(kāi)始就形成封閉的作用域，只要在聲明之前就使用這些變量，就會(huì)報(bào)做。也稱(chēng)暫時(shí)性死區(qū)（temporal dead zone,簡(jiǎn)稱(chēng)TDZ）

當(dāng)然，這也造成了typeof變得不安全了，因?yàn)槿绻粋€(gè)變量沒(méi)有聲明就使用typeof不會(huì)報(bào)錯(cuò)，會(huì)返回一個(gè)undefined，但是現(xiàn)在不成立了，因?yàn)闀?huì)報(bào)錯(cuò)ReferenceError。

function bar(x = y, y = 2) {
    return[x,y] 
}
bar() // 報(bào)錯(cuò)

如上代碼所示，調(diào)用bar函數(shù)會(huì)報(bào)錯(cuò)，因?yàn)閰?shù)x的默認(rèn)值等于另一個(gè)參數(shù)y，但是x在聲明的時(shí)候y還沒(méi)有聲明，屬于死區(qū)。

總之，只要進(jìn)入當(dāng)前作用域，所要使用的變量就已經(jīng)存在，但是不可獲取，只有等到聲明變量的那一行代碼出現(xiàn)，才可以獲取和使用該變量。

其實(shí)let和const是存在變量提升的，但是由于暫時(shí)性死區(qū)的關(guān)系，變量已經(jīng)存在了，但是不可獲取，要等到聲明變量的時(shí)候才可以獲取和使用。

不允許重復(fù)聲明

let不允許在校內(nèi)共同作用域內(nèi)重復(fù)聲明同一個(gè)變量，這個(gè)就不用說(shuō)了大家都知道。

let a = 1;
let a = 2; // 報(bào)錯(cuò)

const

我們都知道const聲明一個(gè)只讀的常量。修改這個(gè)值就會(huì)報(bào)錯(cuò)。但是實(shí)際上保證的不是變量的值不能改動(dòng)，而是變量指向的那個(gè)內(nèi)存地址不能改動(dòng)。

對(duì)于簡(jiǎn)單數(shù)據(jù)類(lèi)型來(lái)說(shuō)，值就是保存在變量指向的內(nèi)存地址中，因此等同于常量。

而對(duì)于復(fù)合類(lèi)型的數(shù)據(jù)，變量指向的內(nèi)存地址保存的是一個(gè)指針，const只保證指針是固定，不保證內(nèi)部的結(jié)構(gòu)是不是可變的。

    // 給對(duì)象添加一個(gè)屬性
    const foo = {}
    foo.name = 123
    console.log(foo.name) // 123
    // 將foo指向另一個(gè)對(duì)象，就會(huì)報(bào)錯(cuò)
    foo = {} // 報(bào)錯(cuò)。

如果想要將對(duì)象凍結(jié)，可以使用Object.freeze

const foo = Object.freeze({});

特性

• 只在聲明所在的塊級(jí)作用域內(nèi)有效。
• const聲明的常量不會(huì)提升，同樣存在暫時(shí)性死區(qū)，只能在聲明后使用。
• 不可重復(fù)聲明。

補(bǔ)充——塊級(jí)作用域

函數(shù)能不能在塊級(jí)作用域中聲明呢？

ES5中是規(guī)定函數(shù)只能在頂級(jí)作用域和函數(shù)作用域之中聲明，不能在塊級(jí)作用域聲明。

ES6中引入了塊級(jí)作用域，明確允許在塊級(jí)作用域之中聲明函數(shù)。而且。函數(shù)聲明的語(yǔ)句的行為類(lèi)似于let，在塊級(jí)作用域之外不可引用。

function f() {
    console.log('I am outside!')
}
(function() {
    if(false) {
        function f() {
            console.log('I am inside')
        }
    }
}
f();
}())

上面的代碼，在es5中運(yùn)行時(shí)會(huì)得到I am inside!，因?yàn)閕f內(nèi)部的f函數(shù)會(huì)被提升到函數(shù)頭部。

但是在ES6環(huán)境則會(huì)報(bào)錯(cuò)，為什么呢？

因?yàn)橛斡[器的實(shí)現(xiàn)有自己的方式：

• 允許在塊級(jí)作用域內(nèi)聲明函數(shù)
• 函數(shù)聲明類(lèi)似于var,會(huì)提升到全局作用域或函數(shù)作用域的頭部
• 函數(shù)聲明還會(huì)提升到所在的塊級(jí)作用域的頭部

所以上述代碼實(shí)際在ES6的游覽器中會(huì)生成這樣的代碼：

  function f() {
    console.log("I am outside!");
  }
  (function () {
    var f = undefined;
    if (false) {
      function f() {
        console.log("I am inside");
      }
    }
  })();

因此，應(yīng)該避免在塊級(jí)作用域內(nèi)聲明函數(shù)，如果確定需要寫(xiě)成函數(shù)表達(dá)式的形式，而不是函數(shù)聲明語(yǔ)句。

到此這篇關(guān)于詳細(xì)解析let和const命令的文章就介紹到這了,更多相關(guān)let和const內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論