const & let

前世

在 const & let 還未出現前，JS 的世界一直是 var的統治

var：在JS中用於變量聲明的關鍵字。

特色：

1. 變量提高
2. 只有函數做用域或者全局做用域，沒有塊級做用域
3. 重複聲明變量
4. 循環體重的閉包會出現問題

   …….

變量提高

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

在瀏覽器預解析機制中，加載函數的時候，此時的做用域爲函數做用域，函數做用域中JS會先將全部的聲明置頂。

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

只有函數做用域以及全局做用域，沒有塊級做用域

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

test(8)  // 9

按照其餘語言規則 if 是一個程序塊，在 if 中聲明的變量做用域只能在 if 中，可是 JS 由於只有函數做用域和全局做用域，因此纔會致使在 if 判斷外還能夠訪問 if 的變量

重複聲明變量

var a = 1;
var a = 2;

console.log(a); // 2

在使用var的時候容許重複聲明變量也是使人頭痛的事情，也許由於這個機制，可能就會出現bug

循環體重的閉包會出現問題

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
將會打印出 0,1,2

由於缺少塊做用域因此致使問題出現

此生

現在距離ES6規範的出現已通過去了4年多了，在項目中也早已開始大量使用ES6規範編寫代碼了。var也再也不是JS世界的惟一了，

JS 世界出現了const & let。

const & let 的出現給JS帶來了塊級做用域，解決了變量提高，禁止了重複聲明變量，讓JS少了不少疑惑的地方。

let & const

相同點：

1. 具備塊級做用域
2. 禁止重複聲明變量
3. 不會產生變量提高

區別：

let

使用let聲明的基本類型變量是能夠改變值

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

使用let聲明引用類型的變量是能夠改變引用的

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聲明的基本類型變量是不能夠改變值

const a = 13;
a = 14;
return a; // 報錯

使用const聲明引用類型的變量是不能夠改變引用的

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

const heInfo = {};

heInfo = info;        // 報錯
    
heInfo.name = "Jack";

console.log(heInfo);

可是咱們能夠操做const聲明的引用類型的屬性值

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

info.language = "js";

console.log(info);

總結

以前對於const的理解有誤差，因此就寫這篇文章。var時代已通過去了，ES6各類特性用起來。