JS难点之hoist

有过C或者Java类编程经验的同学，对于“先声明后使用”的规则很熟悉，如果使用未声明的变量或者函数，编译时程序会报错！但是，JavaScript却是一个‘大奇葩’，可以在变量或者函数声明之前使用，现在根据我的理解在做一下说明。

首先说明JS的hoist分为变量hoist和函数hoist两种。

一、变量hoist

看一段程序

 

1.       var a=10;  

2.       function fun(){  

3.         console.log(a);  

4.         var a=100;  

5.         console.log(a);  

6.       }  

7.       fun();//undefined   100  

8.       console.log(a);//10  

 

我们知道在js中，作用域分为全局作用域和函数作用域两种（ES6新特性，增加了块级作用域，另做说明）。全局变量声明有三种方式：

①var(关键字)+变量名（标识符）方式在function外部声明，显示声明

② 没有使用var，直接给标识符赋值，隐式声明

③使用window全局对象来声明，全局对象的属性也应是全局变量 eg：window.test=50; alert(test);  

好，很显然，var a=10;在程序中是全局变量。那么，按照我们正常的逻辑输出结果为：10  100  10。但是，实际输出结果为：undefined 100  10,其实是JS解析器的解析原因，它会将当前作用域中声明的所有变量和函数，放在作用域的最开始处。但是变量只有其声明被提前在作用域的最开始处，赋值结果仍然还在原来位置。上述代码对于解析器来说，其实是：

9.         var a=10;  

10.       function fun(){

11.          var a;  

12.         console.log(a);  

13.          a=100;  

14.         console.log(a);  

15.       }  

16.       fun();//undefined   100  

17.       console.log(a);//10

二、函数hoist  

讲完变量hoist，现在再讲一下函数hoist，函数hoist又分为两种情况。一种是函数声明，另一种是函数作为值赋值给变量。

先说第一种情况：

18.    fun();//2  

19.      function fun(){console.log(2);} 

在这种情况下，可以看出，函数JS解释器允许在函数声明之前使用函数，其实也就说明，在这种情况，不仅函数名提前了，同时，函数体也被提前。所以可以上述代码可以执行。再说第二种情况：

20.     fun();  

21.     var fun=function(){  

22.         console.log(2);  

23.     }

结果为：Uncaught TypeError: fun is not a function  可以看出在此例中，函数只是变量声明声明提前，但是赋值没有提前，并且被提前的变量默认为undefined，所以报的错误类型为“typeerror”，因为undefined不是函数，不能被调用。

三、变量名和函数名相同时的hoist 

24.       function fun(){console.log(1);}  

25.       fun();//2  

26.       function fun(){console.log(2);}  

27.       fun();//2  

28.       var fun=100;  

29.       console.log(fun);//100  

30.       fun();//报错

在此例中，函数名和变量名相同，都是fun，都会提前，那么在提前时，有什么需要注意的地方呢？ 

函数声明比变量声明更置顶  

声明过得变量不会重复声明  

所以上述代码等效于：

31.     function fun(){console.log(1);}  

32.     function fun(){console.log(2);}//函数体覆盖上一层函数体  

33.     var fun;//实际无效  

34.     fun();  

35.     fun();  

36.     fun=100;  

37.     console.log(fun);  

38.     fun();

以上就是本人对于JS的hoist问题的理解，如果哪位同学，发现其中有误，欢迎指正！我的微信号为：Alfred-kai，请输入“CSDN博客”来进行验证。