一杯茶的时间，搞定JavaScript提升

Posted 2021-09-26 快跑啊小卢_

✍️ 前言

• 我们都知道在javascript中同一个作用域内的变量都属于这个区域，在别的作用域是获取不到这个变量的。
• 但是在同一个作用域内，其中变量的声明的先后顺序和位置其实是有奇特的关系的，而这个奇特的现象就是变量提升。

🙇‍♂️ 什么是提升

• 想要搞懂提升只需要了解以下四个方面即可。

  • 提升是什么现象
  • 变量提升
  • 函数提升
  • 变量和函数的提升优先级

提升是什么现象

• 我们都知道JavaScript是单线程的语言，一个任务结束才会进行下一个任务，这样大家都默认认为执行会从上到下一条一条代码去执行，这句话是对的但又不完全对，有一种情况会有特殊。
• 我们观察以下代码。

console.log(text);

• 很明显我们没有声明text它是会报错的，这是我们都知道的，如果是这样呢？

console.log(text);
var text=828;

• 可能你会认为text是在打印后声明的，所以他还是会报错，但实际上他没有报错，打印了一个undefined。
• 再来看看下面一道经典面试题。

text=828;
var text;
console.log(text);

• 有很多人会觉得说声明了text之后没有赋值，所以他会打印一个undefined,但实际上真正的打印结果是828，这又是为什么呢？

变量提升

• 当我们简单的输入一行代码var text=828;的时候如果我们不了解变量提升肯定会认为他只是简简单单将828赋值给了text这一个声明，但实际上JavaScript做了两步操作，分别是var text声明，然后是text =828赋值。
• 当编译器在给JavaScript编译时会有两个阶段分别是编译阶段和执行阶段，而编译阶段其中有做的处理是先找到同一个作用域中所有需要声明的变量，先将其声明（例如:var text）然后才到代码的执行阶段等待执行（例如：text =828）。
• 这也是为什么var text=828会将他分成两步操作的原因，说白了就是变量和函数的所有声明都会在被执行前处理。
• 而这个提前处理的过程我们就可以称为提升，我们再看回之前那个面试题。

text=828;
var text;
console.log(text);

• 由于变量提升所以其实它真正的顺序是这样的：

var text;
text=828;
console.log(text);

• 你可以认为是有关于var声明的变量都会提前，而赋值等操作都会停留在原地，这就是我们所说的变量提升。

函数提升

• 我们平时在编写代码时也经常会发现在同一个作用域中只要我们声明了函数，不管是在哪个位置都可以执行此函数。

addIce();
function addIce(){
  console.log('加冰块');
}

• 如上的代码其实我们经常看到，这样是没有问题的，为什么在使用addIce()之前并没有声明该函数却不会报错呢？这是因为函数声明也有提升，它可以被理解为以下的形式：

function addIce(){
  console.log('加冰块');
}
addIce();

• 所以不只是变量可以提升，函数声明在同一个作用域中也会提升，值得注意的是函数表达式是不会被提升的,我们来看下面的例子。

addIce();
var addIce=function(){
  console.log('加冰块');
}

• 这样的代码是会报错的addIce is not a function
• 了解了变量提升和函数提升后我们其实可以很轻松就看出上面的问题所在了，var addIce会被提升到最上面，他可以被理解为以下的形式：

var addIce;
addIce();
addIce=function(){
  console.log('加冰块');
}

• 在addIce被赋值前就被使用了理所当然是会报错的。

变量提升和函数提升的优先级

• 我们现在都知道了变量和函数都会提升，那么假设有这一种情况：

addIce();
console.log(addIce);
var addIce;
function addIce(){
  console.log('加冰块');
}

• 在以上的代码执行后打印了一个addIce()和加冰块,以上的代码可以理解为以下的形式：

function addIce(){
  console.log('加冰块');
}
addIce();
console.log(addIce);

• 我们可以看到当重复声明了一个addIce后，var addIce直接就会被忽略了，虽然函数声明和变量声明都会提升，但是是函数会首先提升然后才到变量，虽然这种情况在日常中基本上不会出现也最好不要出现，但是还是得了解一下。

👋 写在最后

• 由于提升这种情况，意味着在同一个作用域中无论是变量声明还是函数声明在什么地方都会在代码被执行前先处理，也就是所谓的变量提升和函数提升，在两者都存在时会优先提升函数声明。
• 更加值得一提的是在变量提升中，由于let const的出现，这两个声明的变量都不会变量提升，只有var会。
• 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛
• 更多前端资讯知识可以关注公众号：『前端快快跑』