const & let

or0fun 發(fā)布于2019-08-23 14:33 / 3254人閱讀

摘要：前世在還未出現(xiàn)前，的世界一直是的統(tǒng)治在中用于變量聲明的關(guān)鍵字。的出現(xiàn)給帶來(lái)了塊級(jí)作用域，解決了變量提升，禁止了重復(fù)聲明變量，讓少了很多疑惑的地方。時(shí)代已經(jīng)過(guò)去了，各種特性用起來(lái)。

前世

在 const & let 還未出現(xiàn)前，JS 的世界一直是 var的統(tǒng)治

var：在JS中用于變量聲明的關(guān)鍵字。

特點(diǎn)：

變量提升

只有函數(shù)作用域或者全局作用域，沒(méi)有塊級(jí)作用域

重復(fù)聲明變量

循環(huán)體重的閉包會(huì)出現(xiàn)問(wèn)題

…….

變量提升

function test(tag) {
    console.log(a,b);   // a,b在下面聲明，但是會(huì)打印出undefined，不會(huì)報(bào)錯(cuò)
    
    if(10 >= tag) {
        var a = tag + 1;
    } else {
        var b = tag - 1;
    }
}

在瀏覽器預(yù)解析機(jī)制中，加載函數(shù)的時(shí)候，此時(shí)的作用域?yàn)楹瘮?shù)作用域，函數(shù)作用域中JS會(huì)先將所有的聲明置頂。

function test(tag) {
    var a,b;            // 將聲明置頂，但是賦值并不會(huì)
    console.log(a,b);   // a,b在下面聲明，但是會(huì)打印出undefined，不會(huì)報(bào)錯(cuò)
    
    if(10 >= tag) {
        var a = tag + 1;
    } else {
        var b = tag - 1;
    }
}

只有函數(shù)作用域以及全局作用域，沒(méi)有塊級(jí)作用域

function test(tag) {
    console.log(a,b);   // a,b在下面聲明，但是會(huì)打印出undefined，不會(huì)報(bào)錯(cuò)
    
    if(10 >= tag) {
        var a = tag + 1;
    } else {
        var b = tag - 1;
    }
    
    console.log(a);        // 9
}

test(8)  // 9

按照其他語(yǔ)言規(guī)則 if 是一個(gè)程序塊，在 if 中聲明的變量作用域只能在 if 中，但是 JS 因?yàn)橹挥泻瘮?shù)作用域和全局作用域，所以才會(huì)導(dǎo)致在 if 判斷外還可以訪(fǎng)問(wèn) if 的變量

重復(fù)聲明變量

var a = 1;
var a = 2;

console.log(a); // 2

在使用var的時(shí)候允許重復(fù)聲明變量也是令人頭痛的事情，也許因?yàn)檫@個(gè)機(jī)制，可能就會(huì)出現(xiàn)bug

循環(huán)體重的閉包會(huì)出現(xiàn)問(wèn)題

var arr = [];
for(var i = 0; i < 3; i++) {
    arr.push(function () {
        return i;
    })
}

for(var j = 0; j < 3; j++) {
    console.log(arr[j]());    // 3,3,3
}

將var -> let
將會(huì)打印出 0,1,2

因?yàn)槿狈K作用域所以導(dǎo)致問(wèn)題出現(xiàn)

今生

如今距離ES6規(guī)范的出現(xiàn)已經(jīng)過(guò)去了4年多了，在項(xiàng)目中也早已開(kāi)始大量使用ES6規(guī)范編寫(xiě)代碼了。var也不再是JS世界的唯一了，

JS 世界出現(xiàn)了const & let。

const & let 的出現(xiàn)給JS帶來(lái)了塊級(jí)作用域，解決了變量提升，禁止了重復(fù)聲明變量，讓JS少了很多疑惑的地方。

let & const

相同點(diǎn)：

具有塊級(jí)作用域

禁止重復(fù)聲明變量

不會(huì)產(chǎn)生變量提升

區(qū)別：

let

使用let聲明的基本類(lèi)型變量是可以改變值

let a = 12;
a = 13;
return a;    // 13

使用let聲明引用類(lèi)型的變量是可以改變引用的

let info = {
    name: "ming995",
    age: 25,
    sayHi: function() {
        console.log(`Hi I"m ${this.name}`)
    }
};

let heInfo = {};

heInfo = info;

heInfo.name = "Jack";

console.log(heInfo);

const

使用const聲明的基本類(lèi)型變量是不可以改變值

const a = 13;
a = 14;
return a; // 報(bào)錯(cuò)

使用const聲明引用類(lèi)型的變量是不可以改變引用的

const info = {
    name: "ming995",
    age: 25,
    sayHi: function() {
        console.log(`Hi I"m ${this.name}`)
    }
};

const heInfo = {};

heInfo = info;        // 報(bào)錯(cuò)
    
heInfo.name = "Jack";

console.log(heInfo);

但是我們可以操作const聲明的引用類(lèi)型的屬性值

const info = {
    name: "ming995",
    age: 25,
    sayHi: function() {
        console.log(`Hi I"m ${this.name}`)
    }
};

info.language = "js";

console.log(info);

總結(jié)

之前對(duì)于const的理解有偏差，所以就寫(xiě)這篇文章。var時(shí)代已經(jīng)過(guò)去了，ES6各種特性用起來(lái)。