浅谈JS声明提前

Posted 2020-10-16 _Hexagram

声明提前这个概念对于前端攻城狮来说是一个很了解的了，但是对于初入前端的新人来说，这又是一个不得不谈的话题

下面我将介绍一下什么是声明提前

1 console.log(a);               //undefined
2 var a;
3 a=10;
4 console.log(a)                //10;

如上面代码所示，在我并未定义a时，试着输出a，js并没有报错，而是用undefined显示，

在第4行输出a时结果是正确显示的，第一行为什么不报错呢？

原因是这样的，在js中存在这样一种机制，在程序正式执行之前，会将var声明的变量和function声明的函数预读到当前作用域的顶部，

js中的作用域我会在后面的章节中详细去写，在这里大家只需要先将作用域理解成变量生效的位置即可，

但赋值会保留在原位置，这也就形成第一行输出的结果，js真实的过程是将第二行提前到了第一行之前，当js执行到第一行时，

由于var a被提前了，但并未赋初始值，所以输出了undefined，到这里大家应该理解了什么是声明提前

声明提前破坏了程序的执行顺序，所以大家知道原理即可，切勿在实际开发过程中使用，不仅会降低代码可读性，还容易造成程序错误

function a(){
    console.log(10);  
}
a();                                       //20
function a(){
    console.log(20);      
}
a();                                       //20

如上图所示，本意是想调用这个函数输出10和20，但由于声明提前，后一个a函数将第一个a函数覆盖，10永远无法输出，

这在生产环境中是很容易产生的，两个人一起工作，你声明一个函数或变量，而另一个人也声明了一个跟你相同的函数或变量，

导致出现的bug非常难以发现和修改，所以在ES6的规定中，建议用let关键字来代替var，采用匿名函数自调(一种解决js全局作用域弊病的方法)的方式

来解决声明提前的问题

 

好啦，如有错误请多指正