关于变量提升和函数提升的那些事

前言

在学习javascript过程中，我们应该如何让初学者理解关于变量提升和函数提升,接下来让我们来了解一下关于变量提升和函数提升的那些事。

变量提升

首先，大家都知道代码是从上往下执行的，接下来，我们需要简单了解一下JS的代码在运行过程，需要经历那些阶段，代码的运行过程中，分为编译阶段和执行阶段，变量提升就发生在编译阶段，接着我们来看下面的例子

console.log(a)//undefined
var a = 'tdl'

a = 'tdl'
var a
console.log(a)//tdl

第一段代码的执行结果是undefined，第二段是tdl，为什么会出现这种情况，很多初学者可能会认为两段代码的输出结果都是tdl，这就涉及到变量提升的问题了，变量提升会吧所有的变量声明提到最开头的阶段，并给变量赋值为undefined，然后按照代码以后一行执行，我们把这两段代码在预编译阶段的处理过程模拟一下，会变成下面这样的代码

var a = undefined
console.log(a)//undefined
a = 'tdl'

var a = undefined
a = 'tdl'
console.log(a)//tdl

我们就可以这样理解关于变量提升，就是把变量声明提到最前面，然后赋值为undefined，然后将代码从上往下执行。然后到a赋值阶段,就会把tdl赋给变量a，从而取代undefined。就会按照这样将代码按先后顺序执行

函数提升

了解函数提升之前我们应该简单了解一下函数声明和函数表达式，而区分函数声明和表达式最简单的方法就是看function关键字出现在声明中的位置（不单单值一行代码，而是整个声明的位置），如果function出现在声明的第一个词，那么就是函数声明，否则即使表达式。我们看下面的两段代码

Name()//tdl
function Name(){
    console.log('tdl');
}

Name()
console.log(Name);//ReferenceError: Name is not defined
var a = function Name(){
    console.log('tdl');
}

从中我们可以看出，第一段代码hi输出tdl,第二段会报错，我们简要来看一下他的预编译过程

function Name(){
    console.log('tdl');//函数声明部分被提升
    Name()// 执行之后会输出结果tdl
} 

var a = undefined
Name()
console.log(Name);//ReferenceError: Name is not defined
function Name(){
    console.log('tdl');
}

第一段代码中可以找到name，所以就正常输出name的值，而第二段代码，按照从上往下的执行顺序，Name没有找到，所以就会报错。 )

总结

1. 变量声明和函数声明都会被提升到最开头
2. 代码分为编译阶段和执行阶段，代码是按顺序从上往下执行的。
3. 学习JS最基础的一点是要学会看懂代码，关于变量提升和函数提升很重要的基础。

参考资料来源小黄书