变量声明

西瓜皮儿 2021/11/2

# var

var有变量提升
var的变量提升只是提升声明，还是要等执行到对应行才赋值
var不会创建块级作用域
var声明的全局变量会挂载到window上去

变量提升

console.log(a); // undefined
console.log(b); // 报错

var a;
 
        复制成功

1
2
3
4

无块级作用域

console.log(a); // undefined 说明变量a的声明被提到这里来了

if (true) {
    console.log(a); // undefined
    let a = 2;
    console.log(a); // 2
}

console.log(a); // 2 说明if 的块级作用域没有包住a
 
        复制成功

1
2
3
4
5
6
7
8
9

经典问题

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
      var name = 'Jack'; // var 无块级作用域，会提升到本函数顶部，所以本函数活动对象访问得到 name，外层if拿的是 undefined
      console.log('Goodbye ' + name);
    } else {
      console.log('Hello ' + name);
    }
})();
 
        复制成功

1
2
3
4
5
6
7
8
9

var无块级作用域的经典问题

var e = [{}, {}, {}];

for (var i = 0; i < e.length; i++) {

    // 里面没有块级作用域，所以一直都是用的同一个i
    e[i].fn = function() {
        console.log(i);
    }
}

e.forEach(_ => _.fn()) // 3 3 3
 
        复制成功

1
2
3
4
5
6
7
8
9
10
11

上面的代码相当于

var e = [{}, {}, {}];
var i;

// for循环展开
{
    var i = 0; // var 并没有什么用，因为var不存在块级作用域
    e[i].fn = function(){ console.log(i) };
}
{
    var i = 1;
    e[i].fn = function(){ console.log(i) };
}
{
    var i = 2;
    e[i].fn = function(){ console.log(i) };
}

i = 3; // for循环结束

// 每一个都说要输出i，但一直都只有全局的一个i
e.forEach( _ => _.fn()); // 3 3 3
 
        复制成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

利用函数作用域

var的世界里，没有块级作用域，只有函数作用域和全局作用域，那么就可以借用函数作用域来充当块级作用域

var e = [{}, {}, {}];
for (var i = 0; i < e.length; i++) {

    /**
     * 立即执行函数（IIFE）的函数作用域保存了当前的i值存到变量x里面
     * 返回的函数由于闭包原理，可以访问到x
     */
    e[i].fn = (function (x) {
        return function () {
            console.log(x);
        }
    })(i);
}

e.forEach(_ => _.fn()); // 0 1 2
 
        复制成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 缺陷解决

由于var关键字的缺陷，引入了let/const关键字
解var无决块级作用域问题，let/const 有
解决变量提升问题，设置了一个变量死区

变量死区

var 提升了声明，且可以访问到，只不过到对应行才进行赋值
let 也提升了变量声明，但是不让访问，放在变量死区里面

/**
 * 报错：ReferenceError: Cannot access 'a' before initialization
 * 说明知道有这个变量了，但是还不让访问
 */
console.log(a);
let a = 0;
 
        复制成功

1
2
3
4
5
6

# let

let a = 1;
a = 2;
console.log(a); // 2
 
        复制成功

1
2
3

本块级作用域内找不到，就会向上级作用域链找

let a = 1;
if (true) {
    
    // 本块内找不到，去作用域链找
    console.log(a); // 1
}
 
        复制成功

1
2
3
4
5
6

变量死区有就不会去作用域链找

let a = 1;

if (true) {

    // 报错，本块级作用域有变量提升，且还在变量死区
    console.log(a);
    let a = 2;
}
 
        复制成功

1
2
3
4
5
6
7
8

# const

规则与let基本一致
特点：设置后不可更改

const a = 1;
a = 2; // 报错
 
        复制成功

1
2

# 其他声明

function 也是声明了一个变量

funciton a() {}
let a = 1; // 报错，说明已存在这个变量
 
        复制成功

1
2

类型判断 String