博客
关于我
几张动图带你回顾JS的变量提升
阅读量:322 次
发布时间:2019-03-04

本文共 1676 字,大约阅读时间需要 5 分钟。

大家好,我是TianTian

今天要分享的内容是JS中的变量提升(Hoisting)

前几天,一个大二的学妹拿来一道题跑来问我,这道题目不简单, 思来想去的发现里面正是有变量提升

关于变量提升的文章,太多了,之所以拿出来说,推荐的原因在于:

通过几张动图的形式,就把这个过程描述清楚了,太有趣了。

精力有限,图片并非本人制作,如有侵权,会删除滴~

Hoisting的定义

首先,看看mdn对它的解读:

变量提升(Hoisting)被认为是, Javascript中执行上下文 (特别是创建和执行阶段)工作方式的一种认识。在 ECMAScript® 2015 Language Specification 之前的JavaScript文档中找不到变量提升(Hoisting)这个词。不过,需要注意的是,开始时,这个概念可能比较难理解,甚至恼人。

我们可以理解成,在编译的阶段,js引擎帮我们把变量和函数的声明放在最前面,但实际上变量和函数声明在代码里的位置是不会动的。

知道了个大概后,我们从流程上来说说吧。

创建阶段

当JS引擎得到我们的脚本时,它做的第一件事就是为我们代码中的数据设置内存。在这一点上没有执行任何代码,它只是在为执行准备一切。函数声明和变量的存储方式是不同的。函数是以对整个函数的引用来存储的。

流程1

我们可以看到图中的内容,但是如果这个时候,遇到了变量会怎么样呢,尤其是ES6中的const和let,让我们接着往下看:

流程2

从图中我们可以总结出来,用let,const声明的变量以uninitialized来存储的。

这里就解释了,为什么我们用let和const声明的,不能在它之前使用,也就是暂时性死区

那用var关键字来声明的话,结果你猜到了嘛,我们来看图:

流程3

很显然,我们发现,用var关键字声明的变量是以默认值undefined来存储的。

这里是平时面试会被问到的一个考点,现在看来不过如此。

小结一下,他们的区别:

  • 用var关键字声明的变量是以默认值undefined来存储的。

  • 用let,const声明的变量以uninitialized来存储的。

现在,创建阶段已经完成,我们可以实际执行代码了。

让我们看看,如果我们在声明函数或任何变量之前,在文件顶部有3个console.log语句,会发生什么。


执行阶段

由于函数是以对整个函数代码的引用来存储的,我们甚至可以在创建函数的那一行之前调用它们,我们来看看结果是怎么样的:

流程4

我们发现,输出的内容是5,也就是能够正常的运行,那么遇到var声明的变量呢,我们来看图:

流程5

我们从结果中可以看到,当我们引用一个在其声明前用var关键字声明的变量时,它将简单地返回其存储的默认值:undefined

这就是我们说的怪异行为,所以我们尽可能的不去使用它,让代码更加的规范。

这个时候,ES6中引出了const和let

它的提出,就是为了防止意外地引用未定义的变量,就像我们用var关键字一样,每当我们试图访问未初始化的变量时,我们希望它会抛出一个ReferenceError

流程6

这也就是我们通常意义上所说的暂时性死区,我们引用const定义的变量,在声明前调用,就会出现Error

接下来的步骤,就如我们看到的那样子,当引擎通过我们实际声明变量的那一行时,内存中的值会被我们实际声明的值所覆盖,如下图所示:

流程7

小结

看完整个流程后,是不是更加清晰这个过程啦~

做个小结:

  • 在我们执行代码之前,函数和变量被存储在内存中,以获得一个执行环境。这就是所谓的Hoisting

  • 函数是以对整个函数的引用来存储的,带有var关键字的变量的值是未定义的,带有let和const关键字的变量是未初始化的。


最后

今天分享的内容关于Hoisting(变量提升),或许对你有那么一点点帮助。

面试题交流群持续开放,已经分享了近 许多 个面经。

加我微信: DayDay2021,备注面试,拉你进群~

我是 TianTian,我们下篇见~

往期推荐

转载地址:http://yxaq.baihongyu.com/

你可能感兴趣的文章
mysql insert update 同时执行_MySQL进阶三板斧(三)看清“触发器 (Trigger)”的真实面目...
查看>>
mysql interval显示条件值_MySQL INTERVAL关键字可以使用哪些不同的单位值?
查看>>
Mysql join原理
查看>>
MySQL Join算法与调优白皮书(二)
查看>>
Mysql order by与limit混用陷阱
查看>>
Mysql order by与limit混用陷阱
查看>>
mysql order by多个字段排序
查看>>
MySQL Order By实现原理分析和Filesort优化
查看>>
mysql problems
查看>>
mysql replace first,MySQL中处理各种重复的一些方法
查看>>
MySQL replace函数替换字符串语句的用法(mysql字符串替换)
查看>>
mysql replace用法
查看>>
Mysql Row_Format 参数讲解
查看>>
mysql select, from ,join ,on ,where groupby,having ,order by limit的执行顺序和书写顺序
查看>>
MySQL Server 5.5安装记录
查看>>
mysql server has gone away
查看>>
mysql slave 停了_slave 停止。求解决方法
查看>>
MySQL SQL 优化指南:主键、ORDER BY、GROUP BY 和 UPDATE 优化详解
查看>>
MYSQL sql语句针对数据记录时间范围查询的效率对比
查看>>
mysql sum 没返回,如果没有找到任何值,我如何在MySQL中获得SUM函数以返回'0'?
查看>>