js变量提升与函数提升的详细过程
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
js变量提升与函数提升的详细过程
先来看两个栗子，下面的两段代码分别输出什么？
// 代码段1
function foo() {
var a = 1;
function a() {}
console.log(a);
}
foo();
// 代码段2
function foo() {
var a;
function a() {}
console.log(a);
}
foo();答案是：代码段1打印的是1，代码段2打印的是 a() 函数。
为什么会这样呢？这就涉及到js中的变量提升和函数提升的具体过程了。
1、变量的提升
js是怎么创建变量的呢？
如下面的代码：
var a = 1;
var b = 2;js在解析上面的代码的时候，其实会按照下面的方式进行解析的：
var a;
var b;
a = 1;
b = 2;所以 js 并不是在我们定义一个变量的时候，声明完成之后立即赋值，而是把所有用到的变量全部声明之后，再到变量的定义的地方进行赋值，变量的声明的过程就是变量的提升。
所以我们看下下面的栗子：
function foo() {
var a = 1;
console.log(a);
console.log(b);
var b = 2;
}
foo();上面的代码在js的眼中是这样解析的：
function foo() {
var a;
var b;
a = 1;
console.log(a); // 1
console.log(b); // undefined
b = 2;
}
foo();所以输出的 a 的值为1， b的值为 undefined。
变量在声明提升的时候，是全部提升到作用域的最前面，一个接着一个的。但是在变量赋值的时候就不是一个接着一个赋值了，而是赋值的位置在变量原本定义的位置。原本js定义变量的地方，在js运行到这里的时候，才会进行赋值操作，而没有运行到的变量，不会进行赋值操作。
所以变量的提升，提升的其实是变量的声明，而不是变量的赋值。
2、函数的提升
函数的提升和变量的提升类似，都是提升到作用域的最开始的位置，只不过变量的提升是分两步的，第一步是变量声明的提升，第二步是变量的赋值。而函数的提升是直接将整个函数整体提升到作用域的最开始位置，相当于剪切过去的样子。
3、变量提升和函数提升的顺序
在作用域中，不管是变量还是函数，都会提升到作用域最开始的位置，不同的是，函数的提升后的位置是在变量提升后的位置之后的。
举个栗子：
下面的代码输出什么？
function foo() {
console.log(a);
var a = 1;
console.log(a);
function a() {}
console.log(a);
}
foo();上面的代码在js眼中是这样解析的：
function foo() {
var a;
function a() {}
console.log(a); // a()
a = 1;
console.log(a); // 1
console.log(a); // 1
}
foo();所以从上面的栗子可以看到，变量的提升是在函数提升之前的，但是变量赋值的部分是在js原型到变量定义的位置才给变量赋值的，而函数提升是相当于直接剪切到最前面的。
我们再看一个更加复杂一点的栗子：
function foo() {
console.log(a);
var a = 1;
console.log(a);
function a() {}
console.log(a);
console.log(b);
var b = 2;
console.log(b);
function b() {}
console.log(b);
}
foo();js是这样解析的：
function foo() {
var a;
var b;
function a() {}
function b() {}
console.log(a); // a()
a = 1;
console.log(a); // 1
console.log(a); // 1
console.log(b); // b()
b = 2;
console.log(b); // 2
console.log(b);// 2
}
foo();最后，注意：只有声明的变量和函数才会进行提升，隐式全局变量不会提升。
下面的栗子中，b不会进行变量提升。
function foo() {
console.log(a);
console.log(b); // 报错
b = 'aaa';
var a = 'bbb';
console.log(a);
console.log(b);
}
foo();4、参考链接
js变量提升与函数提升的机制： https://segmentfault.com/a/1190000008568071
腾讯云开发者
