JS预解析

2018-10-11

一.预解析

JS代码执行由浏览器中的JS解析器来执行。JS解析器执行JS代码的两个过程是预解析和代码执行。

第一步：变量提升，把变量的声明提升到当前作用域的最上面，不会提升变量赋值
第二步：函数提升，把函数的声明提升到当前作用域的最上面，不会提升函数调用

先提升var，再提升function

/*例一:变量提升*/
console.log(num);
var num = 5;
//预解析
var num;
console.log(num);
num = 5;
/*例二:函数提升*/
f1();
function f1() {
  console.log('hello');
}
//预解析
function f1() {
  console.log('hello');
}
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，因为局部作用域里变量声明提升后的下一句就是打印了，还没有赋值
18	/例二/
19	console.log(a);
20	function a() {
21	console.log('aaa');
22	}
23	var a = 1;
24	console.log(a);
25	//预解析
26	//在预解析的过程中如果函数和变量的名字相同，那么结果输出是函数优先
27	var a;
28	function a() {
29	console.log('aaa');
30	}
31	console.log(a);//打印函数a
32	a = 1;
33	console.log(a);//1
34	/例三/
35	var a = 10;
36	f1();
37	function f1() {
38	var b = 5;
39	console.log(a);
40	console.log(b);
41	var a = '123';
42	}
43	//预解析
44	var a;
45	function f1() {
46	var b;
47	var a;
48	b = 5;
49	console.log(a);
50	console.log(b);
51	a = '123';
52	}
53	a = 10;
54	f1();//undefined 5
55	/例四/
56	f1();
57	console.log(c);
58	console.log(b);
59	console.log(a);
60	function f1() {
61	var a = b = c = 10;
62	console.log(a);
63	console.log(b);
64	console.log(c);
65	}
66	//预解析
67	function f1() {
68	var a;
69	a = b = c = 10;//b和c是全局变量，因为没有直接var
70	console.log(a);
71	console.log(b);
72	console.log(c);
73	}
74	f1();//10 10 10
75	console.log(c);//10
76	console.log(b);//10
77	console.log(a);//a is not defined，因为a是局部变量