ES6学习01 var,let与const的用法与区别以及顶层对象的属性

本文链接：https://blog.csdn.net/pspxuan/article/details/102471093

今天开始接触ES6，在ES6文档中学习了var let const的用法与区别，下面来记录一下。

1.let命令

1.1用途概述

let命令用来声明变量。所声明的变量，只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

花括号内为代码块，其中包裹了用let与var声明的变量，a报错说明名了let声明的变量只在自己的作用的代码块内有效。

下面再举几个例子

for (let i = 0; i < 10; i++) {
  // ...
}
console.log(i);
// ReferenceError: i is not defined

上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。

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

上述代码中，因为 i为var所声明，所以当for循环的计时器被执行时，i的值就会被甩到全局。所以当函数被执行时，console.log打印出的是全局的i。

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

上述代码中，因i为let声明，i只会在for循环体内起作用，所以在for的外部直接打印i时，会出现i未被定义的报错。也因为i只在for循环体之内起作用，所以每一次循环i都是一个新的变量,所以最后输出的是6。
注意：
你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。简单来说就是函数执行时 AO （函数上下文，活跃对象）起的作用

1.2作用域

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

上面代码正确运行并没有报错（如果在同一作用域出现两次用let声明同样的变量，则会报错），输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

1.3不存在变量提升（预编译）

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

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

上面的代码可以很清楚的了解到，let命令声明后，js启动时不会预编译let所声明的变量

1.4暂时性死区

var tmp = 123;

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

上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

再举一个例子：此例用到了ES6函数的默认值

var x = 1;

function foo(x = x) {
  // ...
}

foo() // ReferenceError: x is not defined

上述代码，函数定义的默认值 x = x ，形成一个单独的作用域，实际上执行的是 let x = x，所以这么引用后，函数 x 取值时，就会要拿到外面的 x，但是由于暂时性死区，在 let 声明之前赋值 x 变量，所以导致报错

1.5不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。但是可以重复赋值。
但是内层作用域可以定义外层作用域的同名变量。

2.const命令

2.1用法概述

const声明一个只读的常量，一旦声明，常量的值就不能改变。

举两个例子

const PI = 3.1415;
PI // 3.1415

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

上面代码表明改变常量的值会报错。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const foo;
// SyntaxError: Missing initializer in const declaration

上面代码表示，对于const来说，只声明不赋值，就会报错。

2.2作用域

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

2.3不允许变量提升（预编译）

与let相同，命令声明后，js启动时不会预编译const所声明的变量

2.4暂时性死区

与let相同，存在暂时性死区，只能在声明的位置后面使用。

2.5不可重复声明

const声明的常量，也与let一样不可重复声明。

2.6本质拓展

对于数据结构还没有了解，引用一下官方文档的解释，留着慢慢消化

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。
对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

3.总结

var ， let ，const 三者的共同点都是声明变量而区别在于

1. 预编译以及暂时性死区

var 在进行声明时会进行变量提升（预编译），因此也不存在暂时性死区。而 let与 const不会，只能在声明之后调用变量。

2.重复声明

var 声明的变量可以重复声明，并且会重新赋值。const 与 let不允许重复声明，除非是在两个不同的代码块中

3.作用域不同

var 声明的变量在某些时候在代码块之外也会有效，而const 与 let声明的变量只会在代码块内有效。

4.声明既赋值

var 与 let 命令声明与赋值可以分步骤操作，而 const 声明变量的同时必须赋值。

4.顶层对象的属性

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

window.a = 1;
a // 1

a = 2;
window.a // 2

上面代码中，顶层对象的属性赋值与全局变量的赋值，是同一件事。

顶层对象的属性与全局变量挂钩，被认为是 JavaScript 语言最大的设计败笔之一。这样的设计带来了几个很大的问题，首先是没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）；其次，程序员很容易不知不觉地就创建了全局变量（比如打字出错）；最后，顶层对象的属性是到处可以读写的，这非常不利于模块化编程。另一方面，window对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实体含义的对象，也是不合适的。

ES6 为了改变这一点，一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

var a = 1;
// 如果在 Node 的 REPL 环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1

let b = 1;
window.b // undefined

上面代码中，全局变量a由var命令声明，所以它是顶层对象的属性；全局变量b由let命令声明，所以它不是顶层对象的属性，返回undefined。