Javascript学习1：变量提升，var与let，const

本文只是记录在学习和工作中遇到的JS方面知识
并提出了自己的见解和想法
参考资料如下：
JavaScript 教程

在说JavaScript变量提升的定义之前，先看一段js代码

function foo() {
  console.log(a);
  var a = 1;
}
foo()

在执行这段代码会输出什么呢？答案如下

为啥console.log(a)在var a = 1之前执行，却不会报错，而是输出一个undefined。

这时候我们引出变量提升的概念：

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

通俗且狭义地解释一下就是，js会在执行代码时，会先“看”一下代码的内容，把所有被声明的变量都“抽”出来，放到代码的最开始的地方，先声明这个变量，再去安装原来的顺序执行。

但是为什么说是狭义的呢？因为还有很多种情况：

1. 变量的提升

我们看看刚刚的代码

function foo() {
  console.log(a);
  var a = 1;
}
foo()

按照刚刚变量提升的定义，我们可以把这段代码解析成如下：

function foo() {
  var a; //初始化为undefined
  console.log(a);
  a = 1;
}
foo()

这里先把var a的声明提到了函数的一开始，并初始化为undefined，然后再按顺序执行，所以console.log(a)并不会报错，而且输出了一个undefined。而后面的a = 1我们称之为赋值，而不是“初始化”

2.函数的提升
看一下下面例子

function foo() {
  console.log(a);
  var a = 1;
  console.log(a);
  function a() {}
  console.log(a);
}
foo();

输出：

这又出现了一个很有意思的现象，定义的函数也出现了提升的情况，在js眼中是这样解析的：

function foo() {
  var a;
  function a() {}
  console.log(a); // a()
  a = 1;
  console.log(a); // 1
  console.log(a); // 1
}
foo();

整个过程为，js先找到了需要声明的变量a，并提取到最前面进行声明，并初始化为undefined，然后js再去找所有函数声明（注意是函数声明），并把它们”剪切“到刚刚的变量声明后面，再按顺序执行代码，所以变量提升的顺序是：先提升变量，再提升函数声明

那如果是函数表达式形式定义的函数呢？

那就按照js变量的方式来提升，而不是函数的提升（因为函数表达式是赋值的形式），这就解释了为什么调用函数可以在函数声明之前，而使用函数表达式时，一定是先定义了再调用。

3.使用es语法中的let与const会变量提升吗？

这又是一个好问题?
我查看了很多文档，这个大佬解释的非常清楚可以看一下
let深入理解—let存在变量提升吗？

再结合下面几个例子（可以自己去控制台输出试试看）：


我们可以看到，使用let去声明并初始化变量时，看起来是没有“变量提升的效果”，但是实际上是有提升的，只不过是由于let的“暂时死区”机制，让它看起来没有被提升：
在这里我们可以提出三个变量声明的阶段【声明】【初始化】【赋值】

//使用var时:
fn(){
	console.log(a); // undefined
	var a = 'aaa'
}

这里变量a出现了变量提升，js把【声明】【初始化】两个阶段都进行了提升，所以console.log(a)为undefined

//使用let时:
fn(){
	console.log(a); // 报错
	let a = '1'
	//console.log(a); // 1
}

这里变量a也出现了变量提升，不同的是js把【声明】阶段进行提升，由于暂时死区【初始化】阶段没有被提升，所以报错，如果把console.log(a)放到后面，其实是会输出1，而这个其实是a的【初始化】为1的结果，而不是【赋值】

最后引用大佬的结论就是：

let 的「创建」过程被提升了，但是初始化没有提升。
var 的「创建」和「初始化」都被提升了。
function 的「创建」「初始化」和「赋值」都被提升了。
最后看 const，其实 const 和 let 只有一个区别，那就是 const 只有「创建」和「初始化」，没有「赋值」过程。
所谓暂时死区，就是不能在初始化之前，使用变量。