ES6入門教程之let、const的使用方法

一、前提

解決ES5中只有全局作用域和函數(shù)作用域，沒(méi)有塊級(jí)作用域而帶來(lái)的不合理的場(chǎng)景。

let

基本用法

用法和var 一樣，只是let聲明的變量只有在let命令所在的代碼塊有效

{
 let a = 10;
 var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

可以看出var 聲明的變量在代碼塊之外也是可以調(diào)用，而let聲明的則調(diào)用報(bào)錯(cuò)。所以let 聲明只在它聲明的當(dāng)前代碼塊中才能調(diào)用。

變量提升

在使用 var 的時(shí)候會(huì)出現(xiàn) “變量提升”的現(xiàn)象，即變量可以在聲明之前使用，值為undefined。let 改變了這種現(xiàn)狀，但是必須先聲明在使用，如果在聲明之前使用則會(huì)出現(xiàn)報(bào)錯(cuò)。如下：

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // 報(bào)錯(cuò)ReferenceError
let bar = 2;

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

只要塊級(jí)作用域內(nèi)部存在 let 或者 const 命令，它所聲明的變量就“綁定”在這個(gè)區(qū)域，不會(huì)受外部影響。且暫時(shí)性死區(qū)的本質(zhì)就是，只要一進(jìn)入當(dāng)前作用域，所要使用的變量就已經(jīng)存在了，但是不可獲取，只有等到聲明變量的那一行代碼出現(xiàn)，才可以獲取和使用該變量。如下：

var tmp = 123;

if (true) {
 tmp = 'abc'; // ReferenceError
 let tmp;
}

ES6 明確規(guī)定，如果區(qū)塊中存在 let 和 const 命令，這個(gè)區(qū)塊對(duì)這些命令聲明的變量，從一開(kāi)始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會(huì)報(bào)錯(cuò)。

總之，在代碼塊內(nèi)，使用let命令聲明變量之前，該變量都是不可用的。這在語(yǔ)法上，稱為“暫時(shí)性死區(qū)”（temporal dead zone，簡(jiǎn)稱 TDZ）。如下：

if (true) {
 // TDZ開(kāi)始
 tmp = 'abc'; // ReferenceError
 console.log(tmp); // ReferenceError

 let tmp; // TDZ結(jié)束
 console.log(tmp); // undefined

 tmp = 123;
 console.log(tmp); // 123
}

注意：

++使用let聲明變量時(shí)，只要變量在還沒(méi)有聲明完成前使用，就會(huì)報(bào)錯(cuò)。上面這行就屬于這個(gè)情況，在變量x的聲明語(yǔ)句還沒(méi)有執(zhí)行完成前，就去取x的值，導(dǎo)致報(bào)錯(cuò)”x 未定義“。++

不允許重復(fù)聲明

let 不允許在同一個(gè)作用域內(nèi)聲明同一個(gè)變量，如下：

// 報(bào)錯(cuò)
function func() {
 let a = 10;
 var a = 1;
}

// 報(bào)錯(cuò)
function func() {
 let a = 10;
 let a = 1;
}

或者如下：

function func(arg) {
 let arg;
}
func() // 報(bào)錯(cuò)

function func(arg) {
 {
 let arg;
 }
}
func() // 不報(bào)錯(cuò)

塊級(jí)作用域

上面也提到過(guò)在es5中沒(méi)有塊級(jí)作用域的概念，只有函數(shù)作用域和全局作用域，那么就帶來(lái)了一些問(wèn)題，如下：

var tmp = new Date();

function f() {
 console.log(tmp);
 if (false) {
 var tmp = 'hello world';
 }
}

f(); // undefined


外層聲明被內(nèi)層聲明所覆蓋，內(nèi)層使用的是外層的聲明，內(nèi)層變量提升導(dǎo)致 undefinded

第二種：計(jì)數(shù)循環(huán)全局泄露，如下：

var s = 'hello';

for (var i = 0; i < s.length; i++) {
 console.log(s[i]);
}

console.log(i); // 5

常見(jiàn)的面試題，最后輸出不是預(yù)料中的 1 2 3 4 5 而全部是 5

ES6的塊級(jí)作用域，實(shí)際上就是let 新增的，如下：

function f1() {
 let n = 5;
 if (true) {
 let n = 10;
 }
 console.log(n); // 5
}

內(nèi)外層的 n 互不干擾

ES6中 允許作用域任意嵌套，并且互不干擾，如下：

內(nèi)外層可以同名

{{{{
 let insane = 'Hello World';
 {let insane = 'Hello World'}
}}}};

或者

{{{{
 {let insane = 'Hello World'}
 console.log(insane); // 報(bào)錯(cuò)
}}}};

塊級(jí)作用域的出現(xiàn)可以讓以下立即執(zhí)行函數(shù)的寫法不必要，如下：

// IIFE 寫法
(function () {
 var tmp = ...;
 ...
}());

// 塊級(jí)作用域?qū)懛?{
 let tmp = ...;
 ...
}

塊級(jí)作用域和函數(shù)聲明

