javascript预解析

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候,分为两个过程:预解析过程和代码执行过程

预解析过程:



  1. 把变量的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值。

  2. 把函数的声明提升到当前作用域的最前面,只会提升声明,不会提升调用。

  3. 先提升var,在提升function。




变量提升

  • 变量提升

    定义变量的时候,变量的声明会被提升到作用域的最上面,变量的赋值不会提升。

  • 函数提升

    JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面



案例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// console.log(num);
// var num = 5;
//

// f1();
// function f1() {
// console.log('hello');
// }
//
// 预解析
// 1 变量提升,把变量的声明提升到当前作用域的最上面,不包括变量的赋值
// 2 函数提升,把函数的声明提升到当前作用域的最上面,不包括函数的调用
//
// 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
// var a = 25;
// function abc() {
// alert(a);
// var a = 10;
// }
// abc();

// // 预解析
// var a;
// function abc() {
// // 局部作用域 预解析
// var a;
// alert(a);
// a = 10;
// }
// a = 25;
// abc();




// // 案例2
// console.log(a);
// function a() {
// console.log('aaaaa');
// }
// var a = 1;
// console.log(a);

// 预解析
// 在预解析的过程中如果函数和变量的名字相同,此时函数优先
// var a;
// function a() {
// console.log('aaaaa');
// }

// console.log(a);
// a = 1;
// console.log(a);





// 1、-----------------------------------
// var num = 10;
// fun();
// function fun() {
// console.log(num);
// var num = 20;
// }
//2、-----------------------------------
// 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);
// console.log(b);
// a = '123';
// }

// a = 18;
// f1();




// 3、-----------------------------------
function f1() {
var a;
a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);


// var a = b = c = 9;
// var a = 9;
// // 全局变量
// b = 9
// c = 9;



</script>
</head>
<body>

</body>
</html>