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

JavaScript013

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

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

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

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

接下来来看变量提升:

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

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

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

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

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

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

先给出个例子:

console.log(typeof a) // "function"

function a() { ... }

var a = 1

再看结论:函数声明先提升,变量后提升,且函数声明会被提升到普通变量之前。

那既然如此,对于上面的例子,为什么输出是"function"呢?

这是因为,变量提升时,只提升了声明,并没有提升赋值。上面的例子提升后理解为:

function a() { ... }

var a

console.log(typeof a)//"function"

a = 1

第二句中声明的a被理解为重复声明而不予理会,所以a的类型在输出时依旧为function。

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

不知你答对了吗?

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

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