在ES5中，函數(shù)只能在頂層作用域和函數(shù)作用域中聲明，不能在塊級(jí)作用域中聲明，但是瀏覽器為了兼容性，還是可以在塊級(jí)作用域中聲明，理論上在ES6中 塊級(jí)作用域中聲明的函數(shù)，在外部調(diào)用會(huì)報(bào)錯(cuò)，考慮環(huán)境的問(wèn)題，應(yīng)當(dāng)避免在塊級(jí)作用域中聲明函數(shù)，如果需要也應(yīng)當(dāng)寫成函數(shù)表達(dá)式的方式，而不是函數(shù)聲明語(yǔ)句，如下：

// 函數(shù)聲明語(yǔ)句
{
 let a = 'secret';
 function f() {
 return a;
 }
}

// 函數(shù)表達(dá)式
{
 let a = 'secret';
 let f = function () {
 return a;
 };
}

const

const聲明的是一個(gè)常量 如下：

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

聲明之后如果在賦值，將會(huì)報(bào)錯(cuò)，同時(shí)因?yàn)槁暶鞯氖浅Ａ?，即const聲明后即要賦值不然也會(huì)報(bào)錯(cuò)
const 和 let 相同，聲明也只在當(dāng)前的塊級(jí)作用域生效。同樣也不會(huì)聲明提升，也存在暫時(shí)死區(qū)，只能在聲明之后使用，且和 let 一樣不得重復(fù)聲明，不能重新賦值。

重要：

const 所不能改變的并不是值，而是變量指向的那個(gè)內(nèi)存地址所保存的值不能變動(dòng)，對(duì)于簡(jiǎn)單類型（數(shù)值、字符串、布爾值），值就保存在變量所指向的內(nèi)存地址中，因此等同于常量。而對(duì)于復(fù)合類型（數(shù)組、對(duì)象），變量指向的內(nèi)存地址，保存的只是一個(gè)指向?qū)嶋H數(shù)據(jù)的指針，const 只能保證這個(gè)指針是固定的（即總指向一個(gè)固定的地址）。至于它指向的數(shù)據(jù)結(jié)構(gòu)則是不能控制的 ，如下：

const foo = {};

// 為 foo 添加一個(gè)屬性，可以成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另一個(gè)對(duì)象，就會(huì)報(bào)錯(cuò)
foo = {}; // TypeError: "foo" is read-only

常量foo儲(chǔ)存的是一個(gè)地址，這個(gè)地址指向一個(gè)對(duì)象。不可變的只是這個(gè)地址，
即不能把foo指向另一個(gè)地址，但對(duì)象本身是可變的，所以依然可以為其添加新屬性。

或者

const a = [];
a.push('Hello'); // 可執(zhí)行
a.length = 0; // 可執(zhí)行
a = ['Dave']; // 報(bào)錯(cuò)

常量a是一個(gè)數(shù)組，這個(gè)數(shù)組本身是可寫的，但是如果將另一個(gè)數(shù)組賦值給a，就會(huì)報(bào)錯(cuò)

如果真的想將聲明對(duì)象凍結(jié)，不能在改變 則應(yīng)該使用object.freeze()

const foo = Object.freeze({});

// 常規(guī)模式時(shí)，下面一行不起作用；
// 嚴(yán)格模式時(shí)，該行會(huì)報(bào)錯(cuò)
foo.prop = 123;

對(duì)象也可以凍結(jié)

var constantize = (obj) => {
 Object.freeze(obj);
 Object.keys(obj).forEach( (key, i) => {
 if ( typeof obj[key] === 'object' ) {
 constantize( obj[key] );
 }
 });
};

ES6 聲明變量的六種方法

1. function
2. var
3. let
4. const
5. import
6. class

頂層對(duì)象的屬性

在瀏覽器環(huán)境指的是window對(duì)象，在 Node 指的是global對(duì)象,ES5 之中，頂層對(duì)象的屬性與全局變量是等價(jià)的。

window.a = 1;
a // 1

a = 2;
window.a // 2

global 對(duì)象

ES5 的頂層對(duì)象，本身也是一個(gè)問(wèn)題，因?yàn)樗诟鞣N實(shí)現(xiàn)里面是不統(tǒng)一的。

1. 瀏覽器里面，頂層對(duì)象是window，但 Node 和 Web Worker 沒(méi)有window。
2. 瀏覽器和 Web Worker 里面，self也指向頂層對(duì)象，但是 Node 沒(méi)有self。
3. Node 里面，頂層對(duì)象是global，但其他環(huán)境都不支持。

同一段代碼為了能夠在各種環(huán)境，都能取到頂層對(duì)象，現(xiàn)在一般是使用this變量，但是有局限性。

1. 全局環(huán)境中，this會(huì)返回頂層對(duì)象。但是，Node 模塊和 ES6 模塊中，this返回的是當(dāng)前模塊。
2. 函數(shù)里面的this，如果函數(shù)不是作為對(duì)象的方法運(yùn)行，而是單純作為函數(shù)運(yùn)行，this會(huì)指向頂層對(duì)象。但是，嚴(yán)格模式下，這時(shí)this會(huì)返回undefined。
3. 不管是嚴(yán)格模式，還是普通模式，new Function('return this')() ，總是會(huì)返回全局對(duì)象。但是，如果瀏覽器用了 CSP（Content Security Policy，內(nèi)容安全策略），那么eval、new Function這些方法都可能無(wú)法使用。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)億速云的支持。