一、预解析是什么?
预解析:就是提前解析代码
JS代码的执行是由浏览器中的JS解析器(可以理解为浏览器)来执行的。JS解析器执行JS代码的时候,分为两个过程:预解析过程和代码执行过程。
预解析就是:在当前作用域中,JavaScript代码执行之前,浏览器首先会默认的把所有带var和function声明的变量进行提前的声明或者定义。
二、var预解析
//关于变量的预解析
// 没有声明变量,直接输出会报错
console.log(num);
var num;
// 声明变量,没有赋值,此时这个变量的值为undefined
console.log(num);
// 声明并数值num,在输出num的下方
// 正常情况下应该报错,但是此时结果为undefined
console.log(num);
var num = 10;
// 所以我们认为它被浏览器读取的顺序应该是这样的
var num;
console.log(num);
num = 10;
// 浏览器把num的声明提前了,但是赋值没有被提前
var声明的变量在预解析的时候只是提前的声明
☀️举个例子:
/*先解析var变量num
然后执行console输出
最后把10赋给num
*/
console.log("num=",num);
var num = 10;
❤️输出结果:
三、function函数预解析
//关于函数的预解析
// 正常情况下函数是先声明在调用,没有声明的调用会报错
f1(); //函数的调用
function f1() {
console.log("函数的声明");
}
// 此时运行代码后,正常输出
// 说明此时浏览器将函数的声明提前了,运行顺序如下
function f1() {
console.log("函数的声明");
}
f1(); //函数的调用
function声明的函数在预解析的时候会提前声明并且会同时定义
☀️举个例子:
/*
先解析fn函数的定义
然后执行console语句
*/
console.log("1+2+3+...+100=",fn());
function fn(){
var s = 0;
for(var i=1;i<=100;i++){
s += i;
}
return s;
}
❤️输出结果:
四、var声明的变量和function声明的函数在预解析的区别
总结:var声明的变量和function声明的函数在预解析的时候有区别,var声明的变量在预解析的时候只是提前的声明,function声明的函数在预解析的时候会提前声明并且会同时定义。也就是说var声明的变量和function声明的函数的区别是在声明的同时有没有同时进行定义。
五、拓展
1. 预解析做了什么事?
把变量的声明提前了,不提前赋值——提前到当前所在作用域的最上面
把函数的声明提前了,不提前调用——提前到当前所在作用域的最上面
☀️举个例子:
例如:你能算出num的输出结果为什么吗?
f1();//函数的调用
var num = 20;
function f1() {
console.log(num);
}
❤️输出结果:
详细图解如下:
2.预解析分段问题的局部作用域的问题
预解析在变量的提升中,只会在当前的作用域中提升,提前到当前的作用域的最上面;函数中的变量只会提前到函数的作用域中的最前面,不会出去。
☀️举个例子:
function f1() {
console.log(num);
var num = 10;
}
f1();
console.log(num);
❤️输出结果:
详细图解如下: