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

猜你喜欢

转载自www.cnblogs.com/M-M-Monica/p/11655596.html