两分钟搞懂函数提升与变量提升

JavaScript017

两分钟搞懂函数提升与变量提升,第1张

先不讲官方对“函数提升”与“变量提升”的定义,请回答我俩问题:

这里弹出“1”,应该是没什么问题吧?那么再看看下面这个:

相信很多同学会说,这里也是弹出1,没错,答案确实是1。那么我顺便就告诉你,上面的写法2就是所谓的函数提升。概念待会再普及,另外,补充一下,foo()函数这种写法是函数声明式。函数表达式的写法不存在函数提升。

接下来来看变量提升:

以上输出1234应该没异议吧?那么往下看:

请问上面输出的是多少?如果你测试了,就会得到undefined。为啥呢?实际上写法2就相当于:

写法3中,foo()函数里将num变量重新声明,然后弹出num,再给num赋值,那么弹出的自然是未赋值的num,而未赋值的num自然就是undefined。

有同学可能会问,上面的var num = 1234无效吗?

是的,无效,因为这就是变量提升。变量提升就是:当函数内部定义的一个变量与外部相同时,那么函数体内的这个变量就会被上升到最顶端。

那么接下来就是讲函数提升。函数提升的概念就是:在js中,函数的声明会被提升到最顶部执行,变量提升也一样。如果函数提升与变量提升同时存在,函数提升优先级高于变量提升(Hosting)。

我是从这两篇文章的阅读中,做出了自己的总结,如果不明白的话可以看看这两篇文章:

变量提升情况:

变量提升概念:

js引擎在执行过程中变量的生命周期分为三个阶段: 注册、初始化、赋值

var、funciton、let、const的生命周期:

var 在注册阶段初始化是一起的,会被赋值为 undefined ,所以变量提升,打印出的是 undefined

function 在注册阶段初始化、执行都一起了,所以函数不管写在哪里都可以直接调用

let 在注册阶段和初始化是解耦的,只是创建了但是并未初始化,所以出现了暂时性死区,打印出的是 'x is not defined'

const 的生命周期与let一样,只不过没有赋值阶段

我这就不卖关子了,输出的结果分别是:2、4、1、1、2、3、3

不知你答对了吗?

下面进入重点,我们进行分析

要想计算下面这几项,我们需要先了解 js 运算符的执行顺序,可以参考这个网址: 运算符优先级