ES6-2 块级作用域与嵌套、let、暂行性死区

注意，写在开头

function test(x = 1) {var x  // 不报错console.log(x)
}
function test1(x = 1) {let x = 10 // 报错console.log(x)
}

let的变量名不可以和参数中的名称相同。而var并不限制，说白了就是希望你规范使用变量名。
形参原则上数组函数内部的临时变量，但是形参其实在内存中有独立的空间存储。

阮一峰ES6 - let

思考，在编写代码时，有es5、es6的语法，究竟是否有块级作用域？
ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。

1. var关键字可以重复声明

var num1 = 1;
var num1 = 100;
console.log(num1) // 100

2. let块级作用域

2.1 同一作用域下不能重复声明（无论是let/var/const声明）

let num1 = 1;
var num1 = 100; // 报错 重复定义

var a = 10;
let a = 10; // 报错

function test(a){let a = 10; // 预编译时，形参a已定义，重复声明报错
}

let a = 1;
function a() { } // 报错

let a = 1;
{function a() { } // 不报错
}
// 函数提升是在当前（块级）作用域下提升

// 转译后
"use strict";var a = 1;
{var _a = function _a() {}; // 不报错}

function test(a) {{let a = 10;}console.log(a) // undefined
}
test()

2.2 let不会提升，会产生一个暂时性死区，在变量声明前访问会报错

var a = a;
console.log(a) // undefined
let x = x; // 报错
// 在变量x的声明语句还没有执行完成前，就去取x的值，导致报错”x 未定义“。
// 这里不要把赋值语句拆分为声明和赋值2步理解

以下3种情况

var x = 1;
{// 此处=右的x取的是块级作用域内的// 暂时性死区let x = x;console.log(x) // 报错// Uncaught ReferenceError: Cannot access 'x' before initialization
}

↓

// 转译ES5
"use strict";var x = 1;
{var _x = _x;console.log(_x); // undefined
}

这里注意：因为es5不存在暂时死区。let x = x 的问题在于,右侧x是取值并赋值的操作,而这个时候在es6里，x并没有完成初始化,所以取值x的时候就会失败。
而var是不存在这种问题的。因为es6严格规定了初始化流程就是变量声明必须初始化且不允许取值。也就是说声明语句不可以有对该变量的引用。

转译并不能百分百还原。对应let转var这里就出现了以上的情况。
有些浏览器不支持块级作用域（大括号）。
转译结果和babel的版本也有关系，有可能转译后去除了大括号或转成IIFE或其他形式。

var x = 1;
{let x;x = x;console.log(x) // undefined
}

↓

"use strict";var x = 1;
{var _x;_x = _x;console.log(_x); // undefined
}

// 这个本身就是ES5不需要转
var x = 1;
{x = x;console.log(x) // 1
}

let a ;
a = a
console.log(a) // undefined

if (true) {// TDZ开始tmp = 'abc'; // ReferenceErrorconsole.log(tmp); // ReferenceErrorlet tmp; // TDZ结束console.log(tmp); // undefinedtmp = 123;console.log(tmp); // 123
}

function bar(x = y, y = 2) {return [x, y];
}bar(); // 报错 
// 参数x默认值等于另一个参数y，而此时y还没有声明，属于“死区”。如果y的默认值是x，就不会报错，因为此时x已经声明了。

2.3 typeof不再是一个百分之百安全的操作

typeof x; // ReferenceError
let x;

注意

for (var i = 0; i < 10; i++) {arr[i] = function () {console.log(i)}
}
for (var i = 0; i < 10; i++) {arr[i]() // 打印0-9  
}
// 第二个for循环里，var i重新赋值了，恰好是i

在这里插入图片描述

var arr = [];
for (var i = 0; i < 10; i++) {arr[i] = function () {console.log(i)}
}
// 上个for循环var i是全局的，退出循环后为10
for (var index = 0; index < 10; index++) {arr[index]() // 10个10
}

==================================================

let是在块中声明的变量，每当声明一个function都会传入当前for的块中单独的i进去。也就是说let是块变量，在自己的块，或者子块中使用。而不是只在函数或全局作用域中使用。立即执行函数是为了将每次的i作为函数作用域中的局部变量传入与外界的i隔离。

在这里插入图片描述

// 用let声明，由于存在父子级作用域，相当于也形成了闭包
var arr = [];
for (let i = 0; i < 10; i++) {arr[i] = function () {console.log(i)}
}
// 即使index用let打印的也是0-9
for (var index = 0; index < 10; index++) {arr[index]() // 0-9
}

// 转译之后
"use strict";var arr = [];var _loop = function _loop(i) {arr[i] = function () {console.log(i);};
};for (var i = 0; i < 10; i++) {_loop(i); // 这里立即执行了
}for (var index = 0; index < 10; index++) {arr[index](); // 0-9
}

2.4 for循环作用域

for循环的特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域

for (var i = 0; i < 10; i++) {let i = 'a' console.log(i) // 10个a // 循环的index i是声明在全局的
}
console.log(i) // 10

for (let i = 0; i < 10; i++) {// for循环内的块级作用域// for花括号内的块级作用域并不相同let i = 'a'console.log(i) // 10个a
}

for (let i = 0; i < 10; i++) {var i = 'a' // 报错 // 因为for循环内，这里var声明的i会提升到全局// 而for循环条件又用let声明一次i，重复声明了console.log(i) 
}

if (1) {let a = 1;console.log(a) // 1{let a = 10;console.log(a) // 10}
}

以前遇到的有IIFE里不用关键字声明的吗

let a = 1;
(function(){a = 10; console.log(a) // 10
})()
console.log(a) // 10

let a = 1;
(function(){let a = 10;console.log(a) // 10
})()
console.log(a) // 1

var a;
(function () {a = 10;console.log(a) // 10
})();
(function () {a = 100;console.log(a) // 100
})();
console.log(a) // 100

(function () {var a = 10;console.log(a) // 10
})();
(function () {var a = 100;console.log(a) // 100
})();
console.log(a) // 报错 
// Uncaught ReferenceError: a is not defined

思考：在index.html文件的script标签里编码，既有es5的语法，又有es6的语法，在浏览器中打开时，浏览器会将所有代码转译成es6吗
不会转译，浏览器不同的版本对es的支持不一样。(现代浏览器基本都支持ES6)
现在普遍兼容es6的语法。但对特殊的语法需要babel转译，包括对象的拓展，类的修饰等等，这些是需要babel转译的。