变量---var、let和const

变量— var、let和const

简单来讲就是

var 全局变量，有变量提升
let、const局部，没有变量提升，要先声明后使用

let 可修改
const不可修改，在声明时要进行赋值

一、var关键字

存在全局作用域和函数作用域两种，有变量提升，没有块级作用域的说法。

1、var声明作用域

使用var在一个函数内部定义一个变量，该变量将在函数退出时被销毁：

function test() {
    var msg = 'hi';  // 局部变量
}
test(); 
console.log(msg); // 报错

这里的msg变量是在函数内部使用var定义的。函数叫test()，调用它会创建这个变量并赋值。调用之后变量随即被销毁，所以会报错。

function test() {
    msg = 'hi';  // 全局变量
}
test(); 
console.log(msg); // 'hi'

在函数内定义变量时省略var，可以创建一个全局变量。（不推荐这么做，在局部作用域定义全局变量很难维护，也会造成困惑，不能一下子判断是否是有意省略。并且在严格模式下，会抛出ReferenceError）

如果需要定义多个变量，可在一条语句中用逗号分隔

var msg = 'hi',
    name = 'zhang',
    age: 18;

2、var声明提升

function test() {
    console.log(msg)
    var msg = 'hi';  
}
test(); // undefined

之所以不会报错，是因为ECMAScript运行时把它看成如下代码：

function test() {
    var msg;
    console.log(msg)
    msg = 'hi';  
}
test(); // undefined

这就是“提升”，也就是把所有变量声明都拉到函数作用域的顶部。

二、let声明

let跟var的作用差不多，最明细的区别就是，let声明的范围是块级作用域，var声明的范围是函数作用域。

if(true) {
    var name = 'zhang'
    console.log(name) // zhang
}
console.log(name) // zhang

if(true) {
    let age = 18
    console.log(age)  // 18
}
console.log(age)  // Uncaught ReferenceError: age is not defined

age之所以不能在if外被引用，是因为它的作用域仅限于该块内部。是函数作用域的子集，因此适用于var的作用域限制同时也适用于let。

let不允许同一个块级作用域中出现冗余声明。

let age;
let age;
// Uncaught SyntaxError: Identifier 'age' has already been declared

JavaScript引擎会记录用于变量声明的标识符及其所在的块作用域，因此嵌套使用相同的标识符不会报错，这是因为同一个块中没有重复声明：

var name = 'zhang';
console.log(name); // zhang
if(true) {
    var name = 'ddd';
    console.log(name); // ddd
}

let age = 18;
console.log(age); // 18
if(true) {
    let age = 12;
    console.log(age); // 12
}

混用的时候

var name; 
let name; 
// Uncaught SyntaxError: Identifier 'name' has already been declared

let age; 
var age; 
// Uncaught SyntaxError: Identifier 'age' has already been declared

1、暂时性死区

let声明变量不会提升，在解析时，JavaScript引擎也会注意出现在块后面的let声明，只不过在此之前不能以任何方式来引用未声明的变量。在let声明之前的执行瞬间被称为“暂时性死区”。

console.log(age);  // Uncaught ReferenceError: age is not defined
let age = 18;

2、全局声明

使用let在全局作用域中声明的变量不会成为window对象的属性，var声明的则会。

var name = 'sss';
window.name; // 'sss'

let age = 18;
window.age; // undefined

let声明是在全局作用域发生的，相应变量会在页面的生命周期内存续。

3、for循环中的let声明

在

for (var i = 0; i < 5; ++i) { 
 // 循环逻辑
} 
console.log(i);  // 5

for (let i = 0; i < 5; ++i) { 
 // 循环逻辑
} 
console.log(i);  // Uncaught ReferenceError: i is not defined


for (let i = 0; i < 5; ++i) { 
 setTimeout(() => console.log(i), 0) 
} 
 // 0 1 2 3 4 

for (var i = 0; i < 5; ++i) { 
 setTimeout(() => console.log(i), 0) 
} 
// 5 5 5 5 5 

三、const声明

const的行为与let基本相同，唯一一个重要的区别是用它声明变量时必须同时初始化变量，且尝试修改const声明的变量会报错。

const age = 18;
age = 19;  // Uncaught TypeError: 给常量赋值.

const 声明的作用域也是块

const name = 'ddd';
if (true) {
    const name = 'fff';
}
name; // 'ddd'

const声明的限制只适用于它指向的变量的引用。换句话说，如果const变量引用的是一个对象，那么修改这个对象内部的属性并不违反const的限制。

const person = {};
person.age = 16;  // 16

const person = {
 age: 18
};
person.age = 16;  // 16

JavaScript引擎会为for循环中的let声明分别创建独立的变量实例，虽然const跟let变量相似，但是不能用const来声明迭代变量（迭代变量会自增）：

for(const i = 0; i < 5; i++) {}  // TypeError:给常量赋值