javascript-变量学习

javascript-变量学习

var

在ES6之前，定义变量是这样的

var a = 'hello';

甚至是这样(非严格模式下)，这里，js会自动为变量加上var，等于是定义了一个全局变量a。

a = 'hello';

let

ES6引入

let a = 'hello';

a = 'world';

const

const由ES6引入，是指常量，用const定义的变量不能被重新赋值，如果被重新赋值会抛出错误。

实际项目里面，你会发现很多变量其实都不会重新赋值，所以，一开始可以都用const来定义变量，直到发现需要重新赋值时才将其改为let。

const a = 'hello';

a = 'world';//TypeError: Assignment to constant variable

需要注意，以下这样不是重新赋值，新手容易记混

const foo = [];
foo.push(1, 2, 3);

var和let有什么区别？

都是用来定义变量，它们有什么区别呢？请看下面的例子：

function test(){
    if(true) {
        var a = 'hello';
    }
    console.log(a);//hello
}
test();

var定义的变量会被提升，上面这段代码可以翻译一下，

function test(){
    var a;
    if(true) {
        a = 'hello';
    }
    console.log(a);//hello
}
test();

注意这里var声明的变量，其声明被提升到了方法的开始，但赋值不会被提升，也就是说在赋值之前访问都是undefined。

如果将var改成let，将会抛出ReferenceError

function test(){
    if(true) {
        let a = 'hello';
    }
    console.log(a);//ReferenceError: a is not defined
}
test();

我们再看一个例子，此题出自这里[javascript-questions]第1题(https://github.com/lydiahallie/javascript-questions)

function sayHi() {
  console.log(name);
  console.log(age);
  var name = 'Lydia';
  let age = 21;
}

sayHi();

输出是什么呢？

答案： undefined和ReferenceError 解析：

var定义的变量为什么输出undefined，相信聪明的你应该知道了。

let定义的变量为什么输出ReferenceError值得说一说，首先要知道"临时死区"（Temporal Dead Zone，简称TDZ）这么一个概念。

什么是临时死区呢？临时死区是ES6首次引入的一个概念，可以这样简单理解，用let和const声明的变量，在其初始化之前都不能被访问，否则将抛出ReferenceError。

也就是说上面的例子中直到let age = 21被赋值之前，尝试获取age变量都会抛出ReferenceError。

总结

1. var声明的变量会被提升，但赋值不会提升
2. 用let和const声明的变量会产生临时死区
3. 用const声明变量不能被重新赋值
4. 建议使用let或const来进行变量声明

写作时间：2020-05-24