JS 中变量提升和函数提升

JS 中变量提升和函数提升

1. 变量提升

什么是变量提升？

1. 将变量声明提升到变量所在作用域的开头，只是将声明提前，并未将定义提前，即只声明未赋值
2. 在代码执行前，都会先进行预处理，而在预处理阶段，就会进行代码提升

如何深入理解变量提升？

console.log(a);		//undefined
var a = 100;
console.log(a);		//100

让我们来分析一下这段代码

• 首先，在未学习变量提升前，大家都知道，使用没有声明定义的变量，会直接报错。
• 但是现在，它不仅不会报错，反而还给你一个结果undefined。
• 这就用到了变量提升。
• 在预处理阶段，扫描到var关键字，立刻将 “var a”提升到了本作用域的最开始，但是并未将赋值也提升，所以在执行第一行代码时会得到undefined，第三行代码就是正常执行了。

总而言之，上面的代码就相当于

var a;
console.log(a);
a = 100;
console.log(a);

2. 函数提升

众所周知，在JS中函数名本质上也是变量名，那么为什么要将函数提升单独说明呢？

因为函数提升，提升的是整个函数，而不仅仅是一个名字

来看以下代码

console.log(fun());
function fun() {
	console.log("我是函数");
}

这段代码执行后，会输出“我是函数”

• 在预处理阶段，会将整个函数都提升到作用域开始，并且由于函数已经提升，在代码执行时，故自动忽略函数代码，因为已经没有意义了。
• 并且是扫描到function时才会提升，如果使用变量赋值表达式写的函数是不会进行函数提升的，而是按照变量提升的方式。

接下来，我们再来研究一下下面这段代码

console.log(demo);	//同一个变量名，由于函数整个提升，即输出函数结构
function demo() {
    console.log('我是demo');
}
var demo = 100;		//变量声明提升，只有执行时才会进行赋值
console.log(demo);	//100

这段代码，出现了函数名与变量名重名，那么，他们是同一个变量，还是两个不同的变量呢？

由于函数名本质上也是变量，所以，以上代码中的demo只有一个，并且由于变量提升只提升声明，而函数提升是提升整个函数，所以第一行输出的是函数，在执行到第五行代码时，整个函数都会被覆盖，只剩下demo=100，再调用函数则会报错