var、let和const

一、作用域的不同

在ES6之前，作用域：函数作用域和全局作用域
ES6中新增了块级作用域，使用let可以声明块级作用域的变量，用大括号{}表示块级作用域

• 块级作用域
  1.块级作用域允许任意嵌套，内层作用域可以定义外层作用域同名变量
  2.允许在块级作用域内声明函数，函数声明语句行为类似于let，在块级作用域外不可引用

在ES6浏览器中，块级作用域中函数声明行为类似于var，会提升到全局作用域或函数作用域头部，还会提升到所在块级作用域的头部。

因环境行为差异大，在块级作用域内声明函数，应该使用函数表达式而不是函数声明语句

//原始代码
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());


//在ES5环境中
function f() { console.log('I am outside!'); }

(function () {
  function f() { console.log('I am inside!'); }
  if (false) {
  }
  f();
}());
//  I am inside!


//在ES6环境中
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

1、var —— 全局作用域

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();  //10

var声明的变量是全局范围内有效，全局只有一个 i，循环内赋予数组 a 内部的 console.log(i)里面的i指向全局i 。在循环结束之后i为10，所以执行a[6]()的结果为打印出10（全局变量 i 的值）

2、let —— 块级作用域

let是ES6新增的命令，用来声明变量，但是let声明的变量只在代码块中有效

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();  //6

let声明的变量仅在块级作用域内有效，i只在本轮循环有效，每一次循环的时候i都是一个新的变量，所以a[6]()可以输出为6。

• for循环中的作用域：父作用域+子作用域
  在for循环中，设置变量循环那部分是一个父作用域，循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

2、const —— 块级作用域

const的作用域与let命令相同：只在声明所在的块级作用域内有效。

二、变量提升

1、var —— 有变量提升

变量提升即变量可以在声明之前使用，值为undefined。

console.log(foo); // 输出undefined
var foo = 2;

2、let —— 没有变量提升

let声明的变量一定要先声明后使用，否则会报错

console.log(foo); // 报错
var foo = 2;

3、const —— 没有变量提升

4、补充 —— 变量提升和函数提升

变量提升和函数提升都是在JS代码编译阶段做的
变量提升是用var声明的变量会提升到程序顶部，但只是提升声明，赋值并不会提升
函数提升是用函数声明的函数，函数的声明和函数体都提升到程序的顶部，可以在函数声明之前使用这个函数
函数提升优先级比变量提升高，同名会被函数提升覆盖

三、暂时性死区

如果在块区域中存在let和const命令声明的变量，则形成一个封闭的作用域，凡在声明前使用这些变量就会报错。
在代码块中使用let声明变量之前，该变量都不可用，这在语法上称为“暂时性死区”。

• 暂时性死区的例子

function bar(x = y, y = 2) {
  return [x, y];
}

bar(); // 报错，原因：x=y，但是y还未声明属于死区

let x = x;     //报错，原因：x还未声明就用于给x赋值

var x = x;   //不报错，原因：var 没有暂时性死区

暂时性死区的好处：减少运行时错误，防止在变量声明之前使用变量。

四、重复声明

1、var —— 可以重复声明同一个变量

2、let —— 不允许重复声明同一变量

let不允许在相同的作用域内重复声明同一变量

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

不能在函数内部重新声明参数

function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {f
  {
    let arg;
  }
}
func() // 不报错

3、const —— 不允许重复声明同一变量

const声明的是一个只读的常量，一旦声明不能改变。并且const在声明时必须赋值。
在本质上不是指变量的值不可以改变，而是指向的那个内存地址所保存的数据不可以改变。

五、全局对象与顶层对象的脱离

顶层对象：在浏览器环境中指的是window对象，在 Node指的是global对象。
ES5 之中，顶层对象的属性与全局变量是等价的。

window.a = 1;
a // 1

a = 2;
window.a // 2

在ES6中规定

• var命令和function命令声明的全局变量，依旧是顶层对象的属性
• let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性

var a = 1;
window.a // 1

let b = 1;
window.b // undefined

六、ES6声明变量的六种方法

• var
• function
• let
• const
• import
• class