ES2015之前句狼，只有全局作用于和函作用域

作用域是ECMAScript編程中非常重要的一個(gè)概念，良好的作用域控制技巧稱(chēng)為了ECMAScript開(kāi)發(fā)者必備的技能热某。以往的ECMAScript標(biāo)準(zhǔn)中腻菇，只有全局作用域和函數(shù)作用域。ES2015引入了塊級(jí)作用域昔馋。

示例1：

var foo = function() {
    var local = {};
};
foo();
console.log(local); //=> undefined
//local處于函數(shù)作用域內(nèi)筹吐，外部無(wú)法訪問(wèn)

var bar = function() {
    local = {};
};
bar();
console.log(local); //=>{}
// local未標(biāo)明var，默認(rèn)提升為全局作用域的變量秘遏，函數(shù)外的全局作用域內(nèi)可訪問(wèn)

示例2：

假設(shè)在頁(yè)面中丘薛，有一組按鈕（A、B邦危、C）洋侨，需求是，用戶(hù)點(diǎn)擊按鈕組中的按鈕時(shí)倦蚪，輸出點(diǎn)擊按鈕的標(biāo)簽值希坚。當(dāng)我們用一個(gè)統(tǒng)一的函數(shù)對(duì)事件進(jìn)行響應(yīng)時(shí)，我們可能會(huì)像下面這樣去循環(huán)綁定這組按鈕的事件處理

var buttons = document.querySelectorAll(".button"); // 獲取按鈕組
var output = document.querySelector("#output"); // 獲取輸出容器元素

for(var i = 0;  i< buttons.length; ++i) { // 循環(huán)為每個(gè)按鈕綁定點(diǎn)擊事件
    buttons[i].addEventListener('click', function(evt){
        output.innerText = buttons[i].innerText; // 期望顯示按鈕自身的值
    }, false);
}

上面這段代碼看上去貌似沒(méi)問(wèn)題陵且，當(dāng)我們點(diǎn)擊任意一個(gè)按鈕時(shí)裁僧，程序都會(huì)報(bào)錯(cuò)，提示Cannot read property 'innerText' of undefined慕购。因?yàn)檠h(huán)完成后i的值是3聊疲，buttons[3]并不存在。計(jì)數(shù)器i存在于上一層作用域中沪悲，就意味著在對(duì)它的引用被全部解除之前售睹，它胡一直保存著循環(huán)結(jié)束后的值，即按鈕的個(gè)數(shù)可训。

let定義變量的塊級(jí)作用域

for(let i = 0; i < buttons.length; ++i) {
    // TODO
}

const定義常量

ES2015之前昌妹，對(duì)于常量的定義，一般都使用大寫(xiě)字母等方式來(lái)約定握截。這種妥協(xié)的“常量”是隨時(shí)可以被改變的飞崖。ES2015引入了const來(lái)定義常量

// 定義一個(gè)常量
const PI = 3.1415926;
// 嘗試修改
PI = 3.14; //=> Uncaught TypeError: Assignment to constant variable.

const確實(shí)創(chuàng)造了一個(gè)了一個(gè)不可變的內(nèi)存綁定，字符串谨胞、數(shù)字固歪、布爾值、undefined等基本值類(lèi)型因?yàn)橹皇褂昧艘欢蝺?nèi)存空間胯努，所以它們由const定義牢裳，便是天生的值不可變。但對(duì)于對(duì)象和數(shù)組這類(lèi)由若干內(nèi)存空間片段組成的值并不會(huì)被鎖定叶沛。

Object.freeze()讓對(duì)象首層屬性不可變

const obj1 = Object.freeze({
    a: 1,
    b: 2
});
obj1.a = 2; //=> Uncaught TypeError: Connot assign to read only property 'a' of object '<Object>'

const obj2 = Object.freeze({
    a: {}
});
obj2.a.b = 1;
console.log(obj2); //=> {a: {b: 1}} 首層中存在對(duì)象蒲讯，對(duì)象值依然可以被改變

