1.预解析
1.1引子
//1问
console.log(num);//报错 num未定义
//2问
console.log(num); //undefined 未报错
var num = 10;
//3问
fun();
function fun() {
console.log(11); //11 未报错
}
//把fun();放在后面、前面都不会报错
//4问
fun1();
var fun1 = function() {
console.log(22); //报错 fun1 is not a function
}
//把fun1();放在后面就不会报错
//综上,问2和文4都比较奇怪
- Js代码是由浏览器中的js解析器来执行的。js解析器在运行js代码的时候分为两步:预解析和代码执行。
- 预解析:js引擎会把js里面所有的var、function(这里指函数声明,不包括函数表达式)提升到当前作用域的最前面。
- 代码执行:按照代码书写的顺序从上往下执行
2.变量预解析和函数预解析
预解析分为变量预解析(变量提升)和函数预解析(函数提升)
2.1 变量提升 就是把所有的变量声明提升到当前作用域的最前面,不提升赋值操作。
对于之前的“问2”
//2问
console.log(num); //undefined 未报错
var num = 10;
相当于执行了以下代码
var num;
console.log(num); //undefined
num = 10;
对于之前的“问4”
//4问
fun1();
var fun1 = function() {
console.log(22); //报错 fun1 is not a function
}
//把fun1();放在后面就不会报错
相当于执行了以下代码
var fun1;
fun1();
fun1 = function() {
console.log(22);
}
值得注意的是这里的fun1是变量名,不是函数名,这里是函数表达式,是匿名函数。
2.2 函数提升 就是把所有的函数声明(注意是函数声明,不是函数表达式)提升到当前作用域的最前面, 不调用函数。
这就可用说明为什么在“问3”中,函数的fun();放在前后都不会报错,对于之前的问“问3”
fun();
function fun() {
console.log(11); //11 未报错
}
相当于执行了以下代码
function fun() {
console.log(11); //11 未报错
}
fun();
注意:由于函数表达式无法进行函数提升,所以函数表达式的调用必须写在函数表达式的下面
3.预解析案例
//案例1 会输出什么
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
相当于执行了以下代码
var num;
function fun() {
var num;
console.log(num); //undefined
num = 20;
}
num = 10;
fun();
//案例2
var num = 10;
function fn() {
console.log(num);
var num = 20;
console.log(num);
}
fn();
相当于执行了以下代码
//相当于执行以下代码
//由内而外地完成变量提升,在根据链式查找法,得到输出的结果
var num;
function fn() {
var num;
console.log(num); //undefined
num = 20;
console.log(num); //20
}
num = 10;
fn();
//案例3
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
相当于执行了以下代码
//相当于执行了以下代码
var a;
function f1() {
var b;
var a;
b = 9;
console.log(a); //undefined
console.log(b); //9
a = '123';
}
a = 18;
f1();
小tips:
var a = b = c = 9;
相当于
var a=9;
b=9;
c=9;
集体声明
var a = 9,b = 9,c = 9;
才相当于
var a = 9;
var b = 9;
var c = 9;
//案例4
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
相当于执行以下代码
```