JavaScript：預解析

一.預解析：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