// 需要一個(gè)小工具來(lái)創(chuàng)建一個(gè)完全的值不可變對(duì)象
// Object.deepFreeze from MDN
// To make obj fully immutable, freeze each object in obj.
// To do so, we use this function.
Object.deepFreeze = function(obj) {
    // Retrieve the property names defined on obj
    var propNames = Object.getOwnPropertyNames(obj);
    // Freeze properties before freezeing self
    propNames.forEach(function(name) {
        var prop = obj[name];
        // Freeze prop if it is an object
        if(typeof prop == 'object' && prop != null)
            Object.deepFreeze(prop)
    });
    
    // Freeze self (no-op if already frozen)
    return Object.freeze(obj);
}

const obj3 = Object.deepFreeze({
    a: {
        b: 1
    }
});
obj3.a.c = 2; //=> Uncaught TypeError: Can't add property c, object is not extensible

與我們所熟知的全局常量不同，使用const定義的常量與let一樣灰署，可以產(chǎn)生塊級(jí)作用域效果判帮。

變量的生命周期

在ECMAScript中，一個(gè)變量的生命周期是固定的溉箕，由兩種因素決定晦墙，分別是作用域和對(duì)其的引用。
先用ES2015之前的代碼來(lái)看一下：

(function() {
    var foo = 'A';
})();
console.log(foo); //=> undefined

可以看到在一個(gè)匿名函數(shù)作用域內(nèi)定義的變量foo肴茄，在脫離這個(gè)作用域后變量便不再存在晌畅。大部分ECMAScript引擎對(duì)垃圾收集的方式都是基于對(duì)變量的引用，當(dāng)一個(gè)變量的引用被全部解除時(shí)寡痰，變量便會(huì)被清楚抗楔。我們常用閉包（Closure）的方式延長(zhǎng)變量的生命周期：

閉包的原理是利用高階函數(shù)產(chǎn)生能夠穿透作用域的引用

function outter() {
    const innerVariable = 'foobar';
    return function() {
        return innerVariable;
    }
}

const fn = outter();
conlose.log(fn()); //=> foobar

這里成功地利用閉包將被定義在outter函數(shù)所形成作用域內(nèi)的常量innerVariable所在的作用域引出來(lái)，從而在外部的作用域中能夠讀取到它的值氓癌。

let谓谦、const與新的循環(huán)語(yǔ)句

在ES5中，數(shù)組 （Array）被賦予了一個(gè)名為forEach的方法贪婉，傳入回調(diào)函數(shù)來(lái)解決當(dāng)時(shí)的for循環(huán)的作用域問(wèn)題反粥。
在ES2015（也叫ES6），引入了新的循環(huán)語(yǔ)句for-of疲迂，另外我有了let和const解決了塊級(jí)作用域才顿，于是乎，無(wú)需操心作用域的簡(jiǎn)潔的for循環(huán)又回來(lái)了尤蒿。

const arr = [1, 2, 3];
for(const item of arr) {
    console.log(item);
}

// 配合ES2015的解構(gòu)（Destructuring）特性郑气，在處理JSON數(shù)據(jù)時(shí)，更加得心應(yīng)手
const Zootopia = [
    {name: 'Nick', gender: 1, species: 'Fox'},
    {name: 'Judy', gender: 1, species: 'Bunny'}
];
for(const {name, species} of Zootopia) {
    console.log(`Hi, I am ${name}, and I am a ${species}.`);
}
//=>
// Hi, I am Nick, and I am a Fox.
// Hi, I am Judy, and I am a Bunny.

在ES2015中腰池，數(shù)組再次被賦予了一個(gè)名為entries的方法尾组，它可以返回對(duì)應(yīng)的數(shù)組中每一個(gè)元素與其下標(biāo)配對(duì)的一個(gè)新數(shù)組：

const arr = ['a', 'b', 'c'];
console.log(arr.entries()); //=> [[0, 'a'], [1, 'b'], [2, 'c']]

這個(gè)新特性可以與解構(gòu)和for-of循環(huán)配合使用：

for(const [index, {name, species}] of Zootopia.entries()) {
    console.log(`${index}. Hi, I am ${name}, and I am a ${species}.`);
}
//=>
// 0. Hi, I am Nick, and I am a Fox.
// 1. Hi, I am Judy, and I am a Bunny.