ES6 之 let 和 const 命令
1、let 命令
1.1俱饿、基本用法
ES6 新增了let命令撮珠，用來(lái)聲明變量沮脖。它的用法類似于var，但是所聲明的變量芯急，只在let命令所在的代碼塊內(nèi)有效勺届。
{
let a = 10;
var b = 1;
a; // 10
}
a; // Uncaught ReferenceError: a is not defined
b; // 1
上面代碼在代碼塊之中，分別用let和var聲明了兩個(gè)變量志于。然后在代碼塊之外調(diào)用這兩個(gè)變量涮因，結(jié)果let聲明的變量報(bào)錯(cuò)废睦，var聲明的變量返回了正確的值伺绽。這表明，let聲明的變量只在它所在的代碼塊內(nèi)生效嗜湃。
用for循環(huán)的計(jì)數(shù)器奈应，就很適合使用``let`命令。
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i); // ReferenceError: i is not defined
上面 ?? 代碼中购披，計(jì)數(shù)器i只在for循環(huán)體內(nèi)有效杖挣，在循環(huán)體外引用就會(huì)報(bào)錯(cuò)。
下面 ?? 的代碼如果使用var刚陡，最后輸出的是10惩妇。
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function() {
console.log(i);
};
}
a[6](); // 10
上面 ?? 代碼中，變量i是var聲明的筐乳，在全局范圍內(nèi)都有效歌殃，所以全局只有一個(gè)變量i。每一次循環(huán)蝙云，變量i的值都會(huì)發(fā)生改變氓皱，而循環(huán)內(nèi)被賦給數(shù)組a的函數(shù)內(nèi)部的console.log(i)，里面的i指向的就是全局的i勃刨。也就是說(shuō)波材，所有數(shù)組a的里面成員的i，指向的都是同一個(gè)i身隐，導(dǎo)致運(yùn)行時(shí)輸出的是最后一輪的i的值廷区，也就是10。
如果使用let贾铝，聲明的變量?jī)H在塊級(jí)作用域內(nèi)有效躲因，最后輸出的是6早敬。
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function() {
console.log(i);
};
}
a[6](); // 6
上面 ?? 代碼中，變量i是let聲明的大脉，當(dāng)前的i只在本輪循環(huán)內(nèi)有效搞监，所以每一次循環(huán)的i其實(shí)都是一個(gè)新的變量所以左后輸出的是6。你可能會(huì)問(wèn)镰矿，如果每一輪循環(huán)的變量i都是重新聲明的琐驴，那它怎么知道上一輪循環(huán)的值，從而計(jì)算出本輪循環(huán)的值秤标？這是因?yàn)?code>Javascript引擎內(nèi)部會(huì)記住上一輪循環(huán)的值绝淡，初始化本輪的變量i時(shí)，就在上一輪循環(huán)的基礎(chǔ)上進(jìn)行計(jì)算苍姜。
另外牢酵，for循環(huán)還有一個(gè)特別之處，就是設(shè)置循環(huán)變量的那部分是一個(gè)父作用域衙猪，而循環(huán)體內(nèi)部是一個(gè)單獨(dú)的子作用域馍乙。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc
上面 ?? 代碼正確運(yùn)行，輸出了3次abc垫释。這表明函數(shù)內(nèi)部的變量i與循環(huán)變量i不在同一個(gè)作用域丝格，有各自單獨(dú)的作用域。
1.2棵譬、不存在變量提升
使用var命令會(huì)發(fā)生變量提升現(xiàn)象显蝌，即變量可以在聲明之前使用，值為undefined订咸。這種現(xiàn)象多多少少是有些奇葩的曼尊，按照一般的邏輯，變量應(yīng)該在語(yǔ)句聲明之后才可以使用脏嚷。
為了糾正這種現(xiàn)象骆撇，let命令改變的了語(yǔ)法行為，它所聲明的變量一定要在聲明后使用然眼，否則報(bào)錯(cuò)艾船。
// 使用 var 的情況
console.log(foo); // undefined
var foo = 'foo';
// 使用 let 的情況
console.log(bar); // ReferenceError: bar is not defined
let bar = 'bar';
上面 ?? 代碼中，變量foo用var聲明高每，會(huì)發(fā)生變量提升屿岂，即腳本開始運(yùn)行時(shí)，變量foo已經(jīng)存在了鲸匿，但是沒(méi)有值爷怀，所以會(huì)輸出undefined。變量bar用let聲明带欢，不會(huì)發(fā)生變量提升运授。這表明在聲明它之前變量bar是不存在的烤惊，這時(shí)如果用到它，就會(huì)拋出一個(gè)錯(cuò)誤吁朦。
1.3柒室、暫時(shí)性死區(qū)
只要塊級(jí)作用域內(nèi)存在let命令，它所聲明的變量就綁定（binding）這個(gè)區(qū)域逗宜，不再受外部的影響雄右。
var temp = 123;
if (true) {
temp = 'abc'; // ReferenceError: Cannot access 'tmp' before initialization
let temp;
}
上面代碼中，存在全局變量temp纺讲，但是塊級(jí)作用域內(nèi)let又聲明了一個(gè)變量temp擂仍，導(dǎo)致后者綁定這個(gè)塊級(jí)作用域，所以在let聲明變量前熬甚，對(duì)temp賦值會(huì)報(bào)錯(cuò)逢渔。
ES6明確規(guī)定，如果區(qū)塊中存在let和const命令乡括，這個(gè)區(qū)塊對(duì)這些命令聲明的變量肃廓，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量粟判，就會(huì)報(bào)錯(cuò)亿昏÷吞蓿總之档礁，在代碼塊內(nèi)，使用let命令聲明變量之前吝沫，改變量都是不可用的呻澜。這在語(yǔ)法上，成為"暫時(shí)性死區(qū)"（temporal dead zone惨险，簡(jiǎn)稱 TDZ）羹幸。
if (true) {
// TDZ 開始
temp = 'abc'; // ReferenceError
console.log(temp); // ReferenceError
let temp; // TDZ 結(jié)束
console.log(temp); // undefined
temp = 123;
console.log(temp); // 123
}
上面 ?? 代碼中，在let命令聲明變量temp之前辫愉，都屬于變量temp的"死區(qū)"栅受。
"暫時(shí)性死區(qū)"意味著typeof不再是一個(gè)百分之百安全的操作。
typeof x; // ReferenceError
let x;
聲明代碼中恭朗，變量x使用let命令聲明屏镊，所以在聲明之前，都屬于x的死區(qū)痰腮，只要用到改變量就會(huì)報(bào)錯(cuò)而芥。因此typeof就會(huì)拋出一個(gè)ReferenceError。
作為比較膀值，如果一個(gè)變量根本沒(méi)有被聲明棍丐，使用typeof反而不會(huì)報(bào)錯(cuò)误辑。
typeof undeclared_variable; // undefined
上面 ?? 代碼中，undeclared_variable是一個(gè)不存在的變量名歌逢，結(jié)果返回"undefined"巾钉。所以，在沒(méi)有let之前秘案，typeof運(yùn)算符是百分之百安全的睛琳，永遠(yuǎn)不會(huì)報(bào)錯(cuò)。現(xiàn)在這一點(diǎn)不成立了踏烙。這樣的設(shè)計(jì)是為了讓大家養(yǎng)成良好的編程習(xí)慣师骗，變量一定要在聲明之后使用，否則就報(bào)錯(cuò)讨惩。
有些"死區(qū)"比較隱蔽辟癌，不太容易發(fā)現(xiàn)。
function bar(x = y, y = 2) {
return [x, y];
}
bar(); // ReferenceError: Cannot access 'y' before initialization
另外荐捻，下面 ?? 的代碼也會(huì)報(bào)錯(cuò)黍少，與var的行為不同。
// 不報(bào)錯(cuò)
var x = x;
// 報(bào)錯(cuò) ReferenceError：x is not defined
let x = x;
上面 ?? 代碼報(bào)錯(cuò)处面，是因?yàn)榇嬖跁簳r(shí)性死區(qū)厂置。使用let聲明變量時(shí)，只要變量還沒(méi)有在聲明完成前使用魂角，就會(huì)報(bào)錯(cuò)昵济。上面這行就屬于這個(gè)情況，在變量x的聲明語(yǔ)句還沒(méi)有執(zhí)行完成之前野揪，就去取x的值访忿，導(dǎo)致報(bào)錯(cuò)"x 未定義"。
在ES6中斯稳，規(guī)定暫時(shí)性死區(qū)和let海铆、const語(yǔ)句不出現(xiàn)變量提升，主要是為了減少運(yùn)行時(shí)錯(cuò)誤挣惰，防止變量在聲明前就使用這個(gè)變量卧斟，從而導(dǎo)致意料之外的行為。這樣的錯(cuò)誤在ES5是很常見的憎茂，現(xiàn)在有了這種規(guī)定珍语，避免此類錯(cuò)誤就很容易了。
總之唇辨，暫時(shí)性死區(qū)的本質(zhì)就是廊酣，只要一進(jìn)入當(dāng)前作用域，所要使用的變量就已經(jīng)存在了赏枚，但是不可獲取亡驰，只有等到聲明變量的那一行代碼出現(xiàn)晓猛，才可以獲取和使用改變量。
1.4凡辱、不允許重復(fù)聲明
命令let不允許在相同作用域內(nèi)戒职，重復(fù)聲明同一個(gè)變量。
// 報(bào)錯(cuò)
function func() {
let a = 10;
var a = 1; // SyntaxError: Identifier 'a' has already been declared
}
// 報(bào)錯(cuò)
function func() {
let a = 10;
let a = 1; // SyntaxError: Identifier 'a' has already been declared
}
因此透乾，不能再函數(shù)內(nèi)部重新聲明參數(shù)洪燥。
// 報(bào)錯(cuò)
function func(arg) {
let arg;
}
func(); // SyntaxError：Identifier 'arg' has already been declared
// 不報(bào)錯(cuò)
function func(arg) {
{
let arg;
}
}
func();
2、塊級(jí)作用域
2.1乳乌、為什么需要塊級(jí)作用域
在ES5中捧韵，只有全局作用域和函數(shù)作用域，沒(méi)有塊級(jí)作用域汉操，這會(huì)帶來(lái)很多不合理的場(chǎng)景再来。
第一種場(chǎng)景，內(nèi)層變量可能會(huì)覆蓋外部變量磷瘤。
var temp = new Date();
function f() {
console.log(temp);
if (false) {
var temp = 'hello world';
}
}
f(); // undefined
上面 ?? 代碼的原意是芒篷，if代碼塊的外部使用的是外層temp變量，內(nèi)部使用的是內(nèi)層的temp變量采缚。但是针炉，函數(shù)f()執(zhí)行后，輸出結(jié)果為undefined扳抽，原因在于變量提升篡帕，導(dǎo)致內(nèi)層的temp變量覆蓋了外層的temp變量。
第二種場(chǎng)景摔蓝，用來(lái)計(jì)數(shù)的循環(huán)變量泄露為全局變量赂苗。
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]); // h e l l o
}
console.log(i); // 5
上面 ?? 代碼中愉耙，變量i只用來(lái)控制循環(huán)贮尉，但是循環(huán)結(jié)束后，它并沒(méi)有消失猜谚，泄漏成了全局變量。
2.2赌渣、ES6 的塊級(jí)作用域
命令let實(shí)際上為 JavaScript 新增了塊級(jí)作用域魏铅。
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
上面 ?? 的的函數(shù)有兩個(gè)代碼塊，都聲明了變量n坚芜，運(yùn)行后輸出5览芳。這表示外層代碼塊不受內(nèi)層代碼塊的影響。如果兩次都使用var定義變量n鸿竖，最后輸出的值才是10沧竟。
在ES6中铸敏，允許塊級(jí)作用域的任意嵌套。
{
{
{
{
{
let insane = 'Hello World';
}
console.log(insane); // ReferenceError: insane is not defined
}
}
}
}
上面 ?? 的代碼使用了一個(gè)五層的塊級(jí)作用域悟泵，每一層都是一個(gè)單獨(dú)的作用域杈笔。第四層作用域無(wú)法讀取第五層作用域的內(nèi)部變量。
內(nèi)層作用域可以定義外層作用域的同名變量糕非。
{
{
{
{
let insane = 'Hello World';
{
let insane = 'Hello World';
}
}
}
}
}
塊級(jí)作用域的出現(xiàn)蒙具，實(shí)際上使得廣泛使用的匿名立即執(zhí)行函數(shù)表達(dá)式（匿名 IIFE）不再必要了。
// IIFE 寫法
(function() {
var name = 'Barry';
})();
name; // ReferenceError: name2 is not defined
// 塊級(jí)作用域?qū)懛?{
let name = 'Barry';
}
name; // ReferenceError: name2 is not defined
2.3朽肥、塊級(jí)作用域與函數(shù)聲明
函數(shù)能不能在函數(shù)作用域之中聲明禁筏？這是一個(gè)相當(dāng)令人混淆的問(wèn)題。
在ES5中規(guī)定衡招，函數(shù)只能在頂層作用域好函數(shù)作用域中聲明融师，不能在塊級(jí)作用域中聲明。
// 情況一
if (true) {
function f() {}
}
// 情況二
try() {
function f() {
//
}
} catch(e) {
console.log(e);
}
上面 ?? 兩種情況聲明蚁吝，根據(jù)ES5的規(guī)定都是非法的旱爆。
但是，瀏覽器沒(méi)有遵守這個(gè)規(guī)定窘茁，為了兼容以前的舊代碼怀伦，還是支持在塊級(jí)作用域中聲明函數(shù)，因此上面兩種情況實(shí)際都能運(yùn)行山林，不會(huì)報(bào)錯(cuò)房待。
在ES6中引入塊級(jí)作用域，明確允許在塊級(jí)作用域中聲明函數(shù)驼抹。ES6規(guī)定桑孩，塊級(jí)作用域之中，函數(shù)聲明語(yǔ)句的行為類似于let框冀，在塊級(jí)作用域之外不可引用流椒。
function f() {
console.log('I am outside');
}
(function() {
if (false) {
// 重復(fù)聲明一次函數(shù) f()
function f() {
console.log('I am inside');
}
}
f();
})();
上面 ?? 代碼在ES5中運(yùn)行，會(huì)得到"I am inside"明也，因?yàn)樵?code>if內(nèi)聲明函數(shù)f會(huì)被提升到函數(shù)頭部宣虾，實(shí)際運(yùn)行的代碼如下：
// ES5 環(huán)境
function f() {
console.log('I am outside');
}
(function() {
function f() {
console.log('I am inside');
}
if (false) {
// 重復(fù)聲明一次函數(shù) f()
}
f();
})();
但在ES6中就完全不一樣了，理論上會(huì)得到"I am outside"温数。因?yàn)閴K級(jí)作用域內(nèi)聲明的函數(shù)類似于let绣硝，對(duì)作用域之外沒(méi)有影響。但是撑刺，如果你真的在ES6瀏覽器中運(yùn)行一下上面 ?? 的代碼鹉胖，是會(huì)報(bào)錯(cuò)的這是為什么呢？
// 瀏覽器的 ES6 環(huán)境
function f() {
console.log('I am outside');
}
(function f() {
if (false) {
// 重復(fù)聲明一次函數(shù) f()
function f() {
console.log('I am inside');
}
}
f();
})();
// Uncaught TypeError: f is not a function
上面 ?? 的代碼在瀏覽器中，都會(huì)報(bào)錯(cuò)甫菠。
原來(lái)败许，如果改變了塊級(jí)作用域內(nèi)聲明的函數(shù)的處理規(guī)則，顯然會(huì)對(duì)老代碼產(chǎn)生很大的影響淑蔚。為了減輕因此產(chǎn)生的不兼容問(wèn)題市殷，ES6在附錄 B里面規(guī)定，瀏覽器的實(shí)現(xiàn)可以不遵守上面的規(guī)定刹衫，有自己的行為方式醋寝。
- 允許在塊級(jí)作用域內(nèi)聲明函數(shù)。
- 函數(shù)聲明類似于
var带迟，即會(huì)提升到全局作用域或函數(shù)作用域的頭部音羞。 - 同時(shí)，函數(shù)聲明還會(huì)提升到所在的塊級(jí)作用域的頭部仓犬。
注意 ??：上面三條規(guī)則只對(duì)ES6的瀏覽器實(shí)現(xiàn)有效嗅绰，其他環(huán)境的實(shí)現(xiàn)不遵守，還是將塊級(jí)作用域的函數(shù)聲明當(dāng)作let處理搀继。
根據(jù)這三條規(guī)則窘面，瀏覽器的ES6環(huán)境中，塊級(jí)作用域內(nèi)聲明的函數(shù)叽躯，行為類似于var聲明的變量财边。上面的例子實(shí)際允許的代碼如下：
// 瀏覽器的 ES6 環(huán)境
function f() {
console.log('I am outside');
}
(function f() {
var f = undefined;
if (false) {
function f() {
console.log('I am inside');
}
}
f();
})();
// Uncaught TypeError: f is not a function
考慮到環(huán)境導(dǎo)致的行為差異太大，應(yīng)該避免在塊級(jí)作用域內(nèi)聲明函數(shù)点骑。如果確實(shí)需要酣难，也應(yīng)該寫成函數(shù)表達(dá)式，而不是函數(shù)聲明語(yǔ)句黑滴。
// 塊級(jí)作用域內(nèi)部的函數(shù)聲明語(yǔ)句憨募，建議不要使用。
let a = 'secret';
function f() {
return a;
}
// 塊級(jí)作用域內(nèi)部袁辈，優(yōu)先使用函數(shù)表達(dá)式菜谣。
let a = 'secret';
let f = function() {
return a;
};
另外，還有一個(gè)需要注意的地方吵瞻。ES6的塊級(jí)作用域必須有大括號(hào)葛菇，如果沒(méi)有大括號(hào)，JavaScript引擎就認(rèn)為不存在塊級(jí)作用域橡羞。
// 第一種寫法 報(bào)錯(cuò)
if (true) let x = 1; // Uncaught SyntaxError: Lexical declaration cannot appear in a single-statement context
// 第二種寫法 不報(bào)錯(cuò)
if (true) { let x = 1; }
上面 ?? 代碼中，第一種寫法沒(méi)有大括號(hào)济舆，所以不存在塊級(jí)作用域，而let只能出現(xiàn)在當(dāng)前作用域的頂層，所以報(bào)錯(cuò)结笨。第二種寫法有大括號(hào)，所以塊級(jí)作用域成立齐邦。
函數(shù)聲明也是如此，嚴(yán)格模式下第租，函數(shù)只能聲明在當(dāng)前作用域的頂層措拇。
// 不報(bào)錯(cuò)
'use strict';
if (true) {
function f() {}
}
// 報(bào)錯(cuò)
'use strict';
if (true)
function f() {}
// Uncaught SyntaxError: In strict mode code, functions can only be declared at top level or inside a block
3、const 命令
3.1慎宾、基本用法
命令const聲明一個(gè)只讀的常量丐吓。一旦聲明，常量的值就不能改變趟据。
const PI = 3.1415;
PI; // 3.1415
PI = 3; // Uncaught TypeError: Assignment to constant variable
上面 ?? 的代碼表明券犁，改變常量的值會(huì)報(bào)錯(cuò)。
命令const聲明的變量不得改變值汹碱，這意味著粘衬，const一旦聲明變量，就必須立即初始化咳促，不能留到以后賦值稚新。
const foo;
// SyntaxError: Missing initializer in const declaration
上面 ?? 代碼表示，對(duì)于const來(lái)說(shuō)跪腹，只聲明不賦值枷莉，就會(huì)報(bào)錯(cuò)。
命令const的作用域與let相同：只在聲明所在的塊級(jí)作用域內(nèi)有效尺迂。
if (true) {
const MAX = 5;
}
MAX; // Uncaught ReferenceError: MAX is not defined
命令const聲明的常量也是不提升笤妙，同樣存在暫時(shí)性死區(qū)，只能在聲明的位置后面使用噪裕。
if (true) {
console.log(MAX);
const MAX = 5;
// Uncaught ReferenceError: Cannot access 'MAX' before initialization
}
上面 ?? 代碼在常量MAX聲明之前就調(diào)用蹲盘，結(jié)果報(bào)錯(cuò)。
命令const聲明的變量膳音，也與let一樣不可重復(fù)聲明召衔。
var message = 'Hello World';
let age = 26;
// 以下兩行都會(huì)報(bào)錯(cuò)
const message = 'Goodbye';
const age = 30;
// SyntaxError: Identifier 'message' has already been declared
// SyntaxError: Identifier 'age' has already been declared
3.2、本質(zhì)
命令const實(shí)際上保證的祭陷，并不是變量的只不得改動(dòng)苍凛，而是變量指向的那個(gè)內(nèi)存地址所保存的數(shù)據(jù)不得改動(dòng)。對(duì)于簡(jiǎn)單的數(shù)據(jù)類型（數(shù)值兵志、字符串醇蝴、布爾值），值就保存在變量指向的那個(gè)內(nèi)存地址想罕，因此等同于常量悠栓。但對(duì)于復(fù)合類型的數(shù)據(jù)（主要是對(duì)象和數(shù)組），變量指向的內(nèi)存地址，保存的只是一個(gè)指向?qū)嶋H數(shù)據(jù)的指針惭适，const只能保證這個(gè)指針是固定的（即總是指向一個(gè)固定的地址）笙瑟，至于它指向的數(shù)據(jù)機(jī)構(gòu)是不是可變的，就完全不能控制了癞志。因此往枷，將一個(gè)對(duì)象聲明為常量必須非常小心。
const foo = {};
// 為 foo 添加一個(gè)屬性凄杯，可以成功
foo.prop = 123;
// 將 foo 指向另一個(gè)對(duì)象错洁，就會(huì)報(bào)錯(cuò)
foo = {}; // Uncaught TypeError: Assignment to constant variable
上面 ?? 代碼中，常量foo儲(chǔ)存的是一個(gè)地址盾舌，這個(gè)地址指向一個(gè)對(duì)象墓臭。不可變的只是這個(gè)地址，即不能把foo指向另一個(gè)地址妖谴，但對(duì)象本身是可變的窿锉，所以依然可以為其添加新屬性。
下面 ?? 是另一個(gè)例子 ??膝舅。
const a = [];
a.push('Hello'); // 可執(zhí)行
a.length = 0; // 可執(zhí)行
a = ['Dave']; // 報(bào)錯(cuò) TypeError
如果真的想將對(duì)象凍結(jié)嗡载，應(yīng)該使用Object.freeze方法。
const foo = Object.freeze({});
// 常規(guī)模式時(shí)仍稀，下面一行不起作用
// 嚴(yán)格模式時(shí)洼滚，改行會(huì)報(bào)錯(cuò)
foo.prop = 123;
上面 ?? 代碼中，常量foo指向一個(gè)凍結(jié)的對(duì)象技潘，所以添加新屬性不起作用遥巴，嚴(yán)格模式時(shí)還會(huì)報(bào)錯(cuò)TypeError。
除了將對(duì)象本身凍結(jié)享幽，對(duì)象的屬性也應(yīng)該凍結(jié)铲掐。下面 ?? 是一個(gè)將對(duì)象徹底凍結(jié)的函數(shù)。
var constantize = obj => {
Object.freeze(obj);
Object.keys(obj).foreach((key, i) => {
if (typeof obj[key] === 'object') {
constanize(obj[key]);
}
});
};
3.3值桩、聲明變量的六種方法
在ES5中只有兩種聲明變量的方法：var命令和function命令摆霉。在ES6中，除了添加let命令和const命令外奔坟，還有import命令和class命令携栋。所以ES6中一共有 6 中聲明變量的方法。
4咳秉、頂層對(duì)象的屬性
頂層對(duì)象婉支，在瀏覽器環(huán)境指的是window對(duì)象，在Node指的是global對(duì)象滴某。ES5之中磅摹，頂層對(duì)象的屬性與全局變量是等價(jià)的滋迈。
window.a = 1;
a; // 1
a = 2;
window.a; // 2
上面 ?? 代碼中霎奢，頂層對(duì)象的屬性賦值與全局變量的賦值户誓，是同一件事。
頂層對(duì)象的屬性與全局屬性掛鉤幕侠，被認(rèn)為是JavaScript語(yǔ)言最大的設(shè)計(jì)敗筆之一帝美。這樣的設(shè)計(jì)帶來(lái)了幾個(gè)很大的問(wèn)題，首先是沒(méi)法在未編譯時(shí)就報(bào)出變量未聲明的錯(cuò)誤晤硕，只有運(yùn)行時(shí)才能知道（因?yàn)槿肿兞靠赡軙r(shí)頂層對(duì)象的屬性創(chuàng)造的悼潭，而屬性的創(chuàng)造是動(dòng)態(tài)的）；其次舞箍，程序員很容易不知不覺(jué)的就創(chuàng)建了全局變量（比如打字出錯(cuò)）舰褪；最后，頂層對(duì)象的屬性是到處可以讀寫的疏橄，這非常不利于模塊化編程占拍。另一方面，window對(duì)象有實(shí)體含義捎迫，指的是瀏覽器的窗口對(duì)象晃酒，頂層對(duì)象是一個(gè)有實(shí)體含義的對(duì)象，也是不合適的窄绒。
命令ES6為了改變這一點(diǎn)贝次，一方面規(guī)定，為了保持兼容性彰导，var命令和function命令聲明的全局變量蛔翅，依舊是頂層對(duì)象的屬性；另一方面規(guī)定位谋，let命令山析、const命令、class命令聲明的全局變量倔幼，不屬于頂層對(duì)象的屬性盖腿。也就是說(shuō)，從ES6開始损同，全局變量將逐漸與頂層對(duì)象脫鉤翩腐。
var a = 1;
// 如果在 Node 的 REPL 環(huán)境，可以寫成 global.a
// 或者寫成通用方法膏燃，寫成 this.a
window.a; // 1
let b = 1;
window.b; // undefined
上面 ?? 代碼中茂卦，全部變量a由var命令聲明，所以它是頂層對(duì)象的屬性组哩。全局變量b由let命令聲明等龙，所以它不是頂層對(duì)象的屬性处渣，所以返回undefined。
5蛛砰、globalThis 對(duì)象
我們知道罐栈，JavaScript語(yǔ)言存在一個(gè)頂層對(duì)象，它提供全局環(huán)境（即全局作用域）泥畅，所有代碼都是在這個(gè)環(huán)境中運(yùn)行荠诬。但是，頂層對(duì)象在各種實(shí)現(xiàn)里面是不統(tǒng)一的位仁。
- 瀏覽器里面柑贞，頂層對(duì)象是
window，但Node與Web Worker沒(méi)有window聂抢。 - 瀏覽器和
Web Worker里面钧嘶，self也指向頂層對(duì)象，但是Node沒(méi)有self琳疏。 - 在
Node里面有决，頂層對(duì)象是global，但其他環(huán)境都不支持轿亮。
同一段代碼為了為了能夠在各種環(huán)境都能取到頂層對(duì)象疮薇，一般都是使用this變量，但是有局限性我注。
- 全局環(huán)境中按咒，
this會(huì)返回頂層對(duì)象。但是Node模塊和ES6模塊中但骨，this返回的是當(dāng)前模塊励七。 - 函數(shù)里面的
this，如果函數(shù)不是作為對(duì)象的方法運(yùn)行奔缠，而是單純作為函數(shù)運(yùn)行掠抬，this會(huì)指向頂層對(duì)象。但是校哎，嚴(yán)格模式下两波，這時(shí)this會(huì)返回undefined。 - 不管是嚴(yán)格模式闷哆，還是普通模式腰奋，
new Function('return this')()總是會(huì)返回全局對(duì)象。但是抱怔，如果瀏覽器用了CSP（Content Security Policy劣坊，內(nèi)容安全策略），那么屈留，eval局冰、new Function這些方法都可能無(wú)法使用测蘑。
綜上所述，很難找到一周可以在所有情況下康二，都取到頂層對(duì)象碳胳。下面 ?? 是兩種勉強(qiáng)可以使用的方法。
// 方法一
typeof window !== 'undefined'
? window
: typeof process === 'object' &&
typeof require === 'function' &&
typeof global === 'object'
? global
: this;
// 方法二
var getGlobal = function() {
if (typeof self !== 'undefined') {
return self;
}
if (typeof window !== 'undefined') {
return window;
}
if (typeof global !== 'undefined') {
return global;
}
throw new Error('unable locate global object');
};
現(xiàn)有一個(gè)提案赠摇，在語(yǔ)言標(biāo)準(zhǔn)的層面固逗，引入globalThis作為頂層對(duì)象浅蚪。也就是說(shuō)藕帜，任何環(huán)境下，globalThis都是存在的惜傲，都可以從它拿到頂層對(duì)象洽故，指向全局環(huán)境下的this。
墊片庫(kù)global-this模擬了這個(gè)提案盗誊，可以在所有環(huán)境拿到globalThis时甚。
本文參考來(lái)源 阮一峰博客 let&&const。
