1. 概述
1.1 说明
在ES5 声明变量的方法：var命令和function命令。
在ES6 声明变量的方法：var命令、function命令、let命令、const命令、import命令、class命令。
以下内容主要是对 let 、var 、const 命令的理解与记录。
1.2 let 命令
1.2.1 let 说明
let命令的声明变量用法类似于var，如 let a =10;(声明了一个变量：变量名为a，值为10)。但let所声明的变量，只在let命令所在的代码块内有效，即let用于声明一个块级作用域的变量。
以下代码解析：在函数test中的if代码块中使用let进行声明变量；在if代码快中调用所声明变量可以获取正确的值，而在if代码块外调用所声明变量则会报错。
function test() {
if (true) {
let x = 1;
console.log(x); //
}
console.log(x); // Uncaught ReferenceError: x is not defined
}
test();
for循环的计数器
for (let x = 0; x < 5; x++) {
setTimeout(function() {
console.log(x); // 0 1 2 3 4
}, 100);
}
console.log(x);// Uncaught ReferenceError: x is not defined
1.2.1 let 特性
详见 var 与 let 的对比。
- 块级作用域
- 不允许在相同作用域内，重复声明同一个变量
- 暂时性死区
1.3 var 命令
1.3.1 var 说明
使用var进行声明变量。var a =10;(声明了一个变量：变量名为a，值为10)。在ES6之前，JavaScript没有块级作用域，只有全局作用域和函数作用域。变量提升即是将变量声明提升到它所在作用域的最开始的部分。
//全局作用域
console.log(global); // undefined
var global = 'global';
console.log(global); // global
//函数作用域
function test () {
console.log(x); // undefined
var x = 1;
console.log(x); //
}
test();// 调用函数
以上代码中var声明的变量在不同作用域中进行了变量提升（在当前作用域下，在声明变量之前进行了调用，返回了变量值为undefined）。以上代码等同于以下代码：
var global; // 变量提升，全局作用域范围内，此时只是声明，并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global); // global function test () {
var x; // 变量提升，函数作用域范围内
console.log(x);// undefined
x = 1;// 此时才赋值
console.log(x);//
}
test();
for循环的计数器
for (var x = 0; x < 5; x++) {
console.log(x); // 0 1 2 3 4
setTimeout(function() {
console.log(x); // 5 5 5 5 5
}, 100);
}
console.log("***************");
console.log(x);//
1.3.2 省略 var
在javascript中，若省略var关键字而直接赋值，那么这个变量为全局变量，哪怕是在function里定义的。
function a() {
x = 2;
}
function b() {
console.log(x);//
}
a();
b();
1.4 let 与 var
- 作用域的区别
var ： 没有块级作用域，因为变量提升的特性，其声明变量的作用域为整个函数或全局范围。
let : 拥有块级作用域的特性，其声明的变量作用域范围从声明处一直到当前块级语句({}包含)的结尾【或一直延伸到函数结尾(在函数内)或全局结尾】。
function testVar() {
if (true) {
// 变量提升
console.log(x); // undefined
var x = 1;
console.log(x); //
}
// 作用域在整个函数作用域中
console.log(x); //
}
function testLet() {
if (true) {
// 不存在变量提升
console.log(y); // Uncaught ReferenceError: y is not defined
let y = 1;
console.log(y); //
}
// 作用域仅在if语句块中
console.log(y); // Uncaught ReferenceError: y is not defined
}
testVar();
testLet();
- 重复声明
var ： 允许在相同作用域内，重复声明同一个变量。
let : 不允许在相同作用域内，重复声明同一个变量。
function test() {
var x=1;
var x=2;
var x=3;
console.log(x);//
let y=1;
let y=2;
console.log(y);//Uncaught SyntaxError: Identifier 'y' has already been declared
}
test();
- 顶层对象的属性(window)
var ： 在全局作用域声明的变量，会作为widnow对象的成员。
let : 在全局作用域声明的变量，不会作为window对象的成员。
var x = 1;
let y = 1;
//var声明的变量附加到window对象上
console.log(window.x); //
//let声明的变量没有附加到window对象上
console.log(window.y); // undefined
- 暂时性死区
var ： 不存在暂时性死区。
let : 存在暂时性死区【在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）】。
var a = 123;
if (true) {
a = 'abc';
console.log(a);// abc
var a;
console.log(a);// abc
}
var x = 123;
if (true) {
x = 'abc'; // Uncaught ReferenceError: x is not defined
let x;
}
备注：ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错
1.5 const 命令
1.5.1 const 说明
使用const进行声明变量所定义的是一个只读的常量，一旦声明，常量的值就不能改变。const a =10;(声明了一个常量变量：变量名为a，值为10)。
const x = 1;
x = 2; // Uncaught TypeError: Assignment to constant variable
1.5.2 const 特性
- 块级作用域(与let命令相同)
- 不允许在相同作用域内，重复声明同一个变量(与let命令相同)
- 暂时性死区(与let命令相同)
- 在全局作用域声明的变量，不会作为window对象的成员
- 当用const声明的常量为值类型(e.g. String、Number)时，修改此常量的值会报错；但当声明的常量为引用类型(e.g. Array、Object)时，只可以修改此常量的成员
// 1.const声明一个数组
const x = [1, 2, 3];
console.log(x); // => [1, 2, 3]
x[0] = "a"; // 修改数组的第一个元素的值
console.log(x); // ['a', 2, 3] // 2.const声明一个对象
const obj = {};
obj.name = 'objName';
console.log(obj.name); // objName