1. var 声明作用域#

使用var操作符号定义的变量会成为包含它的函数的局部变量，会被拿到函数或全局作用域得顶部

1
function hello(){
2
  var a = 'hi'; // 局部变量
3
}
4
hello();
5
console.log(a); // 出错

这里声明了a变量，函数使用完退出之后就销毁了这个a变量

但是有一种情况，直接在函数中声明全局变量

1
function hello(){
2
    a='hi';
3
}
4
hello();
5
console.log(a); // hi

调用hello()函数之后全局注入了一个a的变量，这个变量

虽然可以通过省略var操作符定义全局变量，但是不推荐。局部作用域中定义全局变量很难维护。

2. var声明提式（变量提升hoist）#

如下

1
function foo(){
2
    console.log(a);
3
    var a = '1212';
4
}
5
foo(); // undifined

a变量在定义之前就已经被访问，但是关键字会自动提升到函数作用域的顶部

等价于

1
function foo(){
2
    var a;
3
    console.log(a);
4
    a = '1212';
5
}
6
foo();

3. 全局变量声明#

在全局中使用var来声明变量，这个变量会成为window对象的属性

1
var name = 'weng';
2
console.log(window.name) // weng

1. let的块作用域#

let和var的作用差不多，但是有很大区别。最明显的是Let声明的范围是块作用域， 而var声明的范围是函数作用域

var

1
if(true){
2
    var name = 'a';
3
    console.log(name); // a
4
}
5
console.log(name); // a

let

1
if(true){
2
    let name = 'a';
3
    console.log(name); // a
4
}
5
console.log(name); // ReferenceError:name 没有定义

这里用let声明的变量之所以不能在if块外部被引用，是因为它的作用域仅限于该块的内部

块作用域是函数作用域的子集， 函数作用域 > 块作用域

因此适用于var的作用域也适用于let作用域

1. 当然let也不允许同一个块作用域中出现冗余的声明，这样会报错

1
var name;
2
var name;
3

4
let age;
5
let age; // SntaxError;标识符age已经声明过了

2. js引擎会记录用于变量声明的标识符以及其所在的块作用域，嵌套使用相同的标识符不会报错，因为在同一块中没有重复声明

   1
   let age =30;
   2
   console.log(age);
   3
   function hello(){
   4
     let age = 20;
   5
       console.log(age); // 20
   6
   }
   

2. 暂时性死区（let不存在变量提升）#

let 与var的另外一个重要区别就是let声明的变量不会在所对应的块作用域中被提升

1
console.log(name); // ReferenceError; age未被定义
2
let age = 2;

let和var同理，在访问name变量的时候js会去找块后面的let声明，只是var声明的变量可以提前访问，let不能够提前访问；

在let声明之前执行瞬间被称作“暂时性死区”

3.全局变量声明#

1
let age = 26;
2
console.log(window.age) // undifined

let全局声明的变量并不会成为window对象的属性这点与var有区别

不过let声明在全局作用域中发生，相对应的变量会在页面的声明周期中续存

4.for循环中的let声明#

在let出现之前，for循环体定义的迭代变量会渗透到循环体的外部

1
for(var i =0;i<9;i++){
2
    // ....
3
}
4
console.log(i); // 9

在使用let之后这个问题就消失了；

1
for(let i = 0;i<9;i++){
2
    // ....
3
}
4
console.log(i); // ReferenceError;i 没有定义

在使用var的时候，最常见的问题就是对迭代变量的奇特声明和修改

1
for(var i = 0;i<5;i++){
2
    setTimeout(()=>console.log(i),0);
3
}
4
// 你以为的输出0，1，2，3，4，5
5
//实际 5，5，5，5，5

之所以这样是因为在退出循环的时候，迭代变量保存的是导致循环退出的值：5.

之后执行异步逻辑的时候，所有的i都是同一个变量，因此都是同一个最终值

而使用ley声明迭代变量的时候，js引擎会在后台为每个迭代循环声明一个新的迭代变量，也就是每个内部的异步函数引用的都是不同的变量实例，所以console.log()输出的是我们期望的值