JS 中变量提升和函数提升
1. 变量提升
什么是变量提升?
- 将变量声明提升到变量所在作用域的开头,只是将声明提前,并未将定义提前,即只声明未赋值
- 在代码执行前,都会先进行预处理,而在预处理阶段,就会进行代码提升
如何深入理解变量提升?
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,再调用函数则会报错