一.预解析：JS代码执行由浏览器中的JS解析器来执行。JS解析器执行JS代码的两个过程是预解析和代码执行。
- 第一步：变量提升，把变量的声明提升到当前作用域的最上面，不会提升变量赋值
- 第二步：函数提升，把函数的声明提升到当前作用域的最上面，不会提升函数调用
- 先提升var，在提升function
1 //例一:变量提升 2 console.log(num); 3 var num = 5; 4 //预解析 5 var num; 6 console.log(num); 7 num = 5; 8 9 //例二:函数提升 10 f1(); 11 function f1() { 12 console.log('hello'); 13 } 14 // 预解析 15 function f1() { 16 console.log('hello'); 17 } 18 f1();
二.案例
1 //① 2 var a = 25; 3 function abc() { 4 console.log(a); 5 var a = 10; 6 } 7 abc(); 8 // 预解析 9 var a; 10 function abc() { 11 // 局部作用域的预解析 12 var a; 13 console.log(a); 14 a = 10; 15 } 16 a = 25; 17 abc();//结果打印出undefined，因为局部作用域里变量声明提升后的下一句就是打印了，还没有赋值
1 //② 2 console.log(a); 3 function a() { 4 console.log('aaa'); 5 } 6 var a = 1; 7 console.log(a); 8 //预解析 9 //在预解析的过程中如果函数和变量的名字相同，那么结果输出是函数优先 10 var a; 11 function a() { 12 console.log('aaa'); 13 } 14 console.log(a);//打印函数a 15 a = 1; 16 console.log(a);//1
1 //③ 2 var a = 10; 3 f1(); 4 function f1() { 5 var b = 5; 6 console.log(a); 7 console.log(b); 8 var a = '123'; 9 } 10 // 预解析 11 var a; 12 function f1() { 13 var b; 14 var a; 15 b = 5; 16 console.log(a); 17 console.log(b); 18 a = '123'; 19 } 20 a = 10; 21 f1();//undefined 5
1 //④ 2 f1(); 3 console.log(c); 4 console.log(b); 5 console.log(a); 6 function f1() { 7 var a = b = c = 10; 8 console.log(a); 9 console.log(b); 10 console.log(c); 11 } 12 //预解析 13 function f1() { 14 var a; 15 a = b = c = 10;//b和c是全局变量，因为没有直接var 16 console.log(a); 17 console.log(b); 18 console.log(c); 19 } 20 f1();//10 10 10 21 console.log(c);//10 22 console.log(b);//10 23 console.log(a);//a is not